Как правильно реализовать привязку между элементами и массивами?

Question

[Михаил Усоцкий]

Есть шаблон данных:

<DataTemplate x:Key="ControlChannelDevice">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="34"/>
            <RowDefinition Height="34"/>
            <RowDefinition Height="34"/>
            <RowDefinition Height="34"/>
            <RowDefinition Height="34"/>
            <RowDefinition Height="34"/>
            <RowDefinition Height="34"/>
            <RowDefinition Height="34"/>
        </Grid.RowDefinitions>

        <Label Grid.Column="0" Grid.Row="0" Content="Text_1" HorizontalAlignment="Center"/>
        <Label Grid.Column="1" Grid.Row="0" Content="Text_2" HorizontalAlignment="Center"/>

        <Button Grid.Column="0" Grid.Row="1" Content="Command_1" Command="{Binding Command_1}"/>
        <Button Grid.Column="1" Grid.Row="1" Content="Command_2" Command="{Binding Command_2}"/>

        <ToggleButton Grid.Column="0" Grid.Row="2" Content="Status_1" IsChecked="{Binding Status_1}"/>
        <ToggleButton Grid.Column="1" Grid.Row="2" Content="Status_2" IsChecked="{Binding Status_2}"/>

        <ToggleButton Grid.Column="0" Grid.Row="3" Content="Status_3" IsChecked="{Binding Status_3}"/>
        <ToggleButton Grid.Column="1" Grid.Row="3" Content="Status_4" IsChecked="{Binding Status_4}"/>

        <Label Grid.Column="0" Grid.Row="4" Content="Select_1"/>
        <ComboBox Grid.Column="1" Grid.Row="4" SelectedIndex="{Binding Select_1}"/>

        <Label Grid.Column="0" Grid.Row="5" Content="Select_2"/>
        <ComboBox Grid.Column="1" Grid.Row="5" SelectedIndex="{Binding Select_2}"/>

        <Label Grid.Column="0" Grid.Row="6" Content="Select_3"/>
        <ComboBox Grid.Column="1" Grid.Row="6" SelectedIndex="{Binding Select_3}"/>

        <Label Grid.Column="0" Grid.Row="7" Content="Select_4"/>
        <ComboBox Grid.Column="1" Grid.Row="7" SelectedIndex="{Binding Select_4}"/>

    </Grid>
</DataTemplate>

И есть класс с ViewModel - ControlDevice.
Написал код для обработки событий.

public class ControlChannelsDevice : BaseViewModel
{
    public ControlChannelsDevice()
    {
        foreach (ControlDevice elements in ControlChannelDevice)
            elements.PropertyChanged += Elements_PropertyChanged;
    }

    private void Elements_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
    {
        RaisePropertyChanged();
    }

    ControlDevice[] _controlChannelDevice = new ControlDevice[4]
    {
        new ControlDevice(),
        new ControlDevice(),
        new ControlDevice(),
        new ControlDevice()
    };
    public ControlDevice[] ControlChannelDevice => _controlChannelDevice;
    
}

Создаю элементы:

<ContentControl Grid.Row="1" Name="Channel_1" ContentTemplate="{StaticResource ControlChannelDevice}"/>
<ContentControl Grid.Row="1" Name="Channel_2" ContentTemplate="{StaticResource ControlChannelDevice}"/>
<ContentControl Grid.Row="1" Name="Channel_3" ContentTemplate="{StaticResource ControlChannelDevice}"/>
<ContentControl Grid.Row="1" Name="Channel_4" ContentTemplate="{StaticResource ControlChannelDevice}"/>

И делаю привязки:
ControlChannelsDevice ControlChannelsDevice { get; set; } = new ControlChannelsDevice ();

Channel_1.DataContext = ControlChannelsDevice.ControlChannelDevice[0];
Channel_2.DataContext = ControlChannelsDevice.ControlChannelDevice[1];
Channel_3.DataContext = ControlChannelsDevice.ControlChannelDevice[2];
Channel_4.DataContext = ControlChannelsDevice.ControlChannelDevice[3];

И подписал на это всё событие. Но почему-то не работают события.
Если просто один элемент создать без массива и привязать, то работает нормально. Изначально в шаблоне данных вместо ключа стоял DataType для ControlDevice.
Пробовал вместо шаблона данных поставить UserControl, а вместо ContentTemplate - Content. События есть, но данные почему-то одни и те же на все четыре ContentControl. При переключении на следующий ContentControl, предыдущий больше не восстанавливается (исчезает).
С массивами в другом участке программы это работает прекрасно, но они работают напрямую со свойствами. А такой подход на текущем не сработал.

Как решить проблему со связкой?

Comments

[Foggy Finder]

Здесь можно использовать ItemsControl с требуемым шаблоном элемента, чтобы избежать копирования

[Михаил Усоцкий]

FoggyFinder, это как реализовать?

[Foggy Finder]

Вынести ControlChannelDevice на один уровень выше, тогда количество элементов в списке автоматически будет равно количеству элементов в массиве:

<ItemsControl ItemsSource="{Binding ControlChannelDevice}">
  <ItemsControl.ItemTemplate>
    <DataTemplate>
        ...
    </DataTemplate>
  </ItemsControl.ItemTemplate>
</ItemsControl>

[Михаил Усоцкий]

FoggyFinder, DataTemplate у меня больше не использует ключ. Только DataType. При использовании ItemsControl потребовал у меня создать ключ. Я это сделал. Только я не понял, как его применить в следующей конструкции:

