Question

我需要为每个应用程序选择/映射少量数据源，首先选择左侧的应用程序，然后选择右侧的映射/选定（少数）数据源（参见屏幕截图）。

我经常有这样的场景作为业务需求，但是我无法想出一个很好的解决方案来使用WPF绑定对此进行建模。

给出以下代码：

模特：

class DataSource
{
    public DataSource(string name)
    {
        Name = name;
    }

    public string Name { get; private set; }
}

class SoftwareSolution
{
    public SoftwareSolution(string name)
    {
        Name = name;
        this.DataSources = new ObservableCollection<DataSource>();
    }

    public string Name { get; private set; }
    public ObservableCollection<DataSource> DataSources { get; private set; }
}

class MainWindowViewModel
{
    public MainWindowViewModel()
    {
        this.SoftwareSolutions = new ObservableCollection<SoftwareSolution>();
        this.SoftwareSolutions.Add(new SoftwareSolution("Software 1"));
        this.SoftwareSolutions.Add(new SoftwareSolution("Software 2"));
        this.SoftwareSolutions.Add(new SoftwareSolution("Software 3"));

        this.AllAvailableDatasources = new ObservableCollection<DataSource>();
        this.AllAvailableDatasources.Add(new DataSource("SQL Server"));
        this.AllAvailableDatasources.Add(new DataSource("Oracle"));
        this.AllAvailableDatasources.Add(new DataSource("DB2"));
        this.AllAvailableDatasources.Add(new DataSource("MySQL"));
    }

    public ObservableCollection<DataSource> AllAvailableDatasources { get; private set; }
    public ObservableCollection<SoftwareSolution> SoftwareSolutions { get; private set; } 
}

XAML：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="1*"/>
    </Grid.ColumnDefinitions>

    <TextBlock Text="Application" />
    <ListBox Margin="0,25,5,0" VerticalAlignment="Stretch" ItemsSource="{Binding SoftwareSolutions}" DisplayMemberPath="Name" />

    <TextBlock Grid.Column="1" Text="DataSources" />
    <ListBox Grid.Column="1" Margin="0,25,0,0" VerticalAlignment="Stretch" ItemsSource="{Binding AllAvailableDatasources}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <DockPanel>
                    <!-- how should I bind this checkbox? -->
                    <CheckBox DockPanel.Dock="Left" />
                    <TextBlock DockPanel.Dock="Left" Text="{Binding Name}" Margin="5,0,0,0" />
                </DockPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

图形用户界面

example gui

我可以使用什么模式来＆＃34;绑定＆＃34;右侧选择右侧的复选框？

Answer 1

您需要DataSourceVM，其中包含DataSource和IsSelected属性。每个SoftwareSolution都有自己的DataSourceVMs集合，复选框绑定到IsSelected。

public SoftwareSolution(string name, IEnumerable<DataSource> dataSources)
{
    Name = name;
    this.DataSources = new ObservableCollection<DataSourceVM>(dataSource.Select(x => new DataSourceVM(x));
}

Answer 2

您应该使用ObservableCollection过滤ICollectionView，这是此类情景中的标准方法。

特别是你在左边有一个连接的事件，它会改变ICollectionView，并且会绑定在右边的列上。

此处ICollectionView的更多信息：https://msdn.microsoft.com/en-us/library/system.componentmodel.icollectionview%28v=vs.110%29.aspx

将模型集合仅绑定到另一个集合的一部分

2 个答案: