c# - 跟踪在 MVVM 中选择了哪些按钮？

Question

我有动态生成的按钮，这些按钮是根据我在 VM 中创建的模型创建的。每次我实例化模型的一个实例时，它都会为其创建一个指定的按钮，这个按钮将在整个应用程序中发生变化(主要是背景颜色)。

问题是，当我不使用 MVVM(一切都在 UserControl 中)时，我有一个可观察的模型集合，我也有一个可观察的按钮集合，但我有点不想处理 2可观察的集合。我在模型中添加了一个“IsSelected” bool 值，但我不知道这在 MVVM 术语中是否正确，因为我需要保留在网格上选择的按钮/模型实例的列表。

下面是我的 XAML，它可能有助于描述我在说什么。我将发布 itemcontrol

<ItemsControl x:Name="ObjItemControl" ItemsSource="{Binding ObjCompositeCollection}">
                                    <ItemsControl.ItemContainerStyle>
                                        <Style>
                                            <Setter Property="Grid.Row" Value="{Binding Row}"/>
                                            <Setter Property="Grid.Column" Value="{Binding Column}"/>
                                        </Style>
                                    </ItemsControl.ItemContainerStyle>
                                    <ItemsControl.ItemsPanel>
                                        <ItemsPanelTemplate>
                                            <Grid DockPanel.Dock="Top" HorizontalAlignment="Stretch" 
                                             VerticalAlignment="Stretch" Name="objGrid" Grid.Row="1" 
                                             Width="{Binding MinWidth, ElementName=mainObjGrid}" 
                                             Height="{Binding Height, ElementName=mainObjGrid}"
                                             engine:GridHelper.RowCount="{Binding RowCount}"
                                             engine:GridHelper.ColumnCount="{Binding ColumnCount}" />
                                        </ItemsPanelTemplate>
                                    </ItemsControl.ItemsPanel>
                                    <ItemsControl.Resources>
                                        <DataTemplate DataType="{x:Type engine:ObjA}">
                                            <ToggleButton Content="{Binding Id}"
                                                    IsChecked="{Binding IsSelected}"
                                                    Height="{Binding ElementName=ObjItemControl, 
                                                Path=DataContext.ButtonHeightWidth}"
                                                    Width="{Binding ElementName=ObjItemControl, 
                                                Path=DataContext.ButtonHeightWidth}"
                                                    HorizontalAlignment="Stretch"
                                                    VerticalAlignment="Stretch">
                                            </ToggleButton>
                                        </DataTemplate>
                                        <DataTemplate DataType="{x:Type engine:GridLabeller}">
                                            <TextBlock Text="{Binding HeaderName}" Style="{StaticResource GridHeaders}"/>
                                        </DataTemplate>
                                    </ItemsControl.Resources>
                                </ItemsControl>

我的模型。

public sealed class ObjA : GridConfiguration, INotifyPropertyChanged
{
    private string _Id;
    public string Id
    {
        get { return _Id; }
        set { _Id = value; NotifyPropertyChanged(); }
    }

    private bool isSelected = false;
    public bool IsSelected
    {
        get { return isSelected; }
        set { isSelected = value; NotifyPropertyChanged(); }
    }
}

以及我如何在 VM 中使用它 - 这是一个循环

                    // Create obja
                    Obja obj = new Obja();
                    obj.Id = GridHelpers.GetRowName(i)
                    ObjSource.Add(obj);

添加到复合容器中的可观察集合

    private ObservableCollection<ObjA> objSource = new ObservableCollection<ObjA>();
    public ObservableCollection<ObjA> ObjSource
    {
        get { return objSource; }
        set
        {
            objSource = value;
            OnPropertyChanged(nameof(ObjSource));
        }
    }

所以这就是它，正如我所说，我希望能够将选定的按钮存储在 View 模型中，这样我就可以相应地更改它们的背景颜色，但不知道如何使用 MVVM 来做到这一点。

任何帮助，将不胜感激。

Answer 1

在 MVVM 中，只有 View 负责改变事物的显示方式。因此，按钮的背景颜色应该是 在您的 View 中处理 和 不在您的 View 模型中 .一个简单的场景是使用 DataTrigger在 Style根据其 IsSelected 更改按钮的背景值(value):

<DataTemplate DataType="{x:Type engine:ObjA}">
    <ToggleButton Content="{Binding Id}"
        IsChecked="{Binding IsSelected}"
        Height="{Binding ElementName=ObjItemControl, Path=DataContext.ButtonHeightWidth}"
        Width="{Binding ElementName=ObjItemControl, Path=DataContext.ButtonHeightWidth}"
        HorizontalAlignment="Stretch"
        Click= "ToggleButton_Click"
        VerticalAlignment="Stretch">
        <ToggleButton.Style>
            <Style TargetType="ToggleButton">
                <Setter Property="Background" Value="Red"></Setter>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsSelected}" Value="True">
                        <Setter Property="Background" Value="Blue"></Setter>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </ToggleButton.Style>
    </ToggleButton>
</DataTemplate>

您不必更改 ViewModel 中的任何内容。对于更复杂的行为，您应该查看 Converters .

您可以阅读 this article from MSDN有关样式的更多信息。

然后在您的代码隐藏中，您将有一个单击事件处理程序，您可以从中检索 View 模型对象:

private void ToggleButton_Click(object sender, RoutedEventArgs e)
{
    ToggleButton tb = sender as ToggleButton;
    ObjA objA = tb.DataContext as ObjA;
    //From here you can perform operations on your view model.
}

这是一个简化的例子，一般来说使用代码隐藏不是好的做法，你应该看看 ICommand用于更多类似 MVVM 的构造的接口(interface)。