Question

我正在研究wpf mvvm模式。我为不同的复选框设计了多个UserControl。选中一个复选框后，相应的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]

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

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

Answer 1

你尝试这样的东西：

*。XAML

![caption](figure.jpg)

* .cs（代码隐藏）

<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>

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

Answer 2

创建一个包含2个属性MyControl的类string Name（将绑定到您的数据网格），UserControl Control它将成为您的控件。
创建控件列表。
在您的ViewModel中创建一个MyControl SelectedControl属性，这将告诉您所选控件的内容，并将其绑定到datagrid
在您的视图中添加ContentControl并将其绑定到：SelectedControl.Control

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

2 个答案: