WPF项目,带按钮侧面菜单的导航

时间:2017-06-02 12:14:07

标签: c# wpf mvvm navigation

我正在发现WPF和MVVM,我认为我的问题可以帮助我在我的项目中工作几天。

这就是我所拥有的:

visual

所以:

  • 每个按钮打开窗口右侧的视图
  • 活动按钮必须应用不同的样式(如绿色背景)

要点击按钮加载页面,我不担心,我会在我的网格上添加一个特定的XAML onClick。

但是为了在活动按钮上应用不同的风格,我迷路了。 我是否设置变量onClick并以我的风格资源我将触发器绑定到此变量?我不是那样做的。

我的MainWindow定义如下:

<tr ng-repeat="rec in records |filter:searchText | DateFilter:  date_picker">

对于记录,我的按钮的样式资源:

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

我的MainWindow.xaml.cs:

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

1 个答案:

答案 0 :(得分:1)

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

这是一个非常简单和丑陋(就造型而言)如何做的例子。

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