Compare commits

...

2 Commits

Author SHA1 Message Date
Zhang Dian
c30db80b0e fix: only update Placement=Top/Bottom in TabbedPage. 2026-04-13 19:01:17 +08:00
Zhang Dian
9d48dbfbbb fix: add icons to TabbedPage content and improve layout. 2026-04-13 18:37:00 +08:00
3 changed files with 79 additions and 8 deletions

View File

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

View File

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

View File

@@ -2,7 +2,11 @@
xmlns="https://github.com/avaloniaui" xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Design.PreviewWith> <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> </Design.PreviewWith>
<ControlTheme x:Key="{x:Type TabbedPage}" TargetType="TabbedPage"> <ControlTheme x:Key="{x:Type TabbedPage}" TargetType="TabbedPage">
@@ -11,27 +15,91 @@
<TabControl <TabControl
Name="PART_TabControl" Name="PART_TabControl"
Background="{TemplateBinding Background}" 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> </ControlTemplate>
</Setter> </Setter>
</ControlTheme> </ControlTheme>
<ControlTheme x:Key="CardTabbedPage" TargetType="TabbedPage"> <ControlTheme x:Key="CardTabbedPage" TargetType="TabbedPage">
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate TargetType="TabbedPage"> <ControlTemplate TargetType="TabbedPage">
<TabControl <TabControl
Name="PART_TabControl" Name="PART_TabControl"
Background="{TemplateBinding Background}" 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> </ControlTemplate>
</Setter> </Setter>
</ControlTheme> </ControlTheme>
<ControlTheme x:Key="ButtonTabbedPage" TargetType="TabbedPage"> <ControlTheme x:Key="ButtonTabbedPage" TargetType="TabbedPage">
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate TargetType="TabbedPage"> <ControlTemplate TargetType="TabbedPage">
<TabControl <TabControl
Name="PART_TabControl" Name="PART_TabControl"
Background="{TemplateBinding Background}" 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> </ControlTemplate>
</Setter> </Setter>
</ControlTheme> </ControlTheme>