Grid Background Image using ImageBrush

Question

I wish to use an ImageBrush in XAML to apply a background to a Grid.

I've given the brush a x:Key and want to refer to it in my grid.

Sadly, it doesn't come up with the image as a background at all.

<Window.Resources>
    <ImageBrush ImageSource="/MAQButtonTest;component/images/bird_text_bg.jpg" x:Key="BackgroundSponge" />
    <Style TargetType="TextBlock">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
    </Style>
    <ControlTemplate TargetType="Button" x:Key="ButtonTemplate">
        <Grid Width="444" ShowGridLines="False" SnapsToDevicePixels="True" Background="{DynamicResource BackgroundSponge}">
            <Grid.RowDefinitions>
                <RowDefinition Height="51" />
                <RowDefinition Height="36" />
            </Grid.RowDefinitions>
            <Grid Grid.Row="0" Background="#286c97">

            </Grid>
            <Grid Grid.Row="1" Background="#5898c0">
                <ContentPresenter Grid.Row="0" />
            </Grid>
        </Grid>
    </ControlTemplate>
</Window.Resources>

I think I'm probably referring to it in the wrong way, I've tried DynamicResource and StaticResource.

Answer 1

In your main grid you have inner childs which cover all the available space of outer grid thats why you wont be able to see the background.

 <Grid Width="444"
          Height="500" 
          Background="{DynamicResource BackgroundSponge}"
          ShowGridLines="False"
          SnapsToDevicePixels="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="51" />
            <RowDefinition Height="36" />
        </Grid.RowDefinitions>
        <Grid Grid.Row="0" Background="#286c97"  Opacity="0.2" Margin="5"/>
        <Grid Grid.Row="1" Background="#5898c0" Opacity="0.2" Margin="5">
            <ContentPresenter Grid.Row="0" />
        </Grid>
    </Grid>

is having only width which is ok but what about the height. if your just make height larger then your child items it will shows up.

or better to have margin in inside childs.

Margin="5"

or make inner child transparent like

Opacity="0.2"

Answer 2

I always did it like this;

<Grid>
   <Grid.Background>
      <ImageBrush ImageSource="/Resources/Images/BG_BlankOptimized.png"/>
   </Grid.Background>
</Grid>

Or if calling it by an imagebrush resource using a an image path more like what paul suggested using StaticResource to call that style.

Answer 3

I use this commonly. If the images are added to the project as a Resource, reference them relatively like this.

<ImageBrush x:Key="play" ImageSource="../Images/Buttons/Play.png" />

And then reference the image brush:

<Border Background="{StaticResource play}"/>