zhusenlin/Semi.Avalonia
1
0
Fork 0
mirror of https://gitcode.com/gh_mirrors/se/Semi.Avalonia synced 2026-04-14 05:06:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: add icons to TabbedPage content and improve layout.

Browse Source
This commit is contained in:
Zhang Dian
2026-04-13 18:37:00 +08:00
parent 49ee1c12cc
commit 9d48dbfbbb
3 changed files with 80 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
demo/Semi.Avalonia.Demo/Pages/TabbedPageDemo.axaml
View File

@@ -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" />

5
src/Semi.Avalonia/Controls/TabItem.axaml
View File

@@ -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}" />

77
src/Semi.Avalonia/Controls/TabbedPage.axaml
View File

@@ -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,92 @@
<TabControl
Name="PART_TabControl"
Background="{TemplateBinding Background}"
Theme="{StaticResource LineTabControl}" />
Theme="{StaticResource LineTabControl}">
<TabControl.ItemContainerTheme>
<ControlTheme
BasedOn="{StaticResource LineTabItem}"
TargetType="TabItem">
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
<Setter Property="DockPanel.Dock" Value="Top" />
</Style>
<Style Selector="^[TabStripPlacement=Top], ^[TabStripPlacement=Bottom]">
<Setter Property="TabItem.Margin" Value="0" />
</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">
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
<Setter Property="DockPanel.Dock" Value="Top" />
</Style>
<Style Selector="^[TabStripPlacement=Top], ^[TabStripPlacement=Bottom]">
<Setter Property="TabItem.Padding" Value="8" />
<Setter Property="TabItem.Margin" Value="0" />
</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">
<Setter Property="Padding" Value="8 0" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
<Setter Property="DockPanel.Dock" Value="Top" />
</Style>
<Style Selector="^[TabStripPlacement=Top], ^[TabStripPlacement=Bottom]">
<Setter Property="TabItem.Padding" Value="12" />
<Setter Property="TabItem.Margin" Value="0" />
</Style>
</ControlTheme>
</TabControl.ItemContainerTheme>
<TabControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="{Binding $parent[TabControl].ItemCount}" />
</ItemsPanelTemplate>
</TabControl.ItemsPanel>
</TabControl>
</ControlTemplate>
</Setter>
</ControlTheme>