How can i change the style of a clicked button to show that it is the current one selected in Side Menu bar in WPF?

Question

---

---

I have a side menu bar that uses button with submenus using expander. I want to highlight the selected button to show my users that he/she is currently in this page, here are my xaml code

<Window x:Class="MyWPFApp.MainWindow"         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"         xmlns:fa="http://schemas.awesome.incremented/wpf/xaml/fontawesome.sharp"         xmlns:local="clr-namespace:MyWPFApp"         mc:Ignorable="d"         Title="MainWindow" Height="450" Width="800" WindowStartupLocation="CenterScreen" Background="#7f7cf1">      <Window.Resources>         <!--MenuButtons Style-->         <Style x:Key="menuButtonStyle" TargetType="Button">             <Setter Property="Foreground" Value="#707db2"/>             <Setter Property="HorizontalContentAlignment" Value="Stretch"/>             <Setter Property="VerticalContentAlignment" Value="Center"/>             <Setter Property="BorderBrush" Value="Transparent"/>             <Setter Property="Margin" Value="5 0 0 0"/>             <Setter Property="Height" Value="45"/>             <Setter Property="FocusVisualStyle" Value="{x:Null}"/>             <Setter Property="Tag" Value="#6673b7"/>             <Setter Property="Background" Value="Transparent"/>             <Setter Property="Template">                 <Setter.Value>                     <ControlTemplate TargetType="Button">                         <Border Background="{TemplateBinding Background}" BorderThickness="4 0 0 0" BorderBrush="Transparent">                             <ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Center"/>                         </Border>                     </ControlTemplate>                 </Setter.Value>             </Setter>             <Style.Triggers>                 <Trigger Property="IsMouseOver" Value="True">                     <Setter Property="Foreground" Value="#bccaf1"/>                     <Setter Property="Foreground" Value="#bccaf1"/>                     <Setter Property="Background">                         <Setter.Value>                             <LinearGradientBrush StartPoint="0, 0.5" EndPoint="1, 0.5">                                 <GradientStop Color="#31407b" Offset="0"/>                                 <GradientStop Color="#495385" Offset="3"/>                             </LinearGradientBrush>                         </Setter.Value>                     </Setter>                     <Setter Property="Template">                         <Setter.Value>                             <ControlTemplate TargetType="Button">                                 <Border Background="{TemplateBinding Background}" BorderThickness="4 0 0 0" BorderBrush="#a5a1f5">                                     <ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Center"/>                                 </Border>                             </ControlTemplate>                         </Setter.Value>                     </Setter>                 </Trigger>             </Style.Triggers>         </Style>                  <!--MenuButtonIcons Style-->         <Style x:Key="menuButtonIconStyle" TargetType="fa:IconImage">             <Setter Property="Width" Value="23"/>             <Setter Property="Height" Value="23"/>             <Setter Property="Margin" Value="5 0 0 0"/>             <Setter Property="Foreground" Value="{Binding Path=Tag, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}"/>         </Style>                  <!--MenuButtonTextBlock Style-->         <Style x:Key="menuButtonTextBlockStyle" TargetType="TextBlock">             <Setter Property="FontSize" Value="13"/>             <Setter Property="Margin" Value="10 0 0 0"/>             <Setter Property="HorizontalAlignment" Value="Left"/>             <Setter Property="VerticalAlignment" Value="Center"/>             <Setter Property="Foreground" Value="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}"/>         </Style>                  <!--Expander Style-->         <SolidColorBrush x:Key="Expander.Static.Circle.Stroke" Color="#FF333333"/>         <SolidColorBrush x:Key="Expander.Static.Circle.Fill" Color="#FFFFFFFF"/>         <SolidColorBrush x:Key="Expander.Static.Arrow.Stroke" Color="#FF333333"/>         <SolidColorBrush x:Key="Expander.MouseOver.Circle.Stroke" Color="#FF5593FF"/>         <SolidColorBrush x:Key="Expander.MouseOver.Circle.Fill" Color="#FFF3F9FF"/>         <SolidColorBrush x:Key="Expander.MouseOver.Arrow.Stroke" Color="#FF000000"/>         <SolidColorBrush x:Key="Expander.Pressed.Circle.Stroke" Color="#FF3C77DD"/>         <SolidColorBrush x:Key="Expander.Pressed.Circle.Fill" Color="#FFD9ECFF"/>         <SolidColorBrush x:Key="Expander.Pressed.Arrow.Stroke" Color="#FF000000"/>         <SolidColorBrush x:Key="Expander.Disabled.Circle.Stroke" Color="#FFBCBCBC"/>         <SolidColorBrush x:Key="Expander.Disabled.Circle.Fill" Color="#FFE6E6E6"/>         <SolidColorBrush x:Key="Expander.Disabled.Arrow.Stroke" Color="#FF707070"/>         <Style x:Key="ExpanderHeaderFocusVisual">             <Setter Property="Control.Template">                 <Setter.Value>                     <ControlTemplate>                         <Border>                             <Rectangle Margin="0" StrokeDashArray="1 2" Stroke="Black" SnapsToDevicePixels="true" StrokeThickness="1"/>                         </Border>                     </ControlTemplate>                 </Setter.Value>             </Setter>         </Style>         <Style x:Key="ExpanderDownHeaderStyle" TargetType="{x:Type ToggleButton}">             <Setter Property="Template">                 <Setter.Value>                     <ControlTemplate TargetType="{x:Type ToggleButton}">                         <Border Padding="{TemplateBinding Padding}">                             <Grid Background="Transparent" SnapsToDevicePixels="False">                                 <Grid.ColumnDefinitions>                                     <ColumnDefinition Width="19"/>                                     <ColumnDefinition Width="*"/>                                 </Grid.ColumnDefinitions>                                 <Ellipse x:Name="circle" Margin="200 0 0 0" Grid.Column="2" Fill="{StaticResource Expander.Static.Circle.Fill}" HorizontalAlignment="Center" Height="19" Stroke="{StaticResource Expander.Static.Circle.Stroke}" VerticalAlignment="Center" Width="19"/>                                 <Path x:Name="arrow" Margin="200 0 0 0" Grid.Column="2" Data="M 1,1.5 L 4.5,5 L 8,1.5" HorizontalAlignment="Center" Stroke="{StaticResource Expander.Static.Arrow.Stroke}" SnapsToDevicePixels="false" StrokeThickness="2" VerticalAlignment="Center"/>                                 <ContentPresenter Grid.Column="1" HorizontalAlignment="Left" Margin="4,0,0,0" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Center"/>                             </Grid>                         </Border>                         <ControlTemplate.Triggers>                             <Trigger Property="IsChecked" Value="true">                                 <Setter Property="Data" TargetName="arrow" Value="M 1,4.5  L 4.5,1  L 8,4.5"/>                             </Trigger>                             <Trigger Property="IsMouseOver" Value="true">                                 <Setter Property="Stroke" TargetName="circle" Value="{StaticResource Expander.MouseOver.Circle.Stroke}"/>                                 <Setter Property="Fill" TargetName="circle" Value="{StaticResource Expander.MouseOver.Circle.Fill}"/>                                 <Setter Property="Stroke" TargetName="arrow" Value="{StaticResource Expander.MouseOver.Arrow.Stroke}"/>                             </Trigger>                             <Trigger Property="IsPressed" Value="true">                                 <Setter Property="Stroke" TargetName="circle" Value="{StaticResource Expander.Pressed.Circle.Stroke}"/>                                 <Setter Property="StrokeThickness" TargetName="circle" Value="1.5"/>                                 <Setter Property="Fill" TargetName="circle" Value="{StaticResource Expander.Pressed.Circle.Fill}"/>                                 <Setter Property="Stroke" TargetName="arrow" Value="{StaticResource Expander.Pressed.Arrow.Stroke}"/>                             </Trigger>                             <Trigger Property="IsEnabled" Value="false">                                 <Setter Property="Stroke" TargetName="circle" Value="{StaticResource Expander.Disabled.Circle.Stroke}"/>                                 <Setter Property="Fill" TargetName="circle" Value="{StaticResource Expander.Disabled.Circle.Fill}"/>                                 <Setter Property="Stroke" TargetName="arrow" Value="{StaticResource Expander.Disabled.Arrow.Stroke}"/>                             </Trigger>                         </ControlTemplate.Triggers>                     </ControlTemplate>                 </Setter.Value>             </Setter>         </Style>         <Style x:Key="ExpanderUpHeaderStyle" TargetType="{x:Type ToggleButton}">             <Setter Property="Template">                 <Setter.Value>                     <ControlTemplate TargetType="{x:Type ToggleButton}">                         <Border Padding="{TemplateBinding Padding}">                             <Grid Background="Transparent" SnapsToDevicePixels="False">                                 <Grid.ColumnDefinitions>                                     <ColumnDefinition Width="19"/>                                     <ColumnDefinition Width="*"/>                                 </Grid.ColumnDefinitions>                                 <Grid>                                     <Grid.LayoutTransform>                                         <TransformGroup>                                             <TransformGroup.Children>                                                 <TransformCollection>                                                     <RotateTransform Angle="180"/>                                                 </TransformCollection>                                             </TransformGroup.Children>                                         </TransformGroup>                                     </Grid.LayoutTransform>                                     <Ellipse x:Name="circle" Fill="{StaticResource Expander.Static.Circle.Fill}" HorizontalAlignment="Center" Height="19" Stroke="{StaticResource Expander.Static.Circle.Stroke}" VerticalAlignment="Center" Width="19"/>                                     <Path x:Name="arrow" Data="M 1,1.5 L 4.5,5 L 8,1.5" HorizontalAlignment="Center" Stroke="{StaticResource Expander.Static.Arrow.Stroke}" SnapsToDevicePixels="false" StrokeThickness="2" VerticalAlignment="Center"/>                                 </Grid>                                 <ContentPresenter Grid.Column="1" HorizontalAlignment="Left" Margin="4,0,0,0" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Center"/>                             </Grid>                         </Border>                         <ControlTemplate.Triggers>                             <Trigger Property="IsChecked" Value="true">                                 <Setter Property="Data" TargetName="arrow" Value="M 1,4.5  L 4.5,1  L 8,4.5"/>                             </Trigger>                             <Trigger Property="IsMouseOver" Value="true">                                 <Setter Property="Stroke" TargetName="circle" Value="{StaticResource Expander.MouseOver.Circle.Stroke}"/>                                 <Setter Property="Fill" TargetName="circle" Value="{StaticResource Expander.MouseOver.Circle.Fill}"/>                                 <Setter Property="Stroke" TargetName="arrow" Value="{StaticResource Expander.MouseOver.Arrow.Stroke}"/>                             </Trigger>                             <Trigger Property="IsPressed" Value="true">                                 <Setter Property="Stroke" TargetName="circle" Value="{StaticResource Expander.Pressed.Circle.Stroke}"/>                                 <Setter Property="StrokeThickness" TargetName="circle" Value="1.5"/>                                 <Setter Property="Fill" TargetName="circle" Value="{StaticResource Expander.Pressed.Circle.Fill}"/>                                 <Setter Property="Stroke" TargetName="arrow" Value="{StaticResource Expander.Pressed.Arrow.Stroke}"/>                             </Trigger>                             <Trigger Property="IsEnabled" Value="false">                                 <Setter Property="Stroke" TargetName="circle" Value="{StaticResource Expander.Disabled.Circle.Stroke}"/>                                 <Setter Property="Fill" TargetName="circle" Value="{StaticResource Expander.Disabled.Circle.Fill}"/>                                 <Setter Property="Stroke" TargetName="arrow" Value="{StaticResource Expander.Disabled.Arrow.Stroke}"/>                             </Trigger>                         </ControlTemplate.Triggers>                     </ControlTemplate>                 </Setter.Value>             </Setter>         </Style>         <Style x:Key="ExpanderLeftHeaderStyle" TargetType="{x:Type ToggleButton}">             <Setter Property="Template">                 <Setter.Value>                     <ControlTemplate TargetType="{x:Type ToggleButton}">                         <Border Padding="{TemplateBinding Padding}">                             <Grid Background="Transparent" SnapsToDevicePixels="False">                                 <Grid.RowDefinitions>                                     <RowDefinition Height="19"/>                                     <RowDefinition Height="*"/>                                 </Grid.RowDefinitions>                                 <Grid>                                     <Grid.LayoutTransform>                                         <TransformGroup>                                             <TransformGroup.Children>                                                 <TransformCollection>                                                     <RotateTransform Angle="90"/>                                                 </TransformCollection>                                             </TransformGroup.Children>                                         </TransformGroup>                                     </Grid.LayoutTransform>                                     <Ellipse x:Name="circle" Fill="{StaticResource Expander.Static.Circle.Fill}" HorizontalAlignment="Center" Height="19" Stroke="{StaticResource Expander.Static.Circle.Stroke}" VerticalAlignment="Center" Width="19"/>                                     <Path x:Name="arrow" Data="M 1,1.5 L 4.5,5 L 8,1.5" HorizontalAlignment="Center" Stroke="{StaticResource Expander.Static.Arrow.Stroke}" SnapsToDevicePixels="false" StrokeThickness="2" VerticalAlignment="Center"/>                                 </Grid>                                 <ContentPresenter HorizontalAlignment="Center" Margin="0,4,0,0" RecognizesAccessKey="True" Grid.Row="1" SnapsToDevicePixels="True" VerticalAlignment="Top"/>                             </Grid>                         </Border>                         <ControlTemplate.Triggers>                             <Trigger Property="IsChecked" Value="true">                                 <Setter Property="Data" TargetName="arrow" Value="M 1,4.5  L 4.5,1  L 8,4.5"/>                             </Trigger>                             <Trigger Property="IsMouseOver" Value="true">                                 <Setter Property="Stroke" TargetName="circle" Value="{StaticResource Expander.MouseOver.Circle.Stroke}"/>                                 <Setter Property="Fill" TargetName="circle" Value="{StaticResource Expander.MouseOver.Circle.Fill}"/>                                 <Setter Property="Stroke" TargetName="arrow" Value="{StaticResource Expander.MouseOver.Arrow.Stroke}"/>                             </Trigger>                             <Trigger Property="IsPressed" Value="true">                                 <Setter Property="Stroke" TargetName="circle" Value="{StaticResource Expander.Pressed.Circle.Stroke}"/>                                 <Setter Property="StrokeThickness" TargetName="circle" Value="1.5"/>                                 <Setter Property="Fill" TargetName="circle" Value="{StaticResource Expander.Pressed.Circle.Fill}"/>                                 <Setter Property="Stroke" TargetName="arrow" Value="{StaticResource Expander.Pressed.Arrow.Stroke}"/>                             </Trigger>                             <Trigger Property="IsEnabled" Value="false">                                 <Setter Property="Stroke" TargetName="circle" Value="{StaticResource Expander.Disabled.Circle.Stroke}"/>                                 <Setter Property="Fill" TargetName="circle" Value="{StaticResource Expander.Disabled.Circle.Fill}"/>                                 <Setter Property="Stroke" TargetName="arrow" Value="{StaticResource Expander.Disabled.Arrow.Stroke}"/>                             </Trigger>                         </ControlTemplate.Triggers>                     </ControlTemplate>                 </Setter.Value>             </Setter>         </Style>         <Style x:Key="ExpanderRightHeaderStyle" TargetType="{x:Type ToggleButton}">             <Setter Property="Template">                 <Setter.Value>                     <ControlTemplate TargetType="{x:Type ToggleButton}">                         <Border Padding="{TemplateBinding Padding}">                             <Grid Background="Transparent" SnapsToDevicePixels="False">                                 <Grid.RowDefinitions>                                     <RowDefinition Height="19"/>                                     <RowDefinition Height="*"/>                                 </Grid.RowDefinitions>                                 <Grid>                                     <Grid.LayoutTransform>                                         <TransformGroup>                                             <TransformGroup.Children>                                                 <TransformCollection>                                                     <RotateTransform Angle="-90"/>                                                 </TransformCollection>                                             </TransformGroup.Children>                                         </TransformGroup>                                     </Grid.LayoutTransform>                                     <Ellipse x:Name="circle" Fill="{StaticResource Expander.Static.Circle.Fill}" HorizontalAlignment="Center" Height="19" Stroke="{StaticResource Expander.Static.Circle.Stroke}" VerticalAlignment="Center" Width="19"/>                                     <Path x:Name="arrow" Data="M 1,1.5 L 4.5,5 L 8,1.5" HorizontalAlignment="Center" Stroke="{StaticResource Expander.Static.Arrow.Stroke}" SnapsToDevicePixels="false" StrokeThickness="2" VerticalAlignment="Center"/>                                 </Grid>                                 <ContentPresenter HorizontalAlignment="Center" Margin="0,4,0,0" RecognizesAccessKey="True" Grid.Row="1" SnapsToDevicePixels="True" VerticalAlignment="Top"/>                             </Grid>                         </Border>                         <ControlTemplate.Triggers>                             <Trigger Property="IsChecked" Value="true">                                 <Setter Property="Data" TargetName="arrow" Value="M 1,4.5  L 4.5,1  L 8,4.5"/>                             </Trigger>                             <Trigger Property="IsMouseOver" Value="true">                                 <Setter Property="Stroke" TargetName="circle" Value="{StaticResource Expander.MouseOver.Circle.Stroke}"/>                                 <Setter Property="Fill" TargetName="circle" Value="{StaticResource Expander.MouseOver.Circle.Fill}"/>                                 <Setter Property="Stroke" TargetName="arrow" Value="{StaticResource Expander.MouseOver.Arrow.Stroke}"/>                             </Trigger>                             <Trigger Property="IsPressed" Value="true">                                 <Setter Property="Stroke" TargetName="circle" Value="{StaticResource Expander.Pressed.Circle.Stroke}"/>                                 <Setter Property="StrokeThickness" TargetName="circle" Value="1.5"/>                                 <Setter Property="Fill" TargetName="circle" Value="{StaticResource Expander.Pressed.Circle.Fill}"/>                                 <Setter Property="Stroke" TargetName="arrow" Value="{StaticResource Expander.Pressed.Arrow.Stroke}"/>                             </Trigger>                             <Trigger Property="IsEnabled" Value="false">                                 <Setter Property="Stroke" TargetName="circle" Value="{StaticResource Expander.Disabled.Circle.Stroke}"/>                                 <Setter Property="Fill" TargetName="circle" Value="{StaticResource Expander.Disabled.Circle.Fill}"/>                                 <Setter Property="Stroke" TargetName="arrow" Value="{StaticResource Expander.Disabled.Arrow.Stroke}"/>                             </Trigger>                         </ControlTemplate.Triggers>                     </ControlTemplate>                 </Setter.Value>             </Setter>         </Style>         <Style x:Key="ExpanderStyle" TargetType="{x:Type Expander}">             <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>             <Setter Property="Background" Value="Transparent"/>             <Setter Property="HorizontalContentAlignment" Value="Stretch"/>             <Setter Property="VerticalContentAlignment" Value="Stretch"/>             <Setter Property="BorderBrush" Value="Transparent"/>             <Setter Property="BorderThickness" Value="1"/>             <Setter Property="Template">                 <Setter.Value>                     <ControlTemplate TargetType="{x:Type Expander}">                         <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3" SnapsToDevicePixels="true">                             <DockPanel>                                 <ToggleButton x:Name="HeaderSite" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}" DockPanel.Dock="Top" FontStretch="{TemplateBinding FontStretch}" Foreground="{TemplateBinding Foreground}" FocusVisualStyle="{StaticResource ExpanderHeaderFocusVisual}" FontStyle="{TemplateBinding FontStyle}" FontFamily="{TemplateBinding FontFamily}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" Margin="1" MinWidth="0" MinHeight="0" Padding="{TemplateBinding Padding}" Style="{StaticResource ExpanderDownHeaderStyle}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>                                 <ContentPresenter x:Name="ExpandSite" DockPanel.Dock="Bottom" Focusable="false" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Visibility="Collapsed"/>                             </DockPanel>                         </Border>                         <ControlTemplate.Triggers>                             <Trigger Property="IsExpanded" Value="true">                                 <Setter Property="Visibility" TargetName="ExpandSite" Value="Visible"/>                             </Trigger>                             <Trigger Property="ExpandDirection" Value="Right">                                 <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Right"/>                                 <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Left"/>                                 <Setter Property="Style" TargetName="HeaderSite" Value="{StaticResource ExpanderRightHeaderStyle}"/>                             </Trigger>                             <Trigger Property="ExpandDirection" Value="Up">                                 <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Top"/>                                 <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Bottom"/>                                 <Setter Property="Style" TargetName="HeaderSite" Value="{StaticResource ExpanderUpHeaderStyle}"/>                             </Trigger>                             <Trigger Property="ExpandDirection" Value="Left">                                 <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Left"/>                                 <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Right"/>                                 <Setter Property="Style" TargetName="HeaderSite" Value="{StaticResource ExpanderLeftHeaderStyle}"/>                             </Trigger>                             <Trigger Property="IsEnabled" Value="false">                                 <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>                             </Trigger>                         </ControlTemplate.Triggers>                     </ControlTemplate>                 </Setter.Value>             </Setter>         </Style>              </Window.Resources>               <Grid>         <Grid.ColumnDefinitions>             <ColumnDefinition Width="250"/>             <ColumnDefinition Width="*"/>         </Grid.ColumnDefinitions>                   <!--Left Menu-->         <Border x:Name="RightMenuBorder" CornerRadius="10 0 0 10" Grid.Column="0">             <Border.Background>                 <LinearGradientBrush StartPoint="0, 0.5" EndPoint="1, 0.5">                     <GradientStop Color="#27396b" Offset="0"/>                     <GradientStop Color="#223266" Offset="2"/>                 </LinearGradientBrush>             </Border.Background>              <StackPanel>                 <!--Drop Down Side Menu-->                 <Expander Style="{DynamicResource ExpanderStyle}" Background="Transparent">                     <Expander.Header>                         <Button Style="{StaticResource menuButtonStyle}" Width="150">                             <StackPanel Orientation="Horizontal">                                 <fa:IconImage Icon="DollarSign" Style="{StaticResource menuButtonIconStyle}"/>                                 <TextBlock x:Name="TxtSales" Text="Sales" Style="{StaticResource menuButtonTextBlockStyle}"/>                             </StackPanel>                         </Button>                     </Expander.Header>                     <StackPanel>                         <Button Style="{StaticResource menuButtonStyle}">                             <TextBlock x:Name="TxtNewInvoice" Text="New Invoice" Style="{StaticResource menuButtonTextBlockStyle}" Margin="62 0 0 0"/>                         </Button>                         <Button Style="{StaticResource menuButtonStyle}">                             <TextBlock x:Name="TxtManageInvoices" Text="Manage Invoices" Style="{StaticResource menuButtonTextBlockStyle}" Margin="62 0 0 0"/>                         </Button>                     </StackPanel>                 </Expander>             </StackPanel>         </Border>              </Grid> </Window> 

