WPF project, navigation with button's side menu

Question

I'm discovering WPF and MVVM and I think my question could help me a lot for following days working on my project.

Si here is what I have:

visual

So:

• Each buttons open a view on the right part of the window
• The active button has to apply a different style (like a green background)

To load a page onClick of a button, I'm not worrying, I'll add a specific XAML on my grid onClick.

But to apply a different style on the active button I'm lost. Do I set a variable onClick and in my style Resource I bind a trigger to this variable? I'm not sur how to do that.

My MainWindow is defined like that:

<Window x:Class="XXXX.UserInterface.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:local="clr-namespace:XXXX.UserInterface"
        mc:Ignorable="d"
        Title="MainWindow"
        Style="{StaticResource CustomWindowStyle}">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="170"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Border Style="{StaticResource SideMenuBorder}">
            <StackPanel Grid.Column="0" Orientation="Vertical">
                <Button Click="ButtonCovertC_Click" 
                        x:Name="ButtonCovertC" 
                        Margin="5.5 9 8.5 0" 
                        Style="{StaticResource ButtonSideMenu}" 
                        Content="{local:Loc ButtonCovertC}"/>
                <Button Click="ButtonEarpieceC_Click" 
                        x:Name="ButtonEarpieceC" 
                        Margin="5.5 14 8.5 0" 
                        Style="{StaticResource ButtonSideMenu}" 
                        Content="{local:Loc ButtonEarpieceC}"/>
                <Button Click="ButtonRemoteC_Click" 
                        x:Name="ButtonRemoteC" 
                        Margin="5.5 14 8.5 0" 
                        Style="{StaticResource ButtonSideMenu}" 
                        Content="{local:Loc ButtonRemoteC}"/>
            </StackPanel>
        </Border>
    </Grid>
</Window>

For the record, my button's style resource:

<Style x:Key="ButtonSideMenu" TargetType="Button">
    <Setter Property="TextBlock.TextAlignment" Value="Center" />
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
    <Setter Property="Height" Value="92"/>
    <Setter Property="Background" Value="{StaticResource ColorButtonBackground}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border CornerRadius="{StaticResource ControlCornerRadius}" Background="{TemplateBinding Background}">

                    <ContentPresenter VerticalAlignment="Center" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="Button.IsDefaulted" Value="True"/>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="FontWeight" Value="DemiBold"/>
                        <Setter Property="Background" Value="{StaticResource ColorLayoutLine}"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="FontWeight" Value="Bold"/>
                        <Setter Property="Background" Value="{StaticResource ColorBoldSelectedButton}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And my MainWindow.xaml.cs:

namespace XXXX.UserInterface
{
    /// <summary>
    /// Logique d'interaction pour MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void ButtonCovertC_Click(object sender, RoutedEventArgs e)
        {

        }

        private void ButtonEarpieceC_Click(object sender, RoutedEventArgs e)
        {


        }

        private void ButtonRemoteC_Click(object sender, RoutedEventArgs e)
        {


        }
    }
}

Answer 1

Use a radio button styled as a toggle button instead of a regular button. You can then use the IsChecked property in the style to change the background of the button. This way, when a button is checked the background color will remain. And because you used a radio button, only 1 button can be checked at a time.

Here is a really simple and ugly (as far as styling) example of how to do it.

<Window x:Class="WpfApp1.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:local="clr-namespace:WpfApp1"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <Style x:Key="MyStyle"
           BasedOn="{StaticResource {x:Type ToggleButton}}"
           TargetType="RadioButton" >
           <Setter Property="Background" Value="Blue"/>
           <Setter Property="Width" Value="60"/>
           <Setter Property="Height" Value="40"/>
           <Setter Property="BorderBrush" Value="Black"/>
           <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RadioButton}">
                    <Border Height="{TemplateBinding Height}"
                            Width="{TemplateBinding Width}"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}">
                        <ContentPresenter VerticalAlignment="Center"
                                          HorizontalAlignment="Center"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsChecked" Value="True">
                <Setter Property="Background" Value="Red"></Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<Grid>
    <RadioButton Content="RadioButton"
                 HorizontalAlignment="Left"
                 Margin="117,123,0,0"
                 VerticalAlignment="Top"
                 Style="{StaticResource MyStyle}" />
    <RadioButton Content="RadioButton"
                 HorizontalAlignment="Left"
                 Margin="117,47,0,0"
                 VerticalAlignment="Top"
                 Style="{StaticResource MyStyle}" />

</Grid>
</Window>