Есть ли способ сгруппировать 4 элемента управления в UserControl или шаблон и использовать его в родительском UserControl и связать их с MVVM?

Question

Я устанавливаю родительский элемент usercontrol, который содержит 4 элемента управления (2 checkbox и 2 textboxes) в строке, и эти 4 controls повторяются, как десять раз по вертикали вниз.Вместо того, чтобы повторять эти четыре элемента управления, есть ли способ сделать его еще одним usercontrol и добавить его как один элемент управления в родительский элемент usercontrol и связать его с помощью родительского элемента viewmodel в MVVM?

Я думал о том, чтобы создать их как отдельные элементы управления, и это было очень сложно, глядя на код.

Parent usercontrol xaml

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

моя родительская модель представления

 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 и потомком usercontrols?

Я собираюсь упростить задачу, а не определять многократные повторяющиеся строки с одинаковыми controls и properties.

Answer 1

Существует несколько способов справиться с этим.

Первый - сохранить немного повторений, создав пользовательский контроль.Вы помещаете в него свои флажки и выставляете свойства зависимостей, чтобы вы могли установить, какие свойства они должны устанавливать, текст, который видит пользователь и т. Д.

Этот пользовательский контроль связывает свои флажки с помощью кода.

Затем вы помещаете кучу этих в элемент управления.

Немного похоже (но отличается от этого) на следующее:

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

Здесь я использую пользовательский контроль с именем EditRow, которыйинкапсулирует общую функциональность, которую я хочу.Это позволяет вам помещать контент в него, чтобы вы могли иметь флажок, текстовое поле или что-то еще.Но концепция похожа.

Поскольку вы добавляете их в элемент управления в представлении, вы можете поместить туда что-нибудь еще, где захотите.

Хотите использовать текстовый блок, нет проблем.

Вам потребуется некоторый код в этом пользовательском контроле для выполнения привязок, но вы можете сохранить его, однако ваши данные в настоящий момент работают без изменений.

Альтернативой является шаблонирование моделей представления в пользовательский интерфейс.

Вы делаете это, привязывая наблюдаемую коллекцию к источнику элементов элемента управления элементами.

Добавляйте видовые модели в эту коллекцию.

Каждая из которых соответствует строке.

Выу вас есть CheckBoxyIshvm, Labelvm и т. д.

В itemscontrol вы связываете шаблон с типом viewmodel, используя datatype =

, который затем шаблонизирует labelvm во все, что вы даете ему в качестве шаблона.для одного из них.

Тогда вам, конечно, нужно будет перевести свою коллекцию ChecboxyIshVM во все, что вы сейчас делаете с этими данными.

Надеюсь, это понятно.

Мне кажется, что я не могу вставить картинку для работы в данный момент, но последний подход заключается в том, как я делаю список вещей с разделителями,названия и кнопки не здесь:

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