如何在WPF/C#中创建可选项内容？

Question

TabControl我的WPF应用程序中有一个.我希望我的应用程序基本上支持单个程序中的多个"实例".例如,考虑一下Web浏览器,它们允许您在不同的选项卡中拥有多个网站实例,我希望实现类似的功能,其中我的应用程序包含多个"子应用程序"实例.

我目前面临的问题是我必须将相同的XAML复制粘贴到每个选项卡,因为每个选项卡具有完全相同的标记和UI,但数据不同.另一个问题是我需要动态创建这些选项卡的功能.

这是我的应用程序在当前状态下的屏幕截图.如您所见,顶部有2个选项卡,第二个选项卡具有透明背景,因为它处于非活动状态.

那么,我如何创建一个可选项卡系统,其中选项卡的UI对于每个选项卡保持相同,我只需要使用一个XAML UI进行开发并为每个选项卡复制该选项卡？

要求:

• 每个选项卡都具有相同的UI.
• 每个选项卡都有不同的UI元素数据.
• 作为开发人员,我想在Visual Studio中只在标签的XAML上工作一次.

理想情况下,我会喜欢一个简单的简单示例项目/代码,其中有一个没有样式的选项卡控件,启动时应用程序动态创建2-n选项卡,它们都具有相同的UI,但具有不同的数据.

Answer 1

正如另一个答案中所述，可能有很多方法可以做到这一点，但这是我的简单方法：

定义一个 DataTemplate，它定义每个相同选项卡的内容。数据模板中的控件将绑定到当前所选选项卡的视图模型。我在示例中放置了一个 TextBlock，但您可以轻松扩展它。

使用这个Xaml：

<Page.DataContext>
    <Samples:TabBindingViewModels />
</Page.DataContext>

<Grid>
    <Grid.Resources>
        <DataTemplate x:Key="ContentTemplate" 
                      DataType="{x:Type Samples:TabBindingViewModel}">
            <TextBlock Text="{Binding Content}"/>
        </DataTemplate>
    </Grid.Resources>
    <TabControl ContentTemplate="{StaticResource ContentTemplate}"  
                DisplayMemberPath="Header" ItemsSource="{Binding Items}" />
</Grid>

和这个视图模型代码：

public class TabBindingViewModels
{
    public TabBindingViewModels()
    {
        Items = new ObservableCollection<TabBindingViewModel>
                    {
                        new TabBindingViewModel(1),
                        new TabBindingViewModel(2),
                        new TabBindingViewModel(3),
                    };
    }

    public IEnumerable<TabBindingViewModel> Items { get; private set; }
}

public class TabBindingViewModel
{
    public TabBindingViewModel() : this(0)
    {
    }

    public TabBindingViewModel(int n)
    {
        Header = "I'm the header: " + n.ToString(CultureInfo.InvariantCulture);
        Content = "I'm the content: " + n.ToString(CultureInfo.InvariantCulture);
    }

    public string Header { get; set; }
    public string Content { get; set; }
}

我们得到：

我非常喜欢这个关于选项卡控件样式的教程。您可以轻松地将更复杂的内容放入选项卡标题和内容中。

您应该检查选项卡控件的完整模板以深入了解它的工作原理。使用 Blend 或 VS11 beta 提取模板。

为了动态添加/删除选项卡，现在您需要做的就是向视图模型的 ObservableCollection 添加/删除项目。