How to change button background in WPF xaml? - wpf

Question

Hello guys I'm new to WPF and XAML.
I'm stuck on changing the button background, image, colour or whatever, it just keeps being white.
It just shows the background when I double click on it in the visual editor so I can type some text on it, then it becomes white again.
Any clue about what I'm doing wrong?
<Button Margin="5,-7,5,-1" Width="59" Content="{Binding PlayContent}" x:Name="PlayPause" HorizontalAlignment="Center" cal:Bind.AtDesignTime="True">
<Button.Background>
<ImageBrush ImageSource="resources/main_play_normal.png"/>
</Button.Background>
</Button>
thanks

Answer 1

You just need to use style and template to modify your button behavior.
Here is a Metro Style for WPF Button try to use it :
<Style
x:Key="ButtonFocusVisual">
<Setter
Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="MetroButton" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
<Setter Property="Background" Value="#EEEEEEEE"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="10 5"/>
<Setter Property="FontSize" Value="14" />
<Setter Property="BorderThickness" Value="2" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Border
x:Name="Border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" />
<ContentPresenter
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
RecognizesAccessKey="True" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="OpacityMask" Value="#AA888888"/>
<Setter Property="Margin" Value="2 1" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderThickness" Value="0"/>
<!--<Setter Property="Background" Value="DimGray"/>-->
<Setter Property="Foreground" Value="White"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
EDIT
Try to use this style:
<Style x:Key="GreenButton" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Margin" Value="2"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background" >
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<GradientStop Color="#FF3F9542" Offset="0.85"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border"
BorderThickness="0"
Padding="4,2"
BorderBrush="LightGray"
CornerRadius="2"
Background="{TemplateBinding Background}">
<Grid >
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center" Name="contentShadow" >
</ContentPresenter>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center" Name="content"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="#FF4788c8" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Background" Value="#FF429C46"/>
</Trigger>
<Trigger Property="IsDefaulted" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="#FF282828" />
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="#FF282828" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="border" Property="Opacity" Value="0.7" />
<Setter Property="Foreground" Value="Black" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then you just apply that style like this :
<Button x:Name="m_Button" Height="35" Content="Submit" Style="{StaticResource GreenButton}" IsEnabled="True" Click="m_Button_Click"/>

Answer 2

*If want to set image as background use
<Button x:Name="bt_cam" HorizontalAlignment="Left" Margin="5,-7,5,-1" Height="80"Width="59" VerticalAlignment="Top" Click="Button_Click" >
<Button.Effect>
<DropShadowEffect Opacity="0.3" ShadowDepth="12" />
</Button.Effect>
<StackPanel>
<Image x:Name="cam" Source="resources/main_play_normal.png" />
</StackPanel>
</Button>
If want to set background color,then remove the stackpannel and add background color on
button

Answer 3

You need to change your code like this,
<Button Margin="5,-7,5,-1" Width="59" x:Name="PlayPause">
<Image Source="resources/main_play_normal.png"/>
</Button>