有没有办法根据索引用另一个用户控件替换一个用户控件

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

将 UserControl 的集合添加到 ItemsSource 属性首先是错误的。

您应该改为在 ListBoxItem 的 ControlTemplate 中声明 UserControl。 通过数据项类中的属性上的 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>

Answer 2

我推荐的是使用带有 Collapsed TabItem的TabControl和通过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;
}