Answer 1

Hi,@Mesh Ka .Welcome Microsoft Q&A.

You could update your style as follows.

   <Style x:Key="menuButtonStyle" TargetType="Button">
                <Setter Property="Foreground" Value="#707db2"/>
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="BorderBrush" Value="Transparent"/>
                <Setter Property="Margin" Value="5 0 0 0"/>
                <Setter Property="Height" Value="45"/>
                <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
                <Setter Property="Tag" Value="#6673b7"/>
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Border Background="{TemplateBinding Background}" BorderThickness="4 0 0 0" BorderBrush="Transparent">
                                <ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
            
                        <Setter Property="Foreground" Value="#bccaf1"/>
                        <Setter Property="Background">
                            <Setter.Value>
                                <LinearGradientBrush StartPoint="0, 0.5" EndPoint="1, 0.5">
                                    <GradientStop Color="#31407b" Offset="0"/>
                                    <GradientStop Color="#495385" Offset="3"/>
                                </LinearGradientBrush>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="Button">
                                    <Border Background="{TemplateBinding Background}" BorderThickness="4 0 0 0" BorderBrush="#a5a1f5">
                                        <ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
                                    </Border>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Trigger>

              
                    <Trigger Property="IsPressed" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" To="CadetBlue"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                   
                </Trigger>
               


            </Style.Triggers>
            </Style>

usage:It needs to explicitly set the background on the button

<Button Background="Transparent" Style="{StaticResource menuButtonStyle}" >

                            <TextBlock x:Name="TxtManageInvoices" Text="Manage Invoices"  Style="{StaticResource menuButtonTextBlockStyle}" Margin="62 0 0 0"/>
                            

                        </Button>

The result:

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.