在 mvvm 模式中选择复选框时加载不同的用户控件答案

【问题标题】：Loading different usercontrols on selection of checkbox in mvvm pattern在 mvvm 模式中选择复选框时加载不同的用户控件
【发布时间】：2016-05-10 10:02:17
【问题描述】：

我正在研究 wpf mvvm 模式。我为不同的复选框设计了多个用户控件。在选择复选框时，相应的 UserControl 应加载到右侧。

对于单个复选框，我在 MainView.xaml 中添加了 UserControl，如下所示：

<StackPanel>
    <UserControl Name="CCS01" ScrollViewer.CanContentScroll="True" Margin="5" >
       <local:CCS01 HorizontalAlignment="Left"></local:CCS01>
    </UserControl>
</StackPanel>

我已将复选框列表存储在不同 UserControl 中的数据网格中，就像这样

<DataGrid Width="150" Grid.Row="0" Background="LightGray" CanUserAddRows="False"  AutoGenerateColumns="False" HorizontalAlignment="Left" Name="dataGridCustomers" ItemsSource="{Binding Path=UsecaseListItems}" CanUserResizeColumns="False" CanUserResizeRows="False">
    <DataGrid.Columns>
        <DataGridCheckBoxColumn Width="40"  Header="Select" Binding="{Binding Path=IsSelected, UpdateSourceTrigger=PropertyChanged}">                     
        </DataGridCheckBoxColumn>
        <DataGridTextColumn Width="85" Binding="{Binding Path=UsecaseName}" Header="UsecaseName" IsReadOnly="True" >
            <DataGridColumn.HeaderStyle>
                <Style TargetType="DataGridColumnHeader">
                    <Setter Property="FontWeight" Value="Bold"/>
                    <Setter Property="Foreground" Value="Black"></Setter>
                </Style>
            </DataGridColumn.HeaderStyle>
         </DataGridTextColumn>    
    </DataGrid.Columns>
</DataGrid>

viewmodel类是这样的：

[![private string _usecaseName;
        public string UsecaseName
        {
            get { return _usecaseName; }
            set
            {
                _usecaseName = value != null ? value.Trim() : null;
                OnPropertyChanged("UsecaseName");
            }
        }

        private string _description;
        public string Description
        {
            get { return _description; }
            set
            {
                _description = value != null ? value.Trim() : null;
                OnPropertyChanged("Description");
            }
        }
        private bool _IsSelected;
        public bool IsSelected
        {
            get { return _IsSelected; }
            set
            {
                _IsSelected = value;
                OnPropertyChanged("IsSelected");
            }
        }

        private bool _AllSelected;
        public bool AllSelected
        {
            get { return _AllSelected; }
            set
            {
                _AllSelected = value;
                foreach (var reportListItemModel in UsecaseListItems)
                {
                    reportListItemModel.IsSelected = this._AllSelected;

                }

                OnPropertyChanged("AllSelected");

            }
        }


        private ObservableCollection<UseCase> _usecaseListItems = new ObservableCollection<UseCase>();
        public ObservableCollection<UseCase> UsecaseListItems
        {
            get { return _usecaseListItems; }
            set {
                _usecaseListItems = value;
                OnPropertyChanged("UsecaseListItems");
            }
        }][1]][1]

简而言之，我想将页面分为两列，左侧我有一个 UserControls 列表，右侧我想查看选定的 UserControl（只能选择一个）以及如何将选定的复选框与ViewModel 类中的相应 UserControl。

作为参考，我在这里添加 UI 的图像：

【问题讨论】：

标签： c# wpf xaml mvvm user-controls

【解决方案1】：

你试试这样的：

*.xaml

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <DataGrid Grid.Column="0" Background="LightGray" CanUserAddRows="False"  AutoGenerateColumns="False" HorizontalAlignment="Left" ItemsSource="{Binding Path=UsecaseListItems}"
              Name="dataGridCustomers" CanUserResizeColumns="False" CanUserResizeRows="False"
              SelectionChanged="dataGridCustomers_SelectionChanged">
        <DataGrid.Columns>
            <DataGridCheckBoxColumn Width="auto"  Header="Select" Binding="{Binding Path=IsSelected, UpdateSourceTrigger=PropertyChanged}">
            </DataGridCheckBoxColumn>
            <DataGridTextColumn Width="auto" Binding="{Binding UsecaseName}" Header="UsecaseName" IsReadOnly="True" >
                <DataGridColumn.HeaderStyle>
                    <Style TargetType="DataGridColumnHeader">
                        <Setter Property="FontWeight" Value="Bold"/>
                        <Setter Property="Foreground" Value="Black"></Setter>
                    </Style>
                </DataGridColumn.HeaderStyle>
            </DataGridTextColumn>
        </DataGrid.Columns>
    </DataGrid>
    <Border Grid.Column="1" BorderThickness="1" BorderBrush="Gray">
        <Grid Grid.Column="1" x:Name="HostGrid" Margin="5">

        </Grid>
    </Border>
</Grid>

*.cs（代码隐藏）

private void dataGridCustomers_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var SelectedItem = dataGridCustomers.SelectedItem;
    string UserControlName = ((UseCase)SelectedItem).UsecaseName;
    Assembly ass = Assembly.GetExecutingAssembly();
    foreach (var item in ass.GetTypes())
    {
        if (item.Name == UserControlName)
        {
            UserControl uc = (UserControl)Activator.CreateInstance(item,null);
            HostGrid.Children.Add(uc);
        }
    }
}

如果您可以删除复选框，那就更好了。因为CheckBox允许多选

【讨论】：

实际上，在我的情况下，您尝试表示的 HostGrid 位于不同的 UserControl 中。
和？什么问题？如果需要，您可以更改网格的名称

【解决方案2】：

创建一个类MyControl，其中有两个属性string Name（将绑定到您的数据网格）和UserControl Control，它将由您控制。
创建控件列表。
在您的 ViewModel 中创建一个 MyControl SelectedControl 属性，这将告诉您选择的控件是什么，并将其绑定到数据网格
在您的视图中添加ContentControl 并将其绑定到：SelectedControl.Control

【讨论】：