tsai
/
Avalonia
mirror of https://github.com/AvaloniaUI/Avalonia.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

fluent2 - add list box classic theme

pull/21771/head
Emmanuel Hansen 3 weeks ago
parent
2bf08f34ef
commit
99949c85a4
3 changed files with 164 additions and 27 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      src/Avalonia.Themes.Fluent2/Accents/FluentControlResources.xaml
  2. 46
      src/Avalonia.Themes.Fluent2/Controls/ListBox.xaml
  3. 127
      src/Avalonia.Themes.Fluent2/Controls/ListBoxItem.xaml

18
src/Avalonia.Themes.Fluent2/Accents/FluentControlResources.xaml
View File

@ -175,6 +175,15 @@
<!-- Resources for ListBox.xaml --> <!-- Resources for ListBox.xaml -->
<Thickness x:Key="ListBoxBorderThemeThickness">0</Thickness> <Thickness x:Key="ListBoxBorderThemeThickness">0</Thickness>
<StaticResource x:Key="ListBoxBorder" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="ListBoxBackground" ResourceKey="SystemControlBackgroundChromeMediumLowBrush" />
<StaticResource x:Key="ListBoxItemForegroundDisabled" ResourceKey="TextFillColorDisabledBrush" />
<StaticResource x:Key="ListBoxItemBackgroundPointerOver" ResourceKey="SubtleFillColorSecondaryBrush" />
<StaticResource x:Key="ListBoxItemForeground" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="ListBoxItemBackgroundPressed" ResourceKey="SubtleFillColorTertiaryBrush" />
<StaticResource x:Key="ListBoxItemBackgroundSelected" ResourceKey="SystemControlHighlightListAccentLowBrush" />
<StaticResource x:Key="ListBoxItemBackgroundSelectedPointerOver" ResourceKey="SystemControlHighlightListAccentMediumBrush" />
<StaticResource x:Key="ListBoxItemBackgroundSelectedPressed" ResourceKey="SystemControlHighlightListAccentHighBrush" />
<!-- Resources for ProgressBar.xaml --> <!-- Resources for ProgressBar.xaml -->
<x:Double x:Key="ProgressBarThemeMinHeight">3</x:Double> <x:Double x:Key="ProgressBarThemeMinHeight">3</x:Double>
@ -875,6 +884,15 @@
<!-- Resources for ListBox.xaml --> <!-- Resources for ListBox.xaml -->
<Thickness x:Key="ListBoxBorderThemeThickness">0</Thickness> <Thickness x:Key="ListBoxBorderThemeThickness">0</Thickness>
<StaticResource x:Key="ListBoxBorder" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="ListBoxBackground" ResourceKey="SystemControlBackgroundChromeMediumLowBrush" />
<StaticResource x:Key="ListBoxItemForegroundDisabled" ResourceKey="TextFillColorDisabledBrush" />
<StaticResource x:Key="ListBoxItemBackgroundPointerOver" ResourceKey="SubtleFillColorSecondaryBrush" />
<StaticResource x:Key="ListBoxItemForeground" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="ListBoxItemBackgroundPressed" ResourceKey="SubtleFillColorTertiaryBrush" />
<StaticResource x:Key="ListBoxItemBackgroundSelected" ResourceKey="SystemControlHighlightListAccentLowBrush" />
<StaticResource x:Key="ListBoxItemBackgroundSelectedPointerOver" ResourceKey="SystemControlHighlightListAccentMediumBrush" />
<StaticResource x:Key="ListBoxItemBackgroundSelectedPressed" ResourceKey="SystemControlHighlightListAccentHighBrush" />
<!-- Resources for ProgressBar.xaml --> <!-- Resources for ProgressBar.xaml -->
<x:Double x:Key="ProgressBarThemeMinHeight">3</x:Double> <x:Double x:Key="ProgressBarThemeMinHeight">3</x:Double>

46
src/Avalonia.Themes.Fluent2/Controls/ListBox.xaml
View File

@ -12,9 +12,10 @@
</Border> </Border>
</Design.PreviewWith> </Design.PreviewWith>
<!-- WinUI reference: ListView (Fluent 2 / WinUI 3): the items host itself is transparent and <ControlTheme x:Key="{x:Type ListBox}" TargetType="ListBox" BasedOn="{StaticResource FluentListViewTheme}">
borderless; all chrome lives on the items (see ListBoxItem.xaml). --> </ControlTheme>
<ControlTheme x:Key="{x:Type ListBox}" TargetType="ListBox">
<ControlTheme x:Key="FluentListViewTheme" TargetType="ListBox">
<Setter Property="Foreground" Value="{DynamicResource TextFillColorPrimaryBrush}" /> <Setter Property="Foreground" Value="{DynamicResource TextFillColorPrimaryBrush}" />
<Setter Property="Background" Value="Transparent" /> <Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="{DynamicResource ControlStrokeColorDefaultBrush}" /> <Setter Property="BorderBrush" Value="{DynamicResource ControlStrokeColorDefaultBrush}" />
@ -38,7 +39,44 @@
VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}" VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}"
IsScrollChainingEnabled="{TemplateBinding (ScrollViewer.IsScrollChainingEnabled)}" IsScrollChainingEnabled="{TemplateBinding (ScrollViewer.IsScrollChainingEnabled)}"
IsScrollInertiaEnabled="{TemplateBinding (ScrollViewer.IsScrollInertiaEnabled)}" IsScrollInertiaEnabled="{TemplateBinding (ScrollViewer.IsScrollInertiaEnabled)}"
IsDeferredScrollingEnabled="{TemplateBinding (ScrollViewer.IsDeferredScrollingEnabled)}" IsDeferredScrollingEnabled="{TemplateBinding (ScrollViewer.IsDeferredScrollingEnabled)}"
AllowAutoHide="{TemplateBinding (ScrollViewer.AllowAutoHide)}"
BringIntoViewOnFocusChange="{TemplateBinding (ScrollViewer.BringIntoViewOnFocusChange)}">
<ItemsPresenter Name="PART_ItemsPresenter"
ItemsPanel="{TemplateBinding ItemsPanel}"
Margin="{TemplateBinding Padding}"/>
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter>
</ControlTheme>
<ControlTheme x:Key="FluentListBoxTheme" TargetType="ListBox">
<Setter Property="Foreground" Value="{DynamicResource TextFillColorPrimaryBrush}" />
<Setter Property="Background" Value="{DynamicResource ListBoxBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ListBoxBorder}" />
<Setter Property="BorderThickness" Value="{DynamicResource ListBoxBorderThemeThickness}" />
<Setter Property="ItemContainerTheme" Value="{StaticResource DefaultListBoxItemStyle}" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.IsScrollChainingEnabled" Value="True" />
<Setter Property="ScrollViewer.IsScrollInertiaEnabled" Value="True" />
<Setter Property="Template">
<ControlTemplate>
<Border Name="LayoutRoot"
ClipToBounds="{TemplateBinding ClipToBounds}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<ScrollViewer Name="PART_ScrollViewer"
VerticalSnapPointsType="{TemplateBinding (ScrollViewer.VerticalSnapPointsType)}"
HorizontalSnapPointsType="{TemplateBinding (ScrollViewer.HorizontalSnapPointsType)}"
HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}"
IsScrollChainingEnabled="{TemplateBinding (ScrollViewer.IsScrollChainingEnabled)}"
IsScrollInertiaEnabled="{TemplateBinding (ScrollViewer.IsScrollInertiaEnabled)}"
IsDeferredScrollingEnabled="{TemplateBinding (ScrollViewer.IsDeferredScrollingEnabled)}"
AllowAutoHide="{TemplateBinding (ScrollViewer.AllowAutoHide)}" AllowAutoHide="{TemplateBinding (ScrollViewer.AllowAutoHide)}"
BringIntoViewOnFocusChange="{TemplateBinding (ScrollViewer.BringIntoViewOnFocusChange)}"> BringIntoViewOnFocusChange="{TemplateBinding (ScrollViewer.BringIntoViewOnFocusChange)}">
<ItemsPresenter Name="PART_ItemsPresenter" <ItemsPresenter Name="PART_ItemsPresenter"

127
src/Avalonia.Themes.Fluent2/Controls/ListBoxItem.xaml
View File

