Есть ли способ заменить один пользовательский элемент управления другим пользовательским элементом управления на основе индекса

Question

Я создал два пользовательских элемента управления и планирую связать его в виде списка. В главном окне у меня есть кнопка, и по нажатию кнопки я добавляю первый пользовательский элемент управления несколько раз. Для этого я создал наблюдаемую коллекцию пользовательских элементов управления и добавил ее в список. В настоящее время эта часть работает хорошо (при каждом нажатии кнопки первый пользовательский элемент управления правильно добавляется в представление списка). Теперь у меня есть требование:

1. Вид списка может иметь usercontrol1 несколько раз, в зависимости от нажатия кнопки.
2. Этот пользовательский элемент управления имеет кнопку, которая открывает usercontrol2.
3. Теперь у меня есть требование, когда я нажимаю кнопку из usercontrol1, пользовательский элемент управления необходимо заменить на usercontrol2. Речь идет не просто о замене, так как представление списка содержит usercontrol1 несколько раз, если я щелкаю n-ный usercontrol1, только то, что usercontrol1 необходимо заменить на usercontrol2.

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

public ObservableCollection<UserControl> lis = new ObservableCollection<UserControl>();

private void NextScreen_Click(object sender, RoutedEventArgs e)
    {
        UserCntrl1 usr = new UserCntrl1();
        ListView.ItemsSource = lis;
        lis.Add(usr);
    }

Answer 1

Я бы порекомендовал использовать TabControl с Collapsed TabItem s и триггер навигации через Button. Затем вы можете легко разместить элементы управления страницей в каждом TabItem.

<Grid>
    <TabControl x:Name="MainTabControl">
        <TabItem Header="Page1" Visibility="Collapsed">
            <StackPanel>
                <Label Content="Page 1"/>
                <Button Content="Next" Click="Page1_Button_Click"/>
            </StackPanel>
        </TabItem>
        <TabItem Header="Page2" Visibility="Collapsed">
            <Label Content="Page 2"/>
        </TabItem>
    </TabControl>
</Grid>

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

private void Page1_Button_Click(object sender, RoutedEventArgs e)
{
    MainTabControl.SelectedIndex = 1;
}

Answer 2

Во-первых, неправильно добавлять коллекцию UserControls в свойство ItemsSource.

Вместо этого следует объявить UserControls в ControlTemplate объекта ListBoxItem. Переключение между различными шаблонами с помощью DataTriggers для свойства в классе элемента данных, например IsSelected в приведенном ниже примере. При нажатии кнопки измените это свойство на соответствующий элемент.

<ListBox ItemsSource="{Binding Items}">
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <local:UserControl1 .../>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsSelected}" Value="True">
                    <Setter Property="ContentTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <local:UserControl2 .../>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>