6

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.

H.B.
  • 166,899
  • 29
  • 327
  • 400
Luke
  • 22,826
  • 31
  • 110
  • 193
  • how are you including your background image in the project? If it is included as 'Content' then I would have expected your ImageSource to look more like this: `ImageSource="pack://application:,,,/component/images/bird_text_bg.jpg"` – paul May 23 '12 at 14:09
  • 1
    If you specify it directly (rather than using a resource) does it show up? – Tim May 23 '12 at 14:15
  • That's the strange thing. I have it set to content and have the images in Visual Studio. I simply used the ellipse button within visual studio for "ImageSource" in the properties pane and then it automatically generated that path for me. – Luke May 23 '12 at 14:16
  • No, if I refer to the image directly `c:/myfolder/bird_text_bg.jpg` it doesn't appear either. – Luke May 23 '12 at 14:18

3 Answers3

11

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}"/>
erodewald
  • 1,815
  • 20
  • 45
  • I would add that the most important part, for me, was the part "If the images are added to the project as a Resource", because in my case they were as Content and that's why I had a problem. Thanks! – Nikola Nov 18 '14 at 13:50
3

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.

Chris W.
  • 22,835
  • 3
  • 60
  • 94
2

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"

JSJ
  • 5,653
  • 3
  • 25
  • 32