Add icons to TabbedPage content and improve layout. (#801)

* fix: add icons to TabbedPage content and improve layout.

* fix: only update Placement=Top/Bottom in TabbedPage.

demo/Semi.Avalonia.Demo/Pages/TabbedPageDemo.axaml

@@ -50,7 +50,7 @@
             <TabbedPage Name="DemoTabs"
                         TabPlacement="Top"
                         SelectionChanged="OnSelectionChanged">
-                <ContentPage Header="Home">
+                <ContentPage Icon="{DynamicResource SemiIconHome}" Header="Home">
                     <StackPanel Margin="16" Spacing="8">
                         <TextBlock Text="Home Tab" FontSize="24" FontWeight="Bold" />
                         <TextBlock Text="Welcome to the Home tab. This is a TabbedPage sample."
@@ -59,14 +59,14 @@
                                    TextWrapping="Wrap" Opacity="0.7" />
                     </StackPanel>
                 </ContentPage>
-                <ContentPage Header="Search">
+                <ContentPage Icon="{DynamicResource SemiIconSearch}" Header="Search">
                     <StackPanel Margin="16" Spacing="8">
                         <TextBlock Text="Search Tab" FontSize="24" FontWeight="Bold" />
                         <TextBox PlaceholderText="Type to search..." />
                         <TextBlock Text="Search results will appear here." Opacity="0.7" />
                     </StackPanel>
                 </ContentPage>
-                <ContentPage Header="Settings">
+                <ContentPage Icon="{DynamicResource SemiIconSetting}" Header="Settings">
                     <StackPanel Margin="16" Spacing="8">
                         <TextBlock Text="Settings Tab" FontSize="24" FontWeight="Bold" />
                         <CheckBox Content="Enable notifications" />

src/Semi.Avalonia/Controls/TabItem.axaml

@@ -31,7 +31,6 @@
                     <DockPanel HorizontalSpacing="{DynamicResource TabItemIconHeaderSpacing}">
                         <ContentPresenter
                             Name="PART_IconPresenter"
-                            DockPanel.Dock="Left"
                             Content="{TemplateBinding Icon}"
                             ContentTemplate="{TemplateBinding IconTemplate}"
                             IsVisible="{Binding $self.Content, Converter={x:Static ObjectConverters.IsNotNull}}">
@@ -61,6 +60,10 @@
             <Setter Property="RecognizesAccessKey" Value="True" />
         </Style>
 
+        <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
+            <Setter Property="DockPanel.Dock" Value="Left" />
+        </Style>
+
         <Style Selector="^:selected">
             <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
                 <Setter Property="FontWeight" Value="{DynamicResource TabItemSelectedFontWeight}" />

src/Semi.Avalonia/Controls/TabbedPage.axaml

@@ -2,7 +2,11 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <Design.PreviewWith>
-        <TabbedPage Width="400" Height="300" />
+        <TabbedPage Width="400" Height="800" TabPlacement="Bottom">
+            <ContentPage Icon="{DynamicResource SemiIconHome}" Header="Home" />
+            <ContentPage Icon="{DynamicResource SemiIconSearch}" Header="Search" />
+            <ContentPage Icon="{DynamicResource SemiIconSetting}" Header="Settings" />
+        </TabbedPage>
     </Design.PreviewWith>
 
     <ControlTheme x:Key="{x:Type TabbedPage}" TargetType="TabbedPage">
@@ -11,27 +15,91 @@
                 <TabControl
                     Name="PART_TabControl"
                     Background="{TemplateBinding Background}"
-                    Theme="{StaticResource LineTabControl}" />
+                    Theme="{StaticResource LineTabControl}">
+                    <TabControl.ItemContainerTheme>
+                        <ControlTheme
+                            BasedOn="{StaticResource LineTabItem}"
+                            TargetType="TabItem">
+                            <Style Selector="^[TabStripPlacement=Top], ^[TabStripPlacement=Bottom]">
+                                <Setter Property="TabItem.Margin" Value="0" />
+                                <Setter Property="TabItem.HorizontalContentAlignment" Value="Center" />
+                                <Setter Property="TabItem.VerticalContentAlignment" Value="Center" />
+                                <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
+                                    <Setter Property="DockPanel.Dock" Value="Top" />
+                                </Style>
+                            </Style>
+                        </ControlTheme>
+                    </TabControl.ItemContainerTheme>
+                    <TabControl.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <UniformGrid Columns="{Binding $parent[TabControl].ItemCount}" />
+                        </ItemsPanelTemplate>
+                    </TabControl.ItemsPanel>
+                </TabControl>
             </ControlTemplate>
         </Setter>
     </ControlTheme>
+
     <ControlTheme x:Key="CardTabbedPage" TargetType="TabbedPage">
         <Setter Property="Template">
             <ControlTemplate TargetType="TabbedPage">
                 <TabControl
                     Name="PART_TabControl"
                     Background="{TemplateBinding Background}"
-                    Theme="{StaticResource CardTabControl}" />
+                    Theme="{StaticResource CardTabControl}">
+                    <TabControl.ItemContainerTheme>
+                        <ControlTheme
+                            BasedOn="{StaticResource CardTabItem}"
+                            TargetType="TabItem">
+                            <Style Selector="^[TabStripPlacement=Top], ^[TabStripPlacement=Bottom]">
+                                <Setter Property="TabItem.Padding" Value="8" />
+                                <Setter Property="TabItem.Margin" Value="0" />
+                                <Setter Property="TabItem.HorizontalContentAlignment" Value="Center" />
+                                <Setter Property="TabItem.VerticalContentAlignment" Value="Center" />
+                                <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
+                                    <Setter Property="DockPanel.Dock" Value="Top" />
+                                </Style>
+                            </Style>
+                        </ControlTheme>
+                    </TabControl.ItemContainerTheme>
+                    <TabControl.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <UniformGrid Columns="{Binding $parent[TabControl].ItemCount}" />
+                        </ItemsPanelTemplate>
+                    </TabControl.ItemsPanel>
+                </TabControl>
             </ControlTemplate>
         </Setter>
     </ControlTheme>
+
     <ControlTheme x:Key="ButtonTabbedPage" TargetType="TabbedPage">
         <Setter Property="Template">
             <ControlTemplate TargetType="TabbedPage">
                 <TabControl
                     Name="PART_TabControl"
                     Background="{TemplateBinding Background}"
-                    Theme="{StaticResource ButtonTabControl}" />
+                    Theme="{StaticResource ButtonTabControl}">
+                    <TabControl.ItemContainerTheme>
+                        <ControlTheme
+                            BasedOn="{StaticResource ButtonTabItem}"
+                            TargetType="TabItem">
+                            <Style Selector="^[TabStripPlacement=Top], ^[TabStripPlacement=Bottom]">
+                                <Setter Property="TabItem.Padding" Value="12" />
+                                <Setter Property="TabItem.Margin" Value="0" />
+                                <Setter Property="TabItem.HorizontalContentAlignment" Value="Center" />
+                                <Setter Property="TabItem.VerticalContentAlignment" Value="Center" />
+                                <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
+                                    <Setter Property="DockPanel.Dock" Value="Top" />
+                                </Style>
+                            </Style>
+                        </ControlTheme>
+                    </TabControl.ItemContainerTheme>
+                    <TabControl.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <UniformGrid Columns="{Binding $parent[TabControl].ItemCount}" />
+                        </ItemsPanelTemplate>
+                    </TabControl.ItemsPanel>
+                </TabControl>
             </ControlTemplate>
         </Setter>
     </ControlTheme>