<DataTemplate DataType="{x:Type control:ControlPanel}">
        <DataTemplate.Resources>
            <local:IntToBooleanConverter x:Key="IntToBoolConverter" />
        </DataTemplate.Resources>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="34" />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid Grid.Row="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <RadioButton
                    Name="ChannelButton_1"
                    Grid.Column="0"
                    Content="1"
                    IsChecked="{Binding Channel, Converter={StaticResource IntToBoolConverter}, ConverterParameter=0}" />
                <RadioButton
                    Name="ChannelButton_2"
                    Grid.Column="1"
                    Content="2"
                    IsChecked="{Binding Channel, Converter={StaticResource IntToBoolConverter}, ConverterParameter=1}" />
                <RadioButton
                    Name="ChannelButton_3"
                    Grid.Column="2"
                    Content="3"
                    IsChecked="{Binding Channel, Converter={StaticResource IntToBoolConverter}, ConverterParameter=2}" />
                <RadioButton
                    Name="ChannelButton_4"
                    Grid.Column="3"
                    Content="4"
                    IsChecked="{Binding Channel, Converter={StaticResource IntToBoolConverter}, ConverterParameter=3}" />
            </Grid>
            
            <ContentControl
                Name="Channel_1"
                Grid.Row="1"
                Content="{Binding Channels[0]}" />
            <ContentControl
                Name="Channel_2"
                Grid.Row="1"
                Content="{Binding Channels[1]}" />
            <ContentControl
                Name="Channel_3"
                Grid.Row="1"
                Content="{Binding Channels[2]}" />
            <ContentControl
                Name="Channel_4"
                Grid.Row="1"
                Content="{Binding Channels[3]}" />
        </Grid>
        <DataTemplate.Triggers>
            <Trigger SourceName="ChannelButton_1" Property="IsChecked" Value="True">
                <Setter TargetName="Channel_1" Property="Visibility" Value="Visible" />
            </Trigger>
            <Trigger SourceName="ChannelButton_1" Property="IsChecked" Value="False">
                <Setter TargetName="Channel_1" Property="Visibility" Value="Collapsed" />
            </Trigger>
            <Trigger SourceName="ChannelButton_2" Property="IsChecked" Value="True">
                <Setter TargetName="Channel_2" Property="Visibility" Value="Visible" />
            </Trigger>
            <Trigger SourceName="ChannelButton_2" Property="IsChecked" Value="False">
                <Setter TargetName="Channel_2" Property="Visibility" Value="Collapsed" />
            </Trigger>
            <Trigger SourceName="ChannelButton_3" Property="IsChecked" Value="True">
                <Setter TargetName="Channel_3" Property="Visibility" Value="Visible" />
            </Trigger>
            <Trigger SourceName="ChannelButton_3" Property="IsChecked" Value="False">
                <Setter TargetName="Channel_3" Property="Visibility" Value="Collapsed" />
            </Trigger>
            <Trigger SourceName="ChannelButton_4" Property="IsChecked" Value="True">
                <Setter TargetName="Channel_4" Property="Visibility" Value="Visible" />
            </Trigger>
            <Trigger SourceName="ChannelButton_4" Property="IsChecked" Value="False">
                <Setter TargetName="Channel_4" Property="Visibility" Value="Collapsed" />
            </Trigger>
        </DataTemplate.Triggers>
    </DataTemplate>

Как переделать ContentControl так, чтобы они принимали ItemsControl? Channels - это тот самый DataType ControlDevice. Channel - это просто делает видимым только один из списка.

[Михаил Усоцкий]

FoggyFinder, реализовал это:

<ItemsControl ItemsSource="{Binding Channels}" Grid.Row="1"/>

Работает, но выдаёт целый список. А мне надо отображение только выбранного элемента согласно Channel. То есть Channel - это SelectedIndex для Channels по сути.

[Foggy Finder]

Если правильно понимаю, то у вас есть необходимость отображать только один элемент из группы, а не все сразу, тогда ItemsControl не нужен. Особенно с учетом того, что их отображение зависит от переключателя. Разве что вынести флажок отвечающий за состояние (активен / не активен) в VM.

Для повышения читаемости возможно имеет смысл вместо триггеров использовать стандартный b2v (BooleanToVisibilityConverter) конвертер:

[Foggy Finder]

Михаил Усоцкий, странно, не увидел сразу ваш второй комментарий и уведомления не было.

В таком случае только добавлять свойство которое будет отвечать за состояние (отображать/спрятать) в VM для элемент

[Михаил Усоцкий]

FoggyFinder, да, такой способ полезен. Как-то не додумался применить для него также, как с кнопками сделал. Правда, пришлось создать отдельный класс как IntToVisibilityConverter. Реализация успешно работает. А касательно применения стандартного класса от Microsoft, его что-то не видно в коде XAML (отсутствует пространство имён System.Windows.Controls), хоть и доступен в коде C#.
Вообще-то, ранее пытался переделать TabControl под свои задачи. Но не вышло: слишком мудреная конструкция у него. Пришлось пока состряпать свой вариант на шаблонах данных.

Answer 1

[Михаил Усоцкий]

Проблема решилась.
Надо было исправить:

<ContentControl Grid.Row="1" Name="Channel_1" Content="{Binding ControlChannelDevice[0]}"/>
<ContentControl Grid.Row="1" Name="Channel_2" Content="{Binding ControlChannelDevice[1]}"/>
<ContentControl Grid.Row="1" Name="Channel_3" Content="{Binding ControlChannelDevice[2]}"/>
<ContentControl Grid.Row="1" Name="Channel_4" Content="{Binding ControlChannelDevice[3]}"/>

и:

Channel_1.DataContext = ControlChannelsDevice;
Channel_2.DataContext = ControlChannelsDevice;
Channel_3.DataContext = ControlChannelsDevice;
Channel_4.DataContext = ControlChannelsDevice;