TabItem won't layout contents

Will Pittenger 281 Reputation points
2021-03-19T00:51:37.907+00:00

I have a .Control.TabItem that seems to have troubles laying out its contents. The first sample works fine. The second shows nothing. Could you explain what's wrong?
XML <TabControl x:Name="sheetMain"> <TabItem> <ListBox /> </TabItem> </TabControl>

XML <Window x:Class="BattleAnimator.MainWnd" xmlns="" xmlns:x="" xmlns:d="" xmlns:mc="" xmlns:local="clr-namespace:BattleAnimator" mc:Ignorable="d" Title="Naval Battle Animator" Height="450" Width="800" WindowStyle="ToolWindow" ResizeMode="CanResizeWithGrip" WindowStartupLocation="CenterScreen" WindowState="Maximized" FontFamily="Times New Roman"> <Window.Resources> <DataTemplate x:Key="TabCtnts"> <ListBox>t</ListBox> </DataTemplate> <DataTemplate x:Key="TabHdr"> <StackPanel Orientation="Horizontal" DataContext="{Binding DataContext, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabItem}}}"> <Label VerticalAlignment="Center" VerticalContentAlignment="Center" MaxWidth="397"> <Label.Content> <TextBlock TextTrimming="WordEllipsis" Text="{Binding Title}" ToolTip="{Binding Title}" /> </Label.Content> </Label> <Button Click="OnChildNeedsClosed" ToolTip="Close this script" Style="{DynamicResource TabBarCloseBtn}" Background="{x:Null}">✘</Button> </StackPanel> </DataTemplate > <DataTemplate x:Key="Tab"> <TabItem ContentTemplate="{DynamicResource TabCtnts}" HeaderTemplate="{DynamicResource TabHdr}" /> </DataTemplate> </Window.Resources> <DockPanel> <Border DockPanel.Dock="Top" BorderBrush="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}" BorderThickness="0,0,0,1" Margin="0,0,0,3" Padding="0,3,0,0"> <StackPanel x:Name="toolBar" Orientation="Horizontal"> <Button x:Name="btnOpen" Content="Open" Click="OnOpenClicked" Style="{DynamicResource ToolbarBtn}" /> <Separator Style="{DynamicResource ToolBarSep}" /> <Button x:Name="btnFullScreen" Content="Full Screen" Style="{DynamicResource ToolbarBtn}" /> </StackPanel> </Border> <TabControl x:Name="sheetMain" ItemTemplate="{DynamicResource Tab}" /> </DockPanel> </Window>
Windows Presentation Foundation
Windows Presentation Foundation
A part of the .NET Framework that provides a unified programming model for building line-of-business desktop applications on Windows.
2,669 questions
0 comments No comments
{count} votes

2 answers

