Changing button background on hover (WPF)

[PetervdWal]

Hello fellow Font-Awesome fans:

I am using the WPF for my buttons in the following way:

<StackPanel Grid.Row="1" Grid.Column="2" VerticalAlignment="Center">
            <Button Style="{StaticResource DefaultIcon}" fa:Awesome.Content="AngleDoubleRight" Command="{Binding SelectHeaderCommand}"></Button>
            <Button Style="{StaticResource DefaultIcon}" fa:Awesome.Content="AngleDoubleLeft" Command="{Binding RevertSelectHeaderCommand}"></Button>
        </StackPanel>

Now I would like to have the default hover change, since i have a transparent background already and only want the icon to change color, not the background:

I do not know what i need to fill in here, and how i could make the Content from the button filled in xaml pass through all the way to my template.

<Style TargetType="{x:Type Button}" BasedOn="{StaticResource MenuIcon}" x:Key="DefaultIcon">
        <Setter Property="FontSize" Value="25"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}">
                        <!-- What should be filled in here? -->
   <fa:FontAwesome Icon="{TemplateBinding fa:Awesome.Content}"></fa:FontAwesome>
                    </Border>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="Red"></Setter>
                <Setter Property="Foreground" Value="{StaticResource ForegroundBlueBrush}"></Setter>
            </Trigger>
        </Style.Triggers>
    </Style>`
``

[drewnoakes]

Maybe try adding an actual IconAwesome or ImageAwesome element inside your button, rather than using the fa:Awesome.Content attached property. You'll get more control that way.

[PetervdWal]

Thanks for the suggestion, that was it:

page.xaml

   <StackPanel Grid.Row="1" Grid.Column="2" VerticalAlignment="Center">
            <Button Style="{StaticResource DefaultIcon}" Command="{Binding SelectHeaderCommand}">
                <Button.Content>
                    <fa:FontAwesome Icon="AngleDoubleRight"></fa:FontAwesome>
                </Button.Content>
            </Button>
            <Button Style="{StaticResource DefaultIcon}" fa:Awesome.Content="AngleDoubleLeft" Command="{Binding RevertSelectHeaderCommand}">
                <Button.Content>
                    <fa:FontAwesome Icon="AngleDoubleRight"></fa:FontAwesome>
                </Button.Content>
            </Button>
        </StackPanel>

Style.xaml

    <!-- Control buttons -->
    <Style TargetType="{x:Type Button}" BasedOn="{StaticResource MenuIcon}" x:Key="DefaultIcon">
        <Setter Property="FontSize" Value="10"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}">
                        <!-- Using content presenter so we can manually add icons in the page"-->
                        <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="Transparent"></Setter>
                <Setter Property="Foreground" Value="{StaticResource ForegroundBlueBrush}"></Setter>
            </Trigger>
        </Style.Triggers>
    </Style>