如何处理MVVM(WPF)中的许多复选框？

Question

我有一个扩展列表,每个扩展名都有自己的复选框,用户需要从中选择:

最后,我需要选择所有扩展的List或ObservableCollection.

做这个非MVVM非常简单.我创建了Checked或Unchecked事件,并添加了发件人的内容.

视图:

<CheckBox Checked="ToggleButton_OnChecked" Unchecked="ToggleButton_OnUnchecked">exe</CheckBox>

代码背后:

    private void ToggleButton_OnChecked(object sender, RoutedEventArgs e)
    {
        var ext = ((CheckBox) sender).Content.ToString();
        Model.FirstRun.ExcludeExt.Add(ext);
    }

    private void ToggleButton_OnUnchecked(object sender, RoutedEventArgs e)
    {
        var ext = ((CheckBox)sender).Content.ToString();
        Model.FirstRun.ExcludeExt.Remove(ext);
    }

如果我想做这个MVVM风格,据我所知 - 我必须为每个复选框创建一个属性并将它们绑定到UI.这是很多工作.

有没有更简单的方法？

Answer 1

你应该首先考虑一个结构,然后它不是那么多工作而且非常直接使用.

例如:您有扩展组.我会像这样创建一些思考(只是伪代码;例如没有INotifyPropertyChanged实现).

public class ExtensionGroup
{
    public string Name {get; set;}
    public ObservableCollection<ExtensionInfo> ExtensionInfos {get; set;}
}

public class ExtensionInfo
{
    public string Extension {get; set;}
    public bool IsChecked {get; set;}

    public ExtensionInfo(string extension)
    {
        Extension = extension;
    }
}

在您的ViewModel中,您可以创建

public ObservableCollection<ExtensionGroup> ExtensionGroups {get; set;}

现在你必须添加这样的数据

var extensionGroup = new ExtensionGroup{Name = "Executables"};
extensionGroup.ExtensionInfos.Add(new ExtensionInfo("exe");
extensionGroup.ExtensionInfos.Add(new ExtensionInfo("bat");

之后,您有一个包含所有组的列表,包括扩展名.

在您查看中,您可以绑定此数据,您就完成了.对于视图,您可以将ListView与DataTemplate或其他一些项控件一起使用.

使用更少的代码可以更轻松地查看您的视图,因为您只需要指定一次布局.

/ edit这是xaml的示例实现.我用了一个ItemsControl而不是一个ListView.

<ItemsControl ItemsSource="{Binding ExtensionGroups}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <Label Content="{Binding Name}"/>
                <ItemsControl ItemsSource="{Binding ExtensionInfos}">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapPanel />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <CheckBox IsChecked="{Binding IsChecked}"
                                      Content="{Binding Extension}"/>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

看起来像这样(只添加了两个有两个扩展名的组).