c# - 有没有一种方法可以将 4 个控件分组到一个 UserControl 或模板中，并在父 UserControl 中使用它并将它们与 MVVM 绑定(bind)？

Question

我正在设置 parent usercontrol连续包含 4 个控件(2 个 checkbox 和 2 个 textboxes )以及那些 4 个 controls垂直向下重复十次。
而不是重复这四个控件，有没有一种方法可以使它成为另一个 usercontrol并将其作为单个控件添加到父 usercontrol并使用父 viewmodel 绑定(bind)在 MVVM ?

我想将它们创建为单独的控件，但在查看代码时变得非常复杂。

家长 usercontrol xml

 <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto"/>
                <ColumnDefinition Width="auto"/>
                <ColumnDefinition Width="auto"/>
                <ColumnDefinition Width="auto"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
            </Grid.RowDefinitions>
            <CheckBox Grid.Column="0" Margin="5,2.5,5,0" IsChecked="{Binding LeftChecked0, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"></CheckBox>
            <TextBox Grid.Column="1" Width="100" Margin="10,0,10,10" Text="{Binding LeftValue0, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"></TextBox>

            <CheckBox Grid.Column="2" Margin="15,2.5,5,0" IsChecked="{Binding RightChecked0, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"></CheckBox>
            <TextBox Grid.Column="3" Width="100" Margin="10,0,10,10" Text="{Binding RightValue0, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"></TextBox>


            <CheckBox Grid.Column="0" Grid.Row="1" Margin="5,2.5,5,0" ></CheckBox>
            <TextBox Grid.Column="1" Grid.Row="1" Width="100" Margin="10,0,10,10"></TextBox>
            <CheckBox Grid.Column="2" Grid.Row="1" Margin="15,2.5,5,0"></CheckBox>
            <TextBox Grid.Column="3" Grid.Row="1" Width="100" Margin="10,0,10,10"></TextBox>

            <Label Content="Degree" Grid.Row="2"/>

            <CheckBox Grid.Column="0" Grid.Row="3" Margin="5,2.5,5,0" ></CheckBox>
            <TextBox Grid.Column="1" Grid.Row="3" Width="100" Margin="10,0,10,10"></TextBox>
            <CheckBox Grid.Column="2" Grid.Row="3" Margin="15,2.5,5,0"></CheckBox>
            <TextBox Grid.Column="3" Grid.Row="3" Width="100" Margin="10,0,10,10"></TextBox>

            <CheckBox Grid.Column="0" Grid.Row="4" Margin="5,2.5,5,0" ></CheckBox>
            <TextBox Grid.Column="1" Grid.Row="4" Width="100" Margin="10,0,10,10"></TextBox>
            <CheckBox Grid.Column="2" Grid.Row="4" Margin="15,2.5,5,0"></CheckBox>
            <TextBox Grid.Column="3" Grid.Row="4" Width="100" Margin="10,0,10,10"></TextBox>

            <CheckBox Grid.Column="0" Grid.Row="5" Margin="5,2.5,5,0" ></CheckBox>
            <TextBox Grid.Column="1" Grid.Row="5" Width="100" Margin="10,0,10,10"></TextBox>
            <CheckBox Grid.Column="2" Grid.Row="5" Margin="15,2.5,5,0"></CheckBox>
            <TextBox Grid.Column="3" Grid.Row="5" Width="100" Margin="10,0,10,10"></TextBox>

            <Label Content="Iteration" Grid.Row="6"/>

            <CheckBox Grid.Column="0" Grid.Row="7" Margin="5,2.5,5,0" ></CheckBox>
            <TextBox Grid.Column="1" Grid.Row="7" Width="100" Margin="10,0,10,10"></TextBox>
            <CheckBox Grid.Column="2" Grid.Row="7" Margin="15,2.5,5,0"></CheckBox>
            <TextBox Grid.Column="3" Grid.Row="7" Width="100" Margin="10,0,10,10"></TextBox>


        </Grid>

我的父 View 模型

 public class ControlVM : ViewModelBase
    {
        private bool leftChecked0;

        public bool LeftChecked0
        {
            get { return leftChecked0; }
            set
            {
                leftChecked0 = value;
                this.OnPropertyChanged();
            }
        }

        private bool rightChecked0;

        public bool RightChecked0
        {
            get { return rightChecked0; }
            set
            {
                rightChecked0 = value;
                this.OnPropertyChanged();
            }
        }


        private string leftValue0;

        public string LeftValue0
        {
            get { return leftValue0; }
            set
            {
                leftValue0 = value;
                this.OnPropertyChanged();
            }
        }

        private string rightValue0;

        public string RightValue0
        {
            get { return rightValue0; }
            set
            {
                rightValue0 = value;
                this.OnPropertyChanged();
            }
        }
    }

就像上面 viewmodel 的代码示例一样, 我应该创建 properties和 fields对于所有其他 10 行。

我想把它作为项目模板添加到 itemtemplate控制。但它不适合我的问题，因为有时需要在这四个 controls 的每一行之间添加其他控件.

如果有办法包装四个 controls进入 usercontrol并在 xaml 中的一行中调用它？在那种情况下，我的 viewmodel应该？以及父 viewmodel 之间的绑定(bind)如何工作和 child usercontrols ?

我希望让它变得简单，而不是定义许多相同的重复行 controls和 properties .

Answer 1

有几种方法可以处理这个问题。

第一个是通过构建用户控件来节省一点重复。您将复选框放入其中并公开依赖属性，以便您可以设置这些应该设置的属性、用户看到的文本等。

然后，此用户控件将使用代码绑定(bind)它的复选框。

然后，您将其中的一堆放在项目控件中。

有点像(但不同于)这个:

https://social.technet.microsoft.com/wiki/contents/articles/29777.wpf-property-list-editing.aspx

在这里，我使用了一个名为 EditRow 的用户控件，它封装了我想要的常用功能。这允许您将内容放入其中，以便您可以拥有复选框、文本框或其他任何内容。但是这个概念是相似的。

因为您将这些添加到 View 中的 itemscontrol 中，所以您可以将其他内容放在您喜欢的任何位置。

想要一个文本 block ，没问题。

您将需要该用户控件中的一些代码来执行绑定(bind)，但您可以保留但您的数据目前仍可以正常工作。

另一种方法是将 View 模型模板化到 UI 中。

您可以通过将 observablecollection 绑定(bind)到 itemscontrol 的 itemssource 来做到这一点。

将 View 模型添加到该集合。

每一个都对应一行。

你会有一个 CheckBoxyIshvm、一个 Labelvm 等。

在 items 控件中，您使用 datatype= 将模板与 viewmodel 类型相关联

然后将 labelvm 模板化为您提供的任何内容作为其中之一的模板。

然后，您当然需要将您的 ChecboxyIshVM 集合转换为您目前正在使用该数据执行的任何操作。

希望这很清楚。

我目前似乎无法插入图片来工作，但后一种方法是我如何在此处使用分隔符、标题和非按钮处理内容列表:

https://i.imgur.com/6aoLdwk.png