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.

WPF: Image stretched when placed in StackPanel in button

I'm making a sort-of toolbar in WPF (StackPanel containing Buttons containing StackPanels containing Images and TextBlock...)
Here is the code for one button :
<Button x:Name="btnGraph" FontWeight="Normal" Background="{DynamicResource accentColor}" BorderBrush="{DynamicResource accentColor}">
<StackPanel>
<Image Source="Resources/diagnostic_chart1.png" Stretch="None"/>
<TextBlock HorizontalAlignment="Center" Text="Graph"/>
</StackPanel>
</Button>
As you can see, the image in the button is stretched, but the same image code outside the button (in the container StackPanel), it works correctly : image
I've tried a lot of things, but nothing worked.
Is there a way to make it works ?
EDIT: I also tried changing the DPI of images from 72 to 96, no effect.

The image doesn't look stretched to me; the size seems right. It actually looks like it's rendering across pixel boundaries, giving it a blurred appearance. Try setting UseLayoutRounding="True" on your root visual.

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.

Adding controls over an image in silverlight

There is a Canvas in our application where an image is loaded. We need to provide buttons such as "Add Placemark" on top right corner of the image such that the button highlights on focus.
There are PNG files for these controls. How can I make these PNG behave as buttons (change visual state on hover, onclick etc). I tried to add <Image> in <Button>, but it shows the opaque button on top of the Canvas.
<Button Height="23" HorizontalAlignment="Right" Name="btnAddPlacemark" Margin="3" VerticalAlignment="Top" Width="23" Click="btnAddPlacemark_Click">
<Image Source="/Map_SL;component/Images/PlaceMark.png" Stretch="Fill" />
</Button>

Sounds like you are going to recreate all the logic of a button, simply to remove the border/background. Remember every control in Silverlight is simply skinned and therefore infinitely configurable.
You do want to use a normal button with an image, then restyle the button to remove the parts you don't want. I realise this seems daunting at first, but there are simplified basic skins available to simplify that task, or you can use Expression Blend (if you have access to it or can afford it).
Try this link from the master himself:
http://weblogs.asp.net/scottgu/pages/silverlight-tutorial-part-7-using-control-templates-to-customize-a-control-s-look-and-feel.aspx

Surface ScatterViewItem background not transparent

I'm working on a Microsoft Surface and attaching a round image object to a ScatterViewItem. I'm having an issue hiding the background of the square ScatterViewItem. If I go in and set the background to transparent, it's not transparent, it's more like gray translucent. So what I end up with is a round image in the middle sitting on a square with gray translucent edges. How do I hide this? I'm doing this programmatically through C#.

What you're seeing isn't really the svi background, but the shadow that is part of the default template. If you want to get rid of the shadow, you need to redefine the control template.
So like this:
<s:ScatterView>
<s:ScatterViewItem Background="Transparent">
<s:ScatterViewItem.Template>
<ControlTemplate>
<TextBlock>Hello World</TextBlock>
</ControlTemplate>
</s:ScatterViewItem.Template>
</s:ScatterViewItem>
</s:ScatterView>
Be aware that if you replace it like that, you lose all the other little visual flare like the 'pick up' effect and the shimmer. If you want to keep those, just use blend to edit a copy of the existing template and remove the shadow.