TabItem在一个单独的XAML中

Question

是否可以将TabItem放入单独的XAML并引用如下内容:

<TabControl>
     <local:MyTabItem/>
</TabControl>



In Separate XAML:
<UserControl x:Class="MyProject.MyTabItem"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <TabItem Header="MyTab">

    </TabItem>
</UserControl>

当然它不起作用,但我想知道我该怎么做？

Answer 1

如果您想要做的只是使代码更易于管理,那么我建议在用户控件中定义每个选项卡的数据,但仍然在主选项卡控件中有TabItem.

我们假设您的原始代码是这样的:

<TabControl>
    <TabItem Header="Tab 1">
        <Grid>
            <TextBlock Text="Tab Data" />
        </Grid>
    </TabItem>
</TabControl>

为了使代码更易于管理,您可以将选项卡内容分解为UserControl,例如:

<UserControl x:Class="WpfApplication19.Tab1Data"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             >
    <Grid>
        <TextBlock Text="Tab Data" />
    </Grid>
</UserControl>

然后在TabControl中使用该用户控件,如下所示:

    <TabControl>
        <TabItem Header="Tab 1">
            <tabData:Tab1Data />
        </TabItem>
    </TabControl>

如果你真的想在你的用户控件中包含TabItem,那么你可以先创建一个用户控件,然后将用户控件的类型更改为TabItem类型(确保在xaml根节点和背后的代码).

这将为您提供如下所示的选项卡控件:

    <TabControl>
        <tabData:TabItem1 />
        <tabData:TabItem2 />
        <tabData:TabItem3 />
    </TabControl>

每个TabItem1'用户控件'都是TabItem类型.这是一个例子:

<TabItem x:Class="WpfApplication19.TabItem1"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         Header="Tab 1"
         >
    <Grid>
        <TextBlock Text="Tab Data" />
    </Grid>
</TabItem>

正如我所提到的,请务必更改后面的代码,以便它扩展TabItem而不是用户控件:

public partial class TabItem1 : TabItem
{
    public TabItem1()
    {
        InitializeComponent();
    }
}

Answer 2

Tony Borres之前的回答已经涵盖了最重要的方面.但是进一步的评论要求从背后的代码访问.所以我将从Tony扩展这个例子来展示这个方面.此答案显示了所需的命名空间.我也将它们添加到Tony的答案中.

为了使代码更易于管理,建议在用户控件中定义每个选项卡的数据,但仍然在主选项卡控件中有TabItem.例如,当使用带有多个选项卡项的选项卡控件时,此策略可用于解决FxCop CA1505:"避免不可维护的代码".

我们假设这是原始代码:

<Window x:Class="WpfApplication19.MainWindow" ...>
    <TabControl>
        <TabItem Header="Tab 1">
            <Grid>
                <TextBlock Text="Data on Tab 1" Name="txtData1" />
            </Grid>
        </TabItem>
        <TabItem Header="Tab 2">
            <Grid>
                <TextBlock Text="Data on Tab 2" Name="txtData2" />
            </Grid>
        </TabItem>
    </TabControl>
</Window>

为了使代码更易于管理,可以将选项卡内容移动到UserControl中,例如:

<UserControl x:Class="WpfApplication19.Tab1Data"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             Loaded="OnControlLoaded"
             >
    <Grid>
        <TextBlock Text="Data on Tab 1" Name="txtData1" />
    </Grid>
</UserControl>

然后可以在TabControl中使用新的用户控件,如下所示:

<Window x:Class="WpfApplication19.MainWindow"
        xmlns:tabData="clr-namespace:WpfApplication19" ...>
    <TabControl>
        <TabItem Header="Tab 1">
            <tabData:Tab1Data x:Name="ucTab1Data" />
        </TabItem>
        <TabItem Header="Tab 2">
            <Grid>
                <TextBlock Text="Data on Tab 2" Name="txtData2"/>
            </Grid>
        </TabItem>
    </TabControl>
</Window>

现在可以从主窗口访问用户控件的内部wigdets,反之亦然.请注意用户控件名称前面的"x:".

public partial class MainWindow : Window
{
    private void AccessWidgetWithinUserControl()
    {
        ucTab1Data.txtData1.Text = "New text on Tab 1";
    }
}

public partial class Tab1Data : UserControl
{
    private MainWindow mainWindow = null; // Reference to the MainWindow

    public Tab1Data()
    {
        InitializeComponent();
    }

    // get a reference to main windows when it is available.
    // The Loaded Event is set in the XAML code above.
    private void OnControlLoaded(object sender, RoutedEventArgs e)
    {
        mainWindow = Window.GetWindow(this) as MainWindow;
    }

    private void AccessMainWindowsWidget()
    {
        mainWindow.txtData2.Text = "New text on Tab 2 in the main window";
    }
}

即使嵌入在自己的用户控件中,显示的访问txtData2的代码也是相同的.