WPF 中的按钮选择问题答案

【问题标题】：Issues in Button selection in WPFWPF 中的按钮选择问题
【发布时间】：2018-09-12 22:13:33
【问题描述】：

我是 WPF MVVM 的新手。我在这里有 MainWindow.xaml 网格分为两列。 Column1 与 MenuUserControl.xaml 挂钩，其中有两个称为 Page1 和 Page2 的按钮。 Column2 与 ContentControl 挂钩，用于根据 MenuUserControl.xaml 中的按钮单击显示视图。单击 Page1 按钮时，其背景颜色应变为蓝色，然后单击 Page2 按钮时，其背景颜色应变为蓝色，而 Page1 背景颜色应变为正常。如何在 XAML 中实现这一点？

【问题讨论】：

使用 MVVM 模式，您通常绑定到一个 bool 并有一个 ValueConverter 将 bool 转换为您想要的颜色。写一些代码然后回来，我们会帮忙的。
我可以在 XAML 触发器或 DataTriggers 中实现这一点吗？
是的，你也可以这样做
有很多不同的方法可以做到这一点。如果您只有 2 个视图，那么这很简单，您选择哪个并不重要。如果你有更多，那么很快就会变得相当复杂，我会使用一个列表框。那已经有了选择机制。您单击一行以将其选中，并且 isselected 变为 true。它也已经有一种机制，使所选行的背景为浅蓝色。

标签： wpf xaml

【解决方案1】：

假设浅蓝色是可以接受的，那么这是一种解决方案。

MainWindow 有一个用于选择视图的列表框和一个用于显示页面的框架。我通常会使用 contentcontrol 和 usercontrols 而不是框架和页面，但是...

<Window.DataContext>
    <local:MainWindowViewModel/>
</Window.DataContext>
<Window.Resources>
    <DataTemplate DataType="{x:Type local:Page1ViewModel}">
        <local:Page1/>
    </DataTemplate>
    <DataTemplate DataType="{x:Type local:Page2ViewModel}">
        <local:Page2/>
    </DataTemplate>
</Window.Resources>
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="120"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <ListBox Name="ViewSelect"
             ItemsSource="{Binding ViewChoices}"
             SelectedItem="{Binding SelectedViewChoice, Mode=TwoWay}"
             >
        <ListBox.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Name}"/>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
    <Frame Grid.Column="1"
           Content="{Binding SelectedViewChoice.VM}"
           NavigationUIVisibility="Hidden"
           />
</Grid>

ViewChoices 是 ViewChoice 的集合，无论您选择哪个都是 SelectedViewChoice。 VM 属性是最终由框架呈现的视图模型的实例。这会将其模板化到关联的视图中。

MainWindowViewModel：

public class MainWindowViewModel : INotifyPropertyChanged
{
    public ObservableCollection<ViewChoice> ViewChoices { get; set; }
    = new ObservableCollection<ViewChoice>
    {
        new ViewChoice{ Name="Page One", VM=new Page1ViewModel()},
         new ViewChoice{ Name="Page Two", VM=new Page2ViewModel()},
    };

    private ViewChoice selectedViewChoice;

    public ViewChoice SelectedViewChoice
    {
        get { return selectedViewChoice; }
        set { selectedViewChoice = value; RaisePropertyChanged(); }
    }


    public event PropertyChangedEventHandler PropertyChanged;
    private void RaisePropertyChanged([CallerMemberName] String propertyName = "")
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

查看选择：

public class ViewChoice
{
    public string Name { get; set; }
    public object VM { get; set; }
}

【讨论】：

我有两个按钮而不是 ListBox 那怎么办？选定（聚焦）按钮可能会突出显示，而未聚焦按钮可能是正常状态。