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>