WPF 自定义 TabItem - 控件未显示在 Visual Studio 设计器中

Question

我创建了一个自定义 TabItem，其中包含一个 DockPanel 和一个按钮。

XAML：

<TabItem
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      mc:Ignorable="d" x:Class="MovieDB.UI.UserControlls.SearchTab" d:DesignWidth="500.038" d:DesignHeight="309.055">

    <DockPanel Background="#FFE5E5E5">
        <Button x:Name="button" Content="Button" Height="100" Width="75" HorizontalAlignment="Left" VerticalAlignment="Top"/>
    </DockPanel>
</TabItem>

C#：

namespace MovieDB.UI.UserControlls
{
    /// <summary>
    /// Interaktionslogik für SearchTab.xaml
    /// </summary>
    public partial class SearchTab : TabItem
    {
        private SearchContainer<SearchMovie> results;

        public SearchTab()
        {
            InitializeComponent();
            this.Header = "Suche";
        }

        public SearchTab(SearchContainer<SearchMovie> results):this()
        {
            this.updateSearch(results);
        }

        public void updateSearch(SearchContainer<SearchMovie> results)
        {
            clear();
            if(results.TotalResults == 0)
            {

            }
            else
            {
                this.results = results;
                Debug.WriteLine("Results: " + results.Results.Count());
            }
        }

        private void clear()
        {

        }
    }
}

如果启动我的程序，则会显示该按钮（屏幕截图 2）。但是按钮和我猜面板本身确实没有出现在 Visual Studio 2015 设计器中（屏幕截图 1）。

问题出在哪里？

Answer 1

如果您将 TabItem 放在 TabControl 中，它可以正常工作。我认为这就是问题所在。 设计者需要一个导航控件，如 TabControl、Window Page 等作为 root。

<TabControl x:Class="CustomControls.tab"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            mc:Ignorable="d" 
            d:DesignWidth="500.038" d:DesignHeight="309.055">
<TabItem>
    <DockPanel Background="#FFE5E5E5">
        <Button x:Name="button" Content="Button" Height="100" Width="75" HorizontalAlignment="Left" VerticalAlignment="Top"/>
    </DockPanel>
    </TabItem>
</TabControl>

Answer 2

你所做的应该有效。但事实并非如此，我稍后会尝试说明原因。

但首先，我的解决方法：

• 打开设计器，然后右键单击它，
• 选择：Edit Additional Templates，然后 Edit Generated Content，然后 Create Empty... 为您的新 DataTemplate 命名，说“DataTemplate1”

Designer 将生成一些代码 - 一个带有键 DataTemplate1 的空 DataTemplate，它会将您添加到 TabItem 的 ContentTemplate 属性，带有 DataTemplate1分配给它（由DynamicResource）。

现在将TabItem 的内容移动到DataTemplate1。设计师应正确显示您的布局。

如果您关闭并重新打开您的 SearchTab 控件，您会发现您无法再次看到内容。要让它回来，右键单击设计器，选择 Edit Additional Template，然后 Edit Generated Content，然后 Edit Current。

为什么设计师无法加载您的SearchTab？如果您右键单击设计器并选择编辑模板，然后编辑副本...您将生成TabItem 样式。 TabItem 的标题由 ContentPresenter 显示，而 TabItem 的内容必须显示在 innerBorder Border 内。此边框将Opacity 设置为零，并被MultiTriggers 更改为1，这取决于TabControl。 TabControl 在您的情况下不存在，因此所有绑定都已损坏。这表明，更改“TabItem”的默认 Style 也可以解决您的问题。

Answer 3

虽然我没有我的开发机器可以使用，但我只能提供一个建议。对于您想要在选项卡项控件上的任何内容，为什么不将所有控件放在自定义用户控件或网格中，前提是您知道您会将其添加到动态添加到选项卡页的选项卡控件中。

标签项需要其适当的父标签控件才能在设计器中呈现。但是，如果您将所有内容构建为标准控件，请使其外观和操作符合您的预期。

然后在运行时，添加您的选项卡项，然后将自定义控件添加到您动态添加的选项卡项，看看是否适合您。您显然使所有其他组件/流程都在工作。即使您的示例控件只是一个标签、文本框或类似的东西。