I am trying to apply a style to button how can we achieve this?
Below is my sample XAML, but it's not working
<Grid>
<Button Width="150" Height="50">
<Button.Template>
<ControlTemplate>
<Label Content="Helllo"/>
</ControlTemplate>
</Button.Template>
<Button.Style>
<Style TargetType="Button">
<Setter Property="Background" Value="Green"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="AliceBlue"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Grid>
Nothing wrong in your style placement.
ControlTemplate is overridden so you need to template bind background property of Label with button's background property .
This is how you do it:
<ControlTemplate>
<Label Content="Helllo" Background="{TemplateBinding Background}"/>
</ControlTemplate>
Use ContentTemplate in place of ControlTemplate it will keep your button events stick to its style.And for reference see Difference between ContentTemplate and Template
<Button Width="150" Height="50">
<Button.ContentTemplate>
<DataTemplate>
<Label Content="Helllo"/>
</DataTemplate>
</Button.ContentTemplate>
<Button.Style>
<Style TargetType="Button">
<Setter Property="Background" Value="Green"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="AliceBlue"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
When you are overriding control template,you need to implement the whole default control template for that control. Here's link: http://msdn.microsoft.com/en-us/library/ms753328%28v=vs.110%29.aspx
I am providing sample code which is working fine for me:
<Grid>
<Grid.Resources>
<SolidColorBrush x:Key="ControlBackground_MouseOver" Color="AliceBlue"/>
</Grid.Resources>
<Button Width="150" Height="50" Content="Hello" >
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="Background" Duration="0:0:0">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlBackground_MouseOver}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
/>
<ContentControl x:Name="ContentElement"
IsTabStop="False"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Foreground="{TemplateBinding Foreground}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
</ContentControl>
<Border
BorderThickness="1"
Opacity="0"
x:Name="FocusState"
/>
</Grid>
</ControlTemplate>
</Button.Template>
<Button.Style>
<Style TargetType="Button">
<Setter Property="Background" Value="Green"/>
</Style>
</Button.Style>
</Button>
</Grid>
If you want to only display text on button,you can just use content property of button. Please let me know if this was what you were looking for . Thanks.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.