Improved default control template for TabControl

samples/ControlCatalog/Pages/TabControlPage.xaml

@@ -26,43 +26,19 @@
                 <TabControl
                     Margin="0 16"
                     TabStripPlacement="{Binding TabPlacement}">
-                    <TabItem>
-                        <TabItem.Header>
-                            <TextBlock
-                               Text="Arch"
-                               VerticalAlignment="Center"
-                               HorizontalAlignment="Center"
-                               Margin="8">
-                            </TextBlock>
-                        </TabItem.Header>
+                    <TabItem Header="Arch">
                         <StackPanel Orientation="Vertical" Spacing="8">
                             <TextBlock>This is the first page in the TabControl.</TextBlock>
                             <Image Source="resm:ControlCatalog.Assets.delicate-arch-896885_640.jpg" Width="300"/>
                         </StackPanel>
                     </TabItem>
-                    <TabItem>
-                        <TabItem.Header>
-                            <TextBlock
-                               Text="Leaf"
-                               VerticalAlignment="Center"
-                               HorizontalAlignment="Center"
-                               Margin="8">
-                            </TextBlock>
-                        </TabItem.Header>
+                    <TabItem Header="Leaf">                       
                         <StackPanel Orientation="Vertical" Spacing="8">
                             <TextBlock>This is the second page in the TabControl.</TextBlock>
                             <Image Source="resm:ControlCatalog.Assets.maple-leaf-888807_640.jpg" Width="300"/>
                         </StackPanel>
                     </TabItem>
-                    <TabItem IsEnabled="False">
-                        <TabItem.Header>
-                            <TextBlock
-                               Text="Disabled"
-                               VerticalAlignment="Center"
-                               HorizontalAlignment="Center"
-                               Margin="8">
-                            </TextBlock>
-                        </TabItem.Header>
+                    <TabItem Header="Disabled" IsEnabled="False">
                         <TextBlock>You should not see this.</TextBlock>
                     </TabItem>
                 </TabControl>
@@ -82,10 +58,7 @@
                     <TabControl.ItemTemplate>
                         <DataTemplate>
                             <TextBlock
-                                Text="{Binding Header}"
-                                VerticalAlignment="Center"
-                                HorizontalAlignment="Center"
-                                Margin="8">
+                                Text="{Binding Header}">
                             </TextBlock>
                         </DataTemplate>
                     </TabControl.ItemTemplate>

samples/ControlCatalog/SideBar.xaml

@@ -17,8 +17,7 @@
                             VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}"
                             Background="{TemplateBinding Background}">
                             <ItemsPresenter
-                                Name="PART_ItemsPresenter"
-                                MinWidth="190"                            
+                                Name="PART_ItemsPresenter"                          
                                 Items="{TemplateBinding Items}"
                                 ItemsPanel="{TemplateBinding ItemsPanel}"
                                 ItemTemplate="{TemplateBinding ItemTemplate}"

src/Avalonia.Controls/Generators/TabItemContainerGenerator.cs

@@ -21,6 +21,8 @@ namespace Avalonia.Controls.Generators
 
             tabItem.ParentTabControl = Owner;
 
+            tabItem[~TabControl.TabStripPlacementProperty] = Owner[~TabControl.TabStripPlacementProperty];
+
             if (tabItem.HeaderTemplate == null)
             {
                 tabItem[~HeaderedContentControl.HeaderTemplateProperty] = Owner[~ItemsControl.ItemTemplateProperty];

src/Avalonia.Controls/TabItem.cs

@@ -23,8 +23,6 @@ namespace Avalonia.Controls
         public static readonly StyledProperty<bool> IsSelectedProperty =
             ListBoxItem.IsSelectedProperty.AddOwner<TabItem>();
 
-        private TabControl _parentTabControl;
-
         /// <summary>
         /// Initializes static members of the <see cref="TabItem"/> class.
         /// </summary>
@@ -56,11 +54,7 @@ namespace Avalonia.Controls
             set { SetValue(IsSelectedProperty, value); }
         }
 
-        internal TabControl ParentTabControl
-        {
-            get => _parentTabControl;
-            set => _parentTabControl = value;
-        }
+        internal TabControl ParentTabControl { get; set; }
 
         private void UpdateHeader(AvaloniaPropertyChangedEventArgs obj)
         {

src/Avalonia.Themes.Default/TabControl.xaml

@@ -1,10 +1,5 @@
 <Styles xmlns="https://github.com/avaloniaui"  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <Style Selector="TabControl">
-        <Setter Property="Background" Value="{DynamicResource ThemeBackgroundBrush}"/>
-        <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}"/>
-        <Setter Property="Padding" Value="4"/>
-        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
-        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
+    <Style Selector="TabControl">        
         <Setter Property="Template">
             <ControlTemplate>
                 <Border
@@ -35,22 +30,34 @@
             </ControlTemplate>
         </Setter>
     </Style>
+    <Style Selector="TabControl[TabStripPlacement=Top]">
+        <Setter Property="Padding" Value="0 4 0 0"/>
+    </Style>
     <Style Selector="TabControl[TabStripPlacement=Top] /template/ ItemsPresenter#PART_ItemsPresenter">
         <Setter Property="DockPanel.Dock" Value="Top"/>
     </Style>
     <Style Selector="TabControl[TabStripPlacement=Bottom] /template/ ItemsPresenter#PART_ItemsPresenter">
         <Setter Property="DockPanel.Dock" Value="Bottom"/>
     </Style>
+    <Style Selector="TabControl[TabStripPlacement=Bottom]">
+        <Setter Property="Padding" Value="0 0 0 4"/>
+    </Style>
     <Style Selector="TabControl[TabStripPlacement=Left] /template/ ItemsPresenter#PART_ItemsPresenter">
         <Setter Property="DockPanel.Dock" Value="Left"/>
     </Style>
     <Style Selector="TabControl[TabStripPlacement=Left] /template/ ItemsPresenter#PART_ItemsPresenter > WrapPanel">
         <Setter Property="Orientation" Value="Vertical"/>
     </Style>
+    <Style Selector="TabControl[TabStripPlacement=Left]">
+        <Setter Property="Padding" Value="4 0 0 0"/>
+    </Style>
     <Style Selector="TabControl[TabStripPlacement=Right] /template/ ItemsPresenter#PART_ItemsPresenter">
         <Setter Property="DockPanel.Dock" Value="Right"/>
     </Style>
     <Style Selector="TabControl[TabStripPlacement=Right] /template/ ItemsPresenter#PART_ItemsPresenter > WrapPanel">
         <Setter Property="Orientation" Value="Vertical"/>
     </Style>
+    <Style Selector="TabControl[TabStripPlacement=Right]">
+        <Setter Property="Padding" Value="0 0 0 4"/>
+    </Style>
 </Styles>

src/Avalonia.Themes.Default/TabItem.xaml

@@ -3,9 +3,11 @@
         <Setter Property="Background" Value="Transparent"/>
         <Setter Property="FontSize" Value="{DynamicResource FontSizeLarge}"/>
         <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundLightBrush}"/>
+        <Setter Property="HorizontalContentAlignment" Value="Left"/>
+        <Setter Property="Padding" Value="8"/>
         <Setter Property="Template">
             <ControlTemplate>
-                <ContentPresenter 
+                <ContentPresenter
                     Name="PART_ContentPresenter"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
@@ -14,6 +16,7 @@
                     Content="{TemplateBinding Header}"
                     HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                     VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                    Margin="{TemplateBinding Margin}"
                     Padding="{TemplateBinding Padding}"/>
             </ControlTemplate>
         </Setter>
@@ -36,4 +39,7 @@
     <Style Selector="TabItem:selected:focus:pointerover /template/ ContentPresenter#PART_ContentPresenter">
         <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush2}"/>
     </Style>
+    <Style Selector="TabItem[TabStripPlacement=Right]">
+        <Setter Property="HorizontalContentAlignment" Value="Right"/>
+    </Style>
 </Styles>