Setting WPF control background image using styles? - wpf

Question

I have a set of buttons inside a stack panel. I want them all to have a background image. How can i do it using styles? since i don't want to set manually the Background image for each button.
Here is a code snippet:
<StackPanel Orientation="Horizontal" Height="100px" VerticalAlignment="Top">
<StackPanel.Resources>
<Style TargetType="Button">
<Setter Property="Margin" Value="2,4" />
</Style>
</StackPanel.Resources>
<Button Width="127px" Height="79px" VerticalAlignment="Bottom">
<Button.Background>
<ImageBrush ImageSource="images/Tab.png" />
</Button.Background>
</Button>
<Button>A</Button>
<Button>R</Button>
<Button>S</Button>
</StackPanel>
Thanks.

Answer 1

Well, you specify a setter for the Background property within the style, and you set its value to the ImageBrush.
<StackPanel Orientation="Horizontal" Height="100px" VerticalAlignment="Top">
<StackPanel.Resources>
<Style TargetType="Button">
<Setter Property="Margin" Value="2,4"/>
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="images/Tab.png"/>
</Setter.Value>
</Setter>
</Style>
</StackPanel.Resources>
<Button Width="127px" Height="79px" VerticalAlignment="Bottom"/>
<Button>A</Button>
<Button>R</Button>
<Button>S</Button>
</StackPanel>

Answer 2

Below is the style for your button and backgroung image is set to it.You can change the source of the ImageBrush to the one which you wanted .
<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
<Setter Property="Background" >
<Setter.Value>
<ImageBrush ImageSource="pic.png"></ImageBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="{TemplateBinding IsDefaulted}" SnapsToDevicePixels="true">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Microsoft_Windows_Themes:ButtonChrome>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="RenderDefaulted" TargetName="Chrome" Value="true"/>
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="true">
<Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And then just use it:
<StackPanel Orientation="Horizontal" Height="100px" VerticalAlignment="Top">
<StackPanel.Resources>
<Style TargetType="Button">
<Setter Property="Margin" Value="2,4" />
</Style>
</StackPanel.Resources>
<Button Width="127px" Height="79px" VerticalAlignment="Bottom" Style="{StaticResource ButtonStyle1}">
</Button>
<Button Style="{StaticResource ButtonStyle1}" >A</Button>
<Button Style="{StaticResource ButtonStyle1}">R</Button>
<Button Style="{StaticResource ButtonStyle1}">S</Button>
</StackPanel>