Setting WPF background image using styles?

Question

I have a set of buttons inside the stack panel. I want them all to have a background image. How can I do this with styles? since I don’t want to manually set the background image for each button.

Here is the 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 set the installer for the Background property in the style, and you set its value to 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 the backgroung image is set to. You can change the source of ImageBrush to the one you like.

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