Reputation:
I just edited this button. Since I want to have a mouseover effect. Unfortunately the content of Button is not displayed. And I would like to change the font color, if I go with the mouse over it.
<Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="185" Height="50" HorizontalContentAlignment="Left" BorderBrush="{x:Null}" Foreground="{x:Null}" Canvas.Top="42">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#FF37424A"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#FF303B43"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
Upvotes: 1
Views: 225
Reputation: 169200
Unfortunately the content of Button is not displayed.
Don't set the Foreground property to {x:Null}
:
And I would like to change the font color, if I go with the mouse over it.
Add a setter that sets the Foreground
property in your IsMouseOver
trigger:
<Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="185" Height="50"
HorizontalContentAlignment="Left" BorderBrush="{x:Null}" Canvas.Top="42">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#FF37424A"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#FF303B43"/>
<Setter Property="Foreground" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
Upvotes: 2