question

WillPittenger avatar image
0 Votes"
WillPittenger asked WillPittenger edited

TabItem won't layout contents

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-wpf
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

DaisyTian-1203 avatar image
0 Votes"
DaisyTian-1203 answered

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.


2.gif (22.5 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

WillPittenger avatar image
0 Votes"
WillPittenger answered WillPittenger edited

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>
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.