WPF项目，使用按钮的侧菜单进行导航

Question

我正在发现WPF和MVVM，并且我认为我的问题对接下来的项目工作有很大帮助。

我在这里是：

视觉的

所以：

• 每个按钮在窗口右侧打开一个视图
• 活动按钮必须应用其他样式（例如绿色背景）

不用担心要加载按钮的页面onClick，我将在网格onClick上添加特定的XAML。

但是要在活动按钮上应用其他样式，我会迷失方向。 我是否要设置变量onClick，并以我的资源样式将触发器绑定到该变量？ 我不知道该怎么做。

我的MainWindow定义如下：

<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>

作为记录，我的按钮的样式资源：

<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>

和我的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

使用样式为切换按钮的单选按钮，而不是常规按钮。 然后，您可以使用样式中的IsChecked属性来更改按钮的背景。 这样，当选中按钮时，背景颜色将保留。 而且由于使用了单选按钮，一次只能检查1个按钮。

这是一个非常简单且丑陋（就样式而言）的示例。

<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>