Question

我们说我有一些选项的列表（可编辑）。我希望有一个用户选择的可维护项目列表。我想要以下用户界面来挑选物品：对象列表框＆＃34;选项名称＆＃34;，＆＃34; ispicked＆＃34;。我希望下面的ASCII艺术能让事情变得更清晰：

 All cars            Select!          Selected cars
____________    _________________    ____________
|BMW       |    |BMW       | [x] |   |BMW       | 
|Audi      |    |Audi      | [x] |   |Audi      | 
|Volkswagen|    |Volkswagen| [x] |   |Volkswagen| 
|Honda     |    |Honda     | [ ] |   |          | 
|Toyota    |    |Toyota    | [ ] |   |          | 
|Nissan    |    |Nissan    | [ ] |   |          | 
|Ford      |    |Ford      | [ ] |   |          | 
|__________|    |__________|_____|   |__________|

如果用户标记＆＃34; Nissan＆＃34;复选框应该是：

 All cars            Select!          Selected cars
____________    _________________    ____________
|BMW       |    |BMW       | [x] |   |BMW       | 
|Audi      |    |Audi      | [x] |   |Audi      | 
|Volkswagen|    |Volkswagen| [x] |   |Volkswagen| 
|Honda     |    |Honda     | [ ] |   |Hond      | 
|Toyota    |    |Toyota    | [ ] |   |Nissan    | 
|Nissan    |    |Nissan    | [x] |   |          | 
|Ford      |    |Ford      | [ ] |   |          | 
|__________|    |__________|_____|   |__________|

添加＆＃34;日产＆＃34;收集选定的汽车应在中间的ListBox中标记相应的复选框。从所有汽车的集合中删除项目应从第二个和第三个列表框中删除它的名称。例如。从第二张图片中删除大众汽车应该导致：

 All cars            Select!          Selected cars
____________    _________________    ____________
|BMW       |    |BMW       | [x] |   |BMW       | 
|Audi      |    |Audi      | [x] |   |Audi      | 
|Honda     |    |Honda     | [ ] |   |Hond      | 
|Toyota    |    |Toyota    | [ ] |   |Nissan    | 
|Nissan    |    |Nissan    | [x] |   |          | 
|Ford      |    |Ford      | [ ] |   |          | 
|__________|    |__________|_____|   |__________|

以下是一些viewmodel代码：

[ImplementPropertyChanged]
public class ChoiceViewModel : ViewModelBase
{
    public string Title { get; set; }
    public bool IsChecked { get; set; }
}

[ImplementPropertyChanged]
public class TestViewModel : ViewModelBase
{
    public ObservableCollection<string> AllOptions { get; set; }
    public ObservableCollection<string> SelectedOptions { get; set; }

    public ObservableCollection<ChoiceViewModel> Choices { get; set; }

    public TestViewModel()
    {
        AllOptions = new ObservableCollection<string>();
        SelectedOptions = new ObservableCollection<string>();
        Choices = new ObservableCollection<ChoiceViewModel>();

        if(IsInDesignMode)
        {
            AllOptions.Add("BMW");
            AllOptions.Add("Audi");
            AllOptions.Add("Volkswagen");
            AllOptions.Add("Honda");
            AllOptions.Add("Toyota");
            AllOptions.Add("Nissan");
            AllOptions.Add("Ford");

            // German cars ftw!
            SelectedOptions.Add("BMW");
            SelectedOptions.Add("Audi");
            SelectedOptions.Add("Volkswagen");
        }
    }
}

XAML for window：

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300"
    DataContext="{Binding TestViewModel">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="22" />
            <RowDefinition Height="1*" />
        </Grid.RowDefinitions>
        <TextBlock Text="All cars" Grid.Row="0" Grid.Column="0" />
        <DataGrid ItemsSource="{Binding AllOptions}" Grid.Row="1" Grid.Column="0" Margin="10" 
                  AutoGenerateColumns="False"
                  CanUserAddRows="True" 
                  CanUserDeleteRows="True">
            <DataGrid.Columns>
                <DataGridTextColumn Width="1*" Binding="{Binding}"/>
            </DataGrid.Columns>
        </DataGrid>

        <TextBlock Text="Select!" Grid.Row="0" Grid.Column="1" />
        <ListBox ItemsSource="{Binding Choices}" Grid.Row="1" Grid.Column="1" Margin="10" >
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Title}" />
                        <CheckBox IsChecked="{Binding IsChecked}" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

        <TextBlock Text="Selected cars" Grid.Row="0" Grid.Column="2" />
        <DataGrid ItemsSource="{Binding SelectedOptions}" Grid.Row="1" Grid.Column="2" Margin="10" 
                  AutoGenerateColumns="False"
                  CanUserAddRows="True" 
                  CanUserDeleteRows="True">
            <DataGrid.Columns>
                <DataGridTextColumn Width="1*" Binding="{Binding}"/>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

所以问题是如何同步AllOptions，SelectedOptions和Choices集合WPF \ MVVM样式？

修改我接受了接受的答案。可以通过使ListBoxEx包装器暴露额外的BindableSelectedItems依赖项属性或使用附加的propertieseis来规避SelectedItems绑定的限制。有关详细信息，请参阅this问题

Answer 1

显然有很多方法可以解决这个问题，但我倾向于使用单一的集合 - 这样你根本不需要同步。

第一个列表与您拥有的一样，绑定到＆＃34; AllOptions＆＃34;
还将第二个列表绑定到＆＃34; AllOptions＆＃34;。为了使这项工作，您需要使用＆＃34;复选框列表＆＃34; ListBox的模板。
然后只需将第三个绑定到第二个列表的SelectedItems属性。

这个棘手的部分是创建复选框样式列表，但我认为这比同步2个或3个单独的列表和子视图模型更简单。

修改

下面是一个简单的例子。

<Grid> <Grid.Resources> <Style TargetType="ListBox" x:Key="CheckBoxListStyle"> <Setter Property="SelectionMode" Value="Multiple" /> <Setter Property="HorizontalContentAlignment" Value="Stretch" /> <Setter Property="ItemTemplate"> <Setter.Value> <DataTemplate> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <TextBlock Text="{Binding}" /> <CheckBox Grid.Column="1" IsChecked="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem},Path=IsSelected,Mode=TwoWay}" /> </Grid> </DataTemplate> </Setter.Value> </Setter> </Style> </Grid.Resources> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <ListBox ItemsSource="{Binding AllOptions}" /> <ListBox x:Name="selectionList" Grid.Column="1" ItemsSource="{Binding AllOptions}" Style="{StaticResource CheckBoxListStyle}" /> <ListBox Grid.Column="2" ItemsSource="{Binding ElementName=selectionList,Path=SelectedItems}" /> </Grid>

编辑＃2

我现在更喜欢这个解决方案，因为我看到＆＃34; SelectedItems＆＃34;列表不保留原始排序。

WPF：使用选项复选框将所有选项列表和选定选项列表绑定到列表框

1 个答案: