WPF Custom TabItem - Controls not displayed in Visual Studio Designer

Question

I created a custom TabItem with a DockPanel and a Button in it.

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()
        {

        }
    }
}

If launch my program the button is displayed (Screenshot 2). But the button and i guess the panel itselve does noch show up in the Visual Studio 2015 Designer (Screenshot 1).

Where is the Problem?

Answer 1

If you put the TabItem in a TabControl it works fine.I think that's the Problem. The designer needs a navigation control like TabControl,Window Page etc. as 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

What you did should work. But it doesn't, and I'll later try to show why.

But first, my workaround:

• open designer, and right-click on it,
• select: Edit Additional Templates , then Edit Generated Content , then Create Empty... Give your new DataTemplate a name, say ' DataTemplate1 '

Designer will generate some code - an empty DataTemplate with a key DataTemplate1 , and it will add your to TabItem the ContentTemplate attribute, with DataTemplate1 assigned to it (by DynamicResource ).

Now move the content of your TabItem to the DataTemplate1 . The designer should correctly display your layout.

If you close and reopen your SearchTab control, you'll find that you can't see the content again. To have it back right click on the designer, select Edit Additional Template , then Edit Generated Content , then Edit Current .

Why the designer couldn't load your SearchTab ? If you right-click on the designer and select Edit Template , then Edit a Copy... you'll have TabItem style generated. The header of the TabItem is displayed by the ContentPresenter, while the TabItem's content must by displayed inside the innerBorder Border . This border has Opacity set to zero, and it's being changed to 1 by MultiTriggers , which are dependent on the TabControl . The TabControl in your case doesn't exist, so all the bindings are broken. Which suggests, that changing a default Style for 'TabItem', would also solve your problem.

Answer 3

Although I do not have my dev machine to work with, I can only offer a suggestion. For whatever you want on your tab item control, why not put all your controls in a custom user control or grid with the premise that you KNOW you will be adding it to tab control that is dynamically added to your tab page.

The tab item needs its proper parent tab control to render it in the designer. But if you build everything as a standard control make it look and operate as you expect.

Then at run-time, add your tab item, then add the custom control to your dynamically added tab item and see if that works for you. You apparently have all the other components / processes working. Even if your sample control was just a label, textbox or something similar.