Sort by: Most helpful
  1. DaisyTian-1203 11,616 Reputation points
    2021-03-19T06:51:18.553+00:00

    You should use <TabControl x:Name="sheetMain" ContentTemplate="{DynamicResource TabCtnts}" ItemTemplate="{DynamicResource TabHdr}" /> in your DockPanel to layout the TabControl. I did some updates for your code and binded some data for it. Below is my code for you:

     <Window.Resources>  
            <DataTemplate x:Key="TabCtnts">  
                <ListBox>  
                    <ListBoxItem Content="{Binding ID}" />  
                    <ListBoxItem Content="{Binding Name}" />  
                </ListBox>  
            </DataTemplate>  
            <DataTemplate x:Key="TabHdr">  
                <StackPanel Orientation="Horizontal" DataContext="{Binding DataContext, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabItem}}}">  
                    <Label VerticalAlignment="Center" VerticalContentAlignment="Center" MaxWidth="397">  
                        <Label.Content>  
                            <TextBlock TextTrimming="WordEllipsis" Text="{Binding Title}" ToolTip="{Binding Title}" />  
                        </Label.Content>  
                    </Label>  
                    <Button ToolTip="Close this script" Background="{x:Null}">✘</Button>  
                </StackPanel>  
            </DataTemplate >  
            <DataTemplate x:Key="Tab">  
                <TabItem ContentTemplate="{DynamicResource TabCtnts}" HeaderTemplate="{DynamicResource TabHdr}" />  
            </DataTemplate>  
        </Window.Resources>  
        <DockPanel>  
            <Border DockPanel.Dock="Top" BorderBrush="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}" BorderThickness="0,0,0,1" Margin="0,0,0,3" Padding="0,3,0,0">  
                <StackPanel x:Name="toolBar" Orientation="Horizontal">  
                    <Button x:Name="btnOpen" Content="Open" />  
                    <Separator />  
                    <Button x:Name="btnFullScreen" Content="Full Screen"/>  
                </StackPanel>  
            </Border>  
            <TabControl x:Name="sheetMain" ContentTemplate="{DynamicResource TabCtnts}" ItemTemplate="{DynamicResource TabHdr}"   />  
        </DockPanel>  
    

    The cs code is:

     public partial class Window3 : Window  
        {  
            public Window3()  
            {  
                InitializeComponent();  
      
                List<Model> models = new List<Model>();  
                models.Add(new Model { ID = 1, Name = "Jack", Title = "Title_1" });  
                models.Add(new Model { ID = 2, Name = "Joe", Title = "Title_2" });  
                sheetMain.ItemsSource = models;  
            }  
        }  
      
        public class Model  
        {  
            public int ID { get; set; }  
            public string Title { get; set; }  
            public string Name { get; set; }  
        }  
    

    The result picture is:
    79486-2.gif


    If the response is helpful, please click "Accept Answer" and upvote it.
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments No comments

  2. Will Pittenger 281 Reputation points
    2021-03-19T07:23:58.393+00:00

    The code below still displays nothing inside the tab. The listbox was added just to ensure that something was visible I could see. It's not the real contents I want.

    XML
    <Window
    x:Class="BattleAnimator.MainWnd"
    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"
    xmlns:local="clr-namespace:BattleAnimator"
    mc:Ignorable="d"
    Title="Naval Battle Animator"
    Height="450"
    Width="800"
    WindowStyle="ToolWindow"
    ResizeMode="CanResizeWithGrip"
    WindowStartupLocation="CenterScreen"
    WindowState="Maximized"
    FontFamily="Times New Roman">
    <Window.Resources>
    <DataTemplate
    x:Key="TabCtnts">
    <ListBox>
    <ListBoxItem>t</ListBoxItem>
    </ListBox>
    </DataTemplate>
    <DataTemplate
    x:Key="TabHdr">
    <StackPanel
    Orientation="Horizontal"
    DataContext="{Binding DataContext, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabItem}}}">
    <Label
    VerticalAlignment="Center"
    VerticalContentAlignment="Center"
    MaxWidth="397">
    <Label.Content>
    <TextBlock
    TextTrimming="WordEllipsis"
    Text="{Binding Title}"
    ToolTip="{Binding Title}" />
    </Label.Content>
    </Label>
    <Button
    Click="OnChildNeedsClosed"
    ToolTip="Close this script"
    Style="{DynamicResource TabBarCloseBtn}"
    Background="{x:Null}">✘</Button>
    </StackPanel>
    </DataTemplate >
    <DataTemplate
    x:Key="Tab">
    <TabItem
    ContentTemplate="{DynamicResource TabCtnts}"
    HeaderTemplate="{DynamicResource TabHdr}" />
    </DataTemplate>
    </Window.Resources>
    <DockPanel>
    <Border
    DockPanel.Dock="Top"
    BorderBrush="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"
    BorderThickness="0,0,0,1"
    Margin="0,0,0,3"
    Padding="0,3,0,0">
    <StackPanel
    x:Name="toolBar"
    Orientation="Horizontal">
    <Button
    x:Name="btnOpen"
    Content="Open"
    Click="OnOpenClicked"
    Style="{DynamicResource ToolbarBtn}" />
    <Separator
    Style="{DynamicResource ToolBarSep}" />
    <Button
    x:Name="btnFullScreen"
    Content="Full Screen"
    Style="{DynamicResource ToolbarBtn}" />
    </StackPanel>
    </Border>
    <TabControl
    x:Name="sheetMain"
    ItemTemplate="{DynamicResource TabHdr}"
    ContentTemplate="{DynamicResource TabCtnts}" />
    </DockPanel>
    </Window>
    
    0 comments No comments