Develop Reference

How can I set multiple backgrounds for a grid in WPF?

I have a grid, which has 2 rows and 3 columns.
I need 2 background images for my grid - one will be on the top of the other. (ZIndex of one background should be bigger than other background has). How can I achieve this?
I will need to swap these 2 backgrounds frequently, which means the top background will become lower background and lower background will become top background. Apart from that, images of these two backgrounds are gonna change a lot too.
This example has grid, which contains text switcher at the bottom. As a background, it has a picture of room. When I click 'next' button in the text switcher, I want the top background picture to gradually disappear (doubleAnimation updates opacity) and show lower background under it. Maybe I can achieve gradual switching of backgrounds in a better way, but I honestly dont know how to do it.

You can draw them as two images on a Canvas inside a VisualBrush and use that as your background:
<Grid>
<Grid.Background>
<VisualBrush>
<VisualBrush.Visual>
<Canvas Width="256" Height="256">
<Image Source="image1.png" Panel.ZIndex="1" /> <!-- This will appear over top of the other one -->
<Image Source="image2.png" Panel.ZIndex="0" />
</Canvas>
</VisualBrush.Visual>
</VisualBrush>
</Grid.Background>
</Grid>
Source and Panel.ZIndex can then be set either directly in code-behind or via data binding.
This is a bit of an unsual way of going about this though, there's almost certainly a better way of doing whatever it is you're actually trying to do.

In this case I would use databinding to bind to a property in the view model that stores the background image. When the condition changes and the view model property is changed the UI will reflect those changes.

Multi-line padded text in WPF

I am trying to implement a rectangular shadow effect in WPF, something like this:
https://css-tricks.com/multi-line-padded-text/
The shadow should follow each line of text, but it should not have a space between the lines. Also, the shadow will have some transparency, and this rules out adding a separate background to inline Runs. I tried this, and where the shadows overlapped the opacity values formed a darker color.
I have investigated so far TextBox, TextBlock and RichTextBox. I tried changing Run.Background, or selecting the text and changing the selection foreground/background. With no success, none of these are doing exactly what I need.
Basically what (I think) I need is a text formatting feature, that would allow me to create a properly wrapped text from a string IN MEMORY, with separate Runs for each and every line. After this, I could find out the pixel length of each Run, add these Runs manually to a RichTextBox or to a TextBlock, with manually created rectangles behind them.
Unfortunately, when I add text to a TextBlock or a RichTextBox, wrapping is applied to the Run itself, instead of creating separate Runs for each wrapped line.

I have not received any replies, so I am trying to answer my own question.
My major problem with TextBlock was that if I added a slightly transparent background color to the inline Run objects, they formed a darker color as the lines overlapped slightly. To overcome this issue, I changed the Run background to non-transparent, and this way the 100% opacity values would not result in visibly overlapping lines. Then I changed the opacity of the whole TextBlock to 80% - and I got the result I expected.
Here is a sample xaml:
<TextBlock TextWrapping="Wrap" FontWeight="SemiBold" FontSize="23" FontFamily="Arial" TextBlock.LineHeight="24.65"
TextOptions.TextFormattingMode="Ideal" TextTrimming="CharacterEllipsis" LineStackingStrategy="BlockLineHeight" Opacity="0.8">
<Run Background="#FFFF0000" Text="This text here" />
<Run Background="#FFFF0000" Text="will be visible across" />
<Run Background="#FFFF0000" Text="multiple lines" />
</TextBlock>
Please note that the LineHeight value is slightly higher than the FontSize value. This makes sure that there will be no visible gaps between the lines.

Windows Phone 8 scrolling when keyboard visible

I've searched loads for an answer to my problem.
Basically on my WP8 app, I have an "add record" page and a list of text boxes. I can scroll up and down the full length of the page fine, but when I tap one of the text boxes and the keyboard appears, I can no longer scroll to the very bottom and therefore can't complete the last couple text boxes.
Now, if you have a look at the MS calendar app on WP8, the "new appointment" page has a similar thing - when you tap one of the text boxes you can still scroll the whole way up and down.
I was wondering, is there anywhere I can see the XAML that MS have used? Then I can learn from that. I'm sure it's as simple as setting a height property or something but I've been stumped on this for a while now.
Rather than posting my XAML etc, does anyone know where I can get a look at the XAML for the MS stock apps? If this is even possible...
Thanks

I had the same issue. but at last i solved it, i just used the Height property to do this. i already answered for the same type of problem posted by someone.Please do the following steps
First create a ScrollViewer
Indide the ScrollViewer create a container(eg: Grid/StackPanel/Border etc...) and put every controlls inside it.
Set fixed Height for ScrollViewer and the Container (Note: Height of container should be greater than ScrollViewer's Height)
See the below Code
<ScrollViewer Height="500">
<Grid Name="Container" Height="700">
<TextBox/>
<TextBox/>
<TextBox/>
</Grid>
</ScrollViewer>
Now you can scroll the container Grid Even the KeyBoard shown or even focus on a TextBox.

Why is the image only partially visible inside my Button?

I am developing a Windows Store app and I've done this before, months ago, but all of a sudden, in this new app, I can't get the image to display inside the button (properly).
<Button x:Name="ShowView" Grid.Column="1" Width="32" Height="32" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,61,20,33">
<StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Image x:Name="ShowViewImage" Source="/Assets/ShowView.png" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</StackPanel>
</Button>
As you can see, the code is fine (unless things have changed drastically, which by the looks of it they haven't). So what gives? This is the only code I have so far in my XAML file other than the defauls that VS generates as it's a new Project.
P.S. I've also tried taking out the StackPanel and just having Button > Image, but this produces the same result.
So, when the BUtton displays at runtime, all I can see is a very tiny, 2pixels of the image (but the image is actually 32x32pixels. How do I properly display an "Image Button"?

The problem is that your Width and Height for the button are far too small. You've made it 32x32 pixels, but the button will use almost all of that itself for the space it leaves around the visible border, the border itself, and the padding between the border and the button's content.
(It leaves space around the edge to provide a larger hit target than the visible appearance. This is useful on touchscreens, where accurate finger placement is difficult.)
All that's left for your image is a few pixels.
You'll need to make the button about 62x52 pixels to leave enough space in the middle for a 32x32 pixel bitmap.
You could get away with a slightly smaller button if you explicitly set smaller Margin and Padding properties, although as mentioned above, the margin is there for a reason.

You have a couple options, the Padding property for instance is Template bound with some pre-set padding added to it. So with your Button having a fixed Height and Width set to 32 something as simple as setting Padding="0" could fix it for you depending on the actual size of your Image.
If worse comes to worse though, you could always just make your own Button Template. There's a couple easy ways to do this. One of which would be just go make a copy of the default Button Template, rip out all the Padding/Margin/Height/Width crap preset in there and just change its name then apply your new template directly to your button like;
<Button x:Name="ShowView" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,61,20,33"
Style="{StaticResource YourCustomButtonTemplateForImages}">
<Image x:Name="ShowViewImage" Source="/Assets/ShowView.png"/>
</Button>
Or... another option would be, embed your Image inside of a ViewBox inside your button and it will fit and re-scale itself accordingly to its set available size.
Oh, you might also want to make your Background="Transparent" while you're at it to make it look a little cleaner as just an image.
Hope this helps.

Fading in and out a path in silverlight?

I have a path defined as such:
<Viewbox Visibility="Collapsed" x:Name="Tick" Grid.Column="1" Grid.Row="1">
<Canvas MaxWidth="100" MaxHeight="100" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="100" Height="100" Canvas.Left="0" Canvas.Top="0">
<Path ...Fill="#FF00B800" x:Name="MyPath" (path dimensions, lines, etc) .../>
</Canvas>
</Viewbox>
Now what I'd like to do is manipulate fill such that it will cause the path to have a fade in/fade out effect. Basically make fills alpha component either move towards opaque or transparent based on whether or not the viewbox the path is inside is Visible. So when visible the path fades in, when collapsed the path fades out.

The effect you are trying achieve is a classy one but there is a serious problem with your current plan. When the Visibility of a higher-level element, Viewbox in this case, is set to Visibility.Collapsed, the element and all sub-elements are immediately no longer visisble. It is at this point that you want the fade-out of the Path to begin.
So the Path is already not visible and starting an animation to gradually reduce its opacity will no do any good because it is already gone. In other words, by the time the visibility is set to Visiblity.Collapsed, it is too late to do anything useful with things inside the element because the user won't see them. If you could, you would want to see into the future and know that you are going to change the visibility and start an animation so that it finishes before you "close the curtain" on the element.
The same problem doesn't apply to when we make the element visible because everything is perfect: we become visible and start the fade-in animation. But since half of the effect is not going to work, we still have a big problem.
The solution to this problem is move up a level and see what we're trying to do. In the XAML we only have passive elements, Viewbox, Canvas, and Path. But maybe these are acting more like controls or assisting controls, for example being the check for a CheckBox or a checkbox-like control.
A control can have states:
Normal, MouseOver
Pressed, Disabled
Unfocused, Focused
and those states can have transition effects, thanks to the VisualStateManager.
So if the fade-in and fade-out effects are part of control behavior, then we have a whole sophisticated powerful toolset available to solve our problem. I don't know if this is the case in your situation.
Even if it is not the case, a very workable approach to transition effects on Silverlight is to transform your elements into a lookless control, solely for the purpose of utilizing the VisualStateManager, because it makes things so easy. Perhaps this alternative can work in your situation.