wpfimagexamlbackgroundimagebrush

Grid Background Image using ImageBrush


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.


Solution

  • 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"