@ -16,18 +16,23 @@
</Design.PreviewWith> </Design.PreviewWith>
<!-- WinUI reference: ListViewItem_themeresources.xaml (ListViewItemExpanded, the live default). <!-- WinUI reference: ListViewItem_themeresources.xaml (ListViewItemExpanded, the live default).
Rounded WinUI 3 list items: backplate inset from the list edges, CornerRadius 4, MinHeight 40, Rounded WinUI 3 list items: backplate inset from the list edges, CornerRadius 4, MinHeight 40,
transparent rest state, subtle-fill hover/press/selection and an accent selection pill transparent rest state, subtle-fill hover/press/selection and an accent selection pill
(3x16, r1.5, vertically centered on the left edge) that only shows when selected. (3x16, r1.5, vertically centered on the left edge) that only shows when selected.
The 4,2 backplate inset and the pill metrics are baked into WinUI's ListViewItemPresenter The 4,2 backplate inset and the pill metrics are baked into WinUI's ListViewItemPresenter
rather than exposed as theme resources, so they are approximated here from the WinUI visuals. --> rather than exposed as theme resources, so they are approximated here from the WinUI visuals. -->
<Thickness x:Key="ListBoxItemPadding">12,0,12,0</Thickness> <Thickness x:Key="ListBoxItemFluentPadding">12,0,12,0</Thickness>
<Thickness x:Key="ListBoxItemPadding">12,9,12,12</Thickness>
<x:Double x:Key="ListBoxItemMinHeight">40</x:Double> <x:Double x:Key="ListBoxItemMinHeight">40</x:Double>
<ControlTheme x:Key="{x:Type ListBoxItem}" TargetType="ListBoxItem"> <x:Double x:Key="ListBoxItemMinWidth">88</x:Double>
<ControlTheme x:Key="{x:Type ListBoxItem}" TargetType="ListBoxItem" BasedOn="{StaticResource FluentListBoxItemTheme}"/>
<ControlTheme x:Key="FluentListBoxItemTheme" TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent" /> <Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="{DynamicResource TextFillColorPrimaryBrush}" /> <Setter Property="Foreground" Value="{DynamicResource ListBoxItemForeground}" />
<Setter Property="Padding" Value="{DynamicResource ListBoxItemPadding}" /> <Setter Property="Padding" Value="{DynamicResource ListBoxItemFluentPadding}" />
<Setter Property="MinHeight" Value="{DynamicResource ListBoxItemMinHeight}" /> <Setter Property="MinHeight" Value="{DynamicResource ListBoxItemMinHeight}" />
<Setter Property="MinWidth" Value="{DynamicResource ListBoxItemMinWidth}" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Center" /> <Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" /> <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
<Setter Property="Template"> <Setter Property="Template">
@ -35,13 +40,12 @@
<!-- WinUI's ListViewItemPresenter insets the rounded backplate from the item bounds. --> <!-- WinUI's ListViewItemPresenter insets the rounded backplate from the item bounds. -->
<Panel Margin="4,2"> <Panel Margin="4,2">
<ContentPresenter Name="PART_ContentPresenter" <ContentPresenter Name="PART_ContentPresenter"
Background="{TemplateBinding Background}" Background="{TemplateBinding Background}"
BackgroundSizing="InnerBorderEdge" BorderBrush="{TemplateBinding BorderBrush}"
BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}" CornerRadius="{TemplateBinding CornerRadius}"
ContentTemplate="{TemplateBinding ContentTemplate}" ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}" Content="{TemplateBinding Content}"
Padding="{TemplateBinding Padding}" Padding="{TemplateBinding Padding}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" /> HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" />
@ -56,7 +60,7 @@
RadiusX="1.5" RadiusX="1.5"
RadiusY="1.5" RadiusY="1.5"
HorizontalAlignment="Left" HorizontalAlignment="Left"
VerticalAlignment="Center" VerticalAlignment="Center"
IsHitTestVisible="False" IsHitTestVisible="False"
UseLayoutRounding="False" UseLayoutRounding="False"
RenderTransform="scaleY(0)" RenderTransform="scaleY(0)"
@ -72,19 +76,19 @@
</Setter> </Setter>
<Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter"> <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource TextFillColorDisabledBrush}" /> <Setter Property="Foreground" Value="{DynamicResource ListBoxItemForegroundDisabled}" />
</Style> </Style>
<!-- PointerOver State --> <!-- PointerOver State -->
<Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter"> <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{DynamicResource SubtleFillColorSecondaryBrush}" /> <Setter Property="Background" Value="{DynamicResource SubtleFillColorSecondaryBrush}" />
<Setter Property="Foreground" Value="{DynamicResource TextFillColorPrimaryBrush}" /> <Setter Property="Foreground" Value="{DynamicResource ListBoxItemForeground}" />
</Style> </Style>
<!-- Pressed State --> <!-- Pressed State -->
<Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter"> <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{DynamicResource SubtleFillColorTertiaryBrush}" /> <Setter Property="Background" Value="{DynamicResource SubtleFillColorTertiaryBrush}" />
<Setter Property="Foreground" Value="{DynamicResource TextFillColorPrimaryBrush}" /> <Setter Property="Foreground" Value="{DynamicResource ListBoxItemForeground}" />
</Style> </Style>
<!-- Selected State --> <!-- Selected State -->
@ -92,7 +96,7 @@
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter"> <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{DynamicResource SubtleFillColorSecondaryBrush}" /> <Setter Property="Background" Value="{DynamicResource SubtleFillColorSecondaryBrush}" />
<Setter Property="Foreground" Value="{DynamicResource TextFillColorPrimaryBrush}" /> <Setter Property="Foreground" Value="{DynamicResource ListBoxItemForeground}" />
</Style> </Style>
<Style Selector="^ /template/ Rectangle#SelectionIndicator"> <Style Selector="^ /template/ Rectangle#SelectionIndicator">
@ -107,19 +111,96 @@
<!-- Selected Unfocused State --> <!-- Selected Unfocused State -->
<Style Selector="^:not(:focus) /template/ ContentPresenter#PART_ContentPresenter"> <Style Selector="^:not(:focus) /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{DynamicResource SubtleFillColorSecondaryBrush}" /> <Setter Property="Background" Value="{DynamicResource SubtleFillColorSecondaryBrush}" />
<Setter Property="Foreground" Value="{DynamicResource TextFillColorPrimaryBrush}" /> <Setter Property="Foreground" Value="{DynamicResource ListBoxItemForeground}" />
</Style> </Style>
<!-- Selected PointerOver State --> <!-- Selected PointerOver State -->
<Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter"> <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{DynamicResource SubtleFillColorTertiaryBrush}" /> <Setter Property="Background" Value="{DynamicResource SubtleFillColorTertiaryBrush}" />
<Setter Property="Foreground" Value="{DynamicResource TextFillColorPrimaryBrush}" /> <Setter Property="Foreground" Value="{DynamicResource ListBoxItemForeground}" />
</Style> </Style>
<!-- Selected Pressed State --> <!-- Selected Pressed State -->
<Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter"> <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{DynamicResource SubtleFillColorSecondaryBrush}" /> <Setter Property="Background" Value="{DynamicResource SubtleFillColorSecondaryBrush}" />
<Setter Property="Foreground" Value="{DynamicResource TextFillColorPrimaryBrush}" /> <Setter Property="Foreground" Value="{DynamicResource ListBoxItemForeground}" />
</Style>
</Style>
</ControlTheme>
<ControlTheme x:Key="DefaultListBoxItemStyle" TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Padding" Value="{DynamicResource ListBoxItemPadding}" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="Template">
<ControlTemplate>
<Border x:Name="LayoutRoot" Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Rectangle x:Name="PressedBackground" Fill="Transparent" TemplatedControl.IsTemplateFocusTarget="True" />
<ContentPresenter x:Name="PART_ContentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
TextWrapping="NoWrap"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}" />
</Grid>
</Border>
</ControlTemplate>
</Setter>
<Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource ListBoxItemForegroundDisabled}" />
</Style>
<!-- PointerOver State -->
<Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource ListBoxItemForeground}" />
</Style>
<Style Selector="^:pointerover /template/ Rectangle#PressedBackground">
<Setter Property="Fill" Value="{DynamicResource ListBoxItemBackgroundPointerOver}" />
</Style>
<!-- Pressed State -->
<Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource ListBoxItemForeground}" />
</Style>
<Style Selector="^:pointerover /template/ Rectangle#PressedBackground">
<Setter Property="Fill" Value="{DynamicResource ListBoxItemBackgroundPressed}" />
</Style>
<!-- Selected State -->
<Style Selector="^:selected">
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource ListBoxItemForeground}" />
</Style>
<Style Selector="^ /template/ Rectangle#PressedBackground">
<Setter Property="Fill" Value="{DynamicResource ListBoxItemBackgroundSelected}" />
</Style>
<!-- Selected Unfocused State -->
<Style Selector="^:not(:focus) /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource ListBoxItemForeground}" />
</Style>
<Style Selector="^:not(:focus) /template/ Rectangle#PressedBackground">
<Setter Property="Fill" Value="{DynamicResource ListBoxItemBackgroundSelected}" />
</Style>
<!-- Selected PointerOver State -->
<Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource ListBoxItemForeground}" />
</Style>
<Style Selector="^:pointerover /template/ Rectangle#PressedBackground">
<Setter Property="Fill" Value="{DynamicResource ListBoxItemBackgroundSelectedPointerOver}" />
</Style>
<!-- Selected Pressed State -->
<Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource ListBoxItemForeground}" />
</Style>
<Style Selector="^:pressed /template/ Rectangle#PressedBackground">
<Setter Property="Fill" Value="{DynamicResource ListBoxItemBackgroundSelectedPressed}" />
</Style> </Style>
</Style> </Style>
</ControlTheme> </ControlTheme>

Write Preview
Loading…
Cancel
Save