Browse Source

fluet 2- add table view templates

pull/21771/head
Emmanuel Hansen 3 weeks ago
parent
commit
8114aea925
  1. 59
      src/Avalonia.Themes.Fluent2/Accents/FluentControlResources.xaml
  2. 4
      src/Avalonia.Themes.Fluent2/Controls/FluentControls.xaml
  3. 116
      src/Avalonia.Themes.Fluent2/Controls/TableView.xaml
  4. 11
      src/Avalonia.Themes.Fluent2/Controls/TableViewCell.xaml
  5. 55
      src/Avalonia.Themes.Fluent2/Controls/TableViewColumnHeader.xaml
  6. 67
      src/Avalonia.Themes.Fluent2/Controls/TableViewRow.xaml

59
src/Avalonia.Themes.Fluent2/Accents/FluentControlResources.xaml

@ -83,7 +83,7 @@
<StaticResource x:Key="ToggleButtonBorderBrushIndeterminatePressed" ResourceKey="ControlStrokeColorDefaultBrush" />
<StaticResource x:Key="ToggleButtonBorderBrushIndeterminateDisabled" ResourceKey="ControlStrokeColorDefaultBrush" />
<!--Resources for ButtonSpinner-->
<!--Resources for ButtonSpinner-->
<StaticResource x:Key="SpinnerPopupIndicatorForeground" ResourceKey="TextFillColorSecondaryBrush" />
<StaticResource x:Key="SpinnerPopupBackground" ResourceKey="AcrylicBackgroundFillColorDefaultBrush" />
<StaticResource x:Key="SpinnerPopupBorderBrush" ResourceKey="SurfaceStrokeColorFlyoutBrush" />
@ -705,7 +705,33 @@
<!-- BaseResources for RefreshVisualizer.xaml -->
<SolidColorBrush x:Key="RefreshVisualizerForeground" Color="Black" />
<SolidColorBrush x:Key="RefreshVisualizerBackground" Color="Transparent" />
<!-- Resources for TableView.xaml -->
<StaticResource x:Key="TableViewForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
<StaticResource x:Key="TableViewBackground" ResourceKey="SystemControlBackgroundChromeMediumLowBrush" />
<StaticResource x:Key="TableViewBorderBrush" ResourceKey="SystemControlForegroundBaseHighBrush" />
<StaticResource x:Key="TableViewBorderThickness" ResourceKey="ListBoxBorderThemeThickness" />
<StaticResource x:Key="TableViewHeaderBackground" ResourceKey="SystemControlBackgroundChromeMediumBrush" />
<!-- Resources for TableViewColumnHeader.xaml -->
<StaticResource x:Key="TableViewColumnHeaderSeparatorBackground" ResourceKey="SystemBaseLowColor" />
<!-- Resources for TableViewRow.xaml -->
<SolidColorBrush x:Key="TableViewRowBackground">Transparent</SolidColorBrush>
<SolidColorBrush x:Key="TableViewRowBackgroundDisabled">Transparent</SolidColorBrush>
<StaticResource x:Key="TableViewRowForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
<StaticResource x:Key="TableViewRowBackgroundPointerOver" ResourceKey="SystemControlHighlightListLowBrush" />
<StaticResource x:Key="TableViewRowForegroundPointerOver" ResourceKey="SystemControlHighlightAltBaseHighBrush" />
<StaticResource x:Key="TableViewRowBackgroundPressed" ResourceKey="SystemControlHighlightListMediumBrush" />
<StaticResource x:Key="TableViewRowForegroundPressed" ResourceKey="SystemControlHighlightAltBaseHighBrush" />
<StaticResource x:Key="TableViewRowBackgroundSelected" ResourceKey="SystemControlHighlightListAccentLowBrush" />
<StaticResource x:Key="TableViewRowForegroundSelected" ResourceKey="SystemControlHighlightAltBaseHighBrush" />
<StaticResource x:Key="TableViewRowBackgroundSelectedPointerOver" ResourceKey="SystemControlHighlightListAccentMediumBrush" />
<StaticResource x:Key="TableViewRowForegroundSelectedPointerOver" ResourceKey="SystemControlHighlightAltBaseHighBrush" />
<StaticResource x:Key="TableViewRowBackgroundSelectedPressed" ResourceKey="SystemControlHighlightListAccentHighBrush" />
<StaticResource x:Key="TableViewRowForegroundSelectedPressed" ResourceKey="SystemControlHighlightAltBaseHighBrush" />
<!-- BaseResources for WindowDrawnDecorations.xaml -->
<SolidColorBrush x:Key="CaptionButtonForeground" Color="Black" />
<SolidColorBrush x:Key="CaptionButtonBackground" Color="#ffe5e5e5" />
@ -752,9 +778,9 @@
<StaticResource x:Key="RepeatButtonBorderBrush" ResourceKey="ControlElevationBorderBrush" />
<StaticResource x:Key="RepeatButtonBorderBrushPointerOver" ResourceKey="ControlElevationBorderBrush" />
<StaticResource x:Key="RepeatButtonBorderBrushPressed" ResourceKey="ControlStrokeColorDefaultBrush" />
<StaticResource x:Key="RepeatButtonBorderBrushDisabled" ResourceKey="ControlStrokeColorDefaultBrush" />
<StaticResource x:Key="RepeatButtonBorderBrushDisabled" ResourceKey="ControlStrokeColorDefaultBrush" />
<!--Resources for ButtonSpinner-->
<!--Resources for ButtonSpinner-->
<StaticResource x:Key="SpinnerPopupIndicatorForeground" ResourceKey="TextFillColorSecondaryBrush" />
<StaticResource x:Key="SpinnerPopupBackground" ResourceKey="AcrylicBackgroundFillColorDefaultBrush" />
<StaticResource x:Key="SpinnerPopupBorderBrush" ResourceKey="SurfaceStrokeColorFlyoutBrush" />
@ -1419,6 +1445,31 @@
<SolidColorBrush x:Key="RefreshVisualizerForeground" Color="White" />
<SolidColorBrush x:Key="RefreshVisualizerBackground" Color="Transparent" />
<!-- Resources for TableView.xaml -->
<StaticResource x:Key="TableViewForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
<StaticResource x:Key="TableViewBackground" ResourceKey="SystemControlBackgroundChromeMediumLowBrush" />
<StaticResource x:Key="TableViewBorderBrush" ResourceKey="SystemControlForegroundBaseHighBrush" />
<StaticResource x:Key="TableViewBorderThickness" ResourceKey="ListBoxBorderThemeThickness" />
<StaticResource x:Key="TableViewHeaderBackground" ResourceKey="SystemControlBackgroundChromeMediumBrush" />
<!-- Resources for TableViewColumnHeader.xaml -->
<StaticResource x:Key="TableViewColumnHeaderSeparatorBackground" ResourceKey="SystemBaseLowColor" />
<!-- Resources for TableViewRow.xaml -->
<SolidColorBrush x:Key="TableViewRowBackground">Transparent</SolidColorBrush>
<SolidColorBrush x:Key="TableViewRowBackgroundDisabled">Transparent</SolidColorBrush>
<StaticResource x:Key="TableViewRowForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
<StaticResource x:Key="TableViewRowBackgroundPointerOver" ResourceKey="SystemControlHighlightListLowBrush" />
<StaticResource x:Key="TableViewRowForegroundPointerOver" ResourceKey="SystemControlHighlightAltBaseHighBrush" />
<StaticResource x:Key="TableViewRowBackgroundPressed" ResourceKey="SystemControlHighlightListMediumBrush" />
<StaticResource x:Key="TableViewRowForegroundPressed" ResourceKey="SystemControlHighlightAltBaseHighBrush" />
<StaticResource x:Key="TableViewRowBackgroundSelected" ResourceKey="SystemControlHighlightListAccentLowBrush" />
<StaticResource x:Key="TableViewRowForegroundSelected" ResourceKey="SystemControlHighlightAltBaseHighBrush" />
<StaticResource x:Key="TableViewRowBackgroundSelectedPointerOver" ResourceKey="SystemControlHighlightListAccentMediumBrush" />
<StaticResource x:Key="TableViewRowForegroundSelectedPointerOver" ResourceKey="SystemControlHighlightAltBaseHighBrush" />
<StaticResource x:Key="TableViewRowBackgroundSelectedPressed" ResourceKey="SystemControlHighlightListAccentHighBrush" />
<StaticResource x:Key="TableViewRowForegroundSelectedPressed" ResourceKey="SystemControlHighlightAltBaseHighBrush" />
<!-- BaseResources for WindowDrawnDecorations.xaml -->
<SolidColorBrush x:Key="CaptionButtonForeground" Color="White" />
<SolidColorBrush x:Key="CaptionButtonBackground" Color="#ffe5e5e5" />

4
src/Avalonia.Themes.Fluent2/Controls/FluentControls.xaml

@ -52,6 +52,10 @@
<MergeResourceInclude Source="avares://Avalonia.Themes.Fluent2/Controls/SplitView.xaml" />
<MergeResourceInclude Source="avares://Avalonia.Themes.Fluent2/Controls/TabControl.xaml" />
<MergeResourceInclude Source="avares://Avalonia.Themes.Fluent2/Controls/TabItem.xaml" />
<MergeResourceInclude Source="avares://Avalonia.Themes.Fluent2/Controls/TableView.xaml" />
<MergeResourceInclude Source="avares://Avalonia.Themes.Fluent2/Controls/TableViewCell.xaml" />
<MergeResourceInclude Source="avares://Avalonia.Themes.Fluent2/Controls/TableViewColumnHeader.xaml" />
<MergeResourceInclude Source="avares://Avalonia.Themes.Fluent2/Controls/TableViewRow.xaml" />
<MergeResourceInclude Source="avares://Avalonia.Themes.Fluent2/Controls/TabStrip.xaml" />
<MergeResourceInclude Source="avares://Avalonia.Themes.Fluent2/Controls/TabStripItem.xaml" />
<MergeResourceInclude Source="avares://Avalonia.Themes.Fluent2/Controls/TextBox.xaml" />

116
src/Avalonia.Themes.Fluent2/Controls/TableView.xaml

@ -0,0 +1,116 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:ClassModifier="internal">
<Design.PreviewWith>
<Border Padding="20">
<TableView Height="200" Width="400">
<TableView.Columns>
<TableViewColumn Header="Name" Width="*" />
<TableViewColumn Header="Value" Width="120" />
</TableView.Columns>
</TableView>
</Border>
</Design.PreviewWith>
<!-- ScrollViewer in TableView -->
<ControlTheme x:Key="TableViewScrollViewerTheme" TargetType="ScrollViewer">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<ControlTemplate>
<Grid ColumnDefinitions="*,Auto"
RowDefinitions="*,Auto">
<DockPanel Name="ContentPanel">
<Border Background="{DynamicResource TableViewHeaderBackground}"
Padding="{DynamicResource TableViewRowPadding}"
DockPanel.Dock="Top">
<TableViewColumnHeadersPresenter />
</Border>
<ScrollContentPresenter Name="PART_ContentPresenter"
Background="{TemplateBinding Background}"
HorizontalSnapPointsType="{TemplateBinding HorizontalSnapPointsType}"
VerticalSnapPointsType="{TemplateBinding VerticalSnapPointsType}"
HorizontalSnapPointsAlignment="{TemplateBinding HorizontalSnapPointsAlignment}"
VerticalSnapPointsAlignment="{TemplateBinding VerticalSnapPointsAlignment}"
Padding="{TemplateBinding Padding}"
ScrollViewer.IsScrollInertiaEnabled="{TemplateBinding IsScrollInertiaEnabled}">
<ScrollContentPresenter.GestureRecognizers>
<ScrollGestureRecognizer CanHorizontallyScroll="{Binding CanHorizontallyScroll, ElementName=PART_ContentPresenter}"
CanVerticallyScroll="{Binding CanVerticallyScroll, ElementName=PART_ContentPresenter}"
IsScrollInertiaEnabled="{Binding (ScrollViewer.IsScrollInertiaEnabled), ElementName=PART_ContentPresenter}" />
</ScrollContentPresenter.GestureRecognizers>
</ScrollContentPresenter>
</DockPanel>
<ScrollBar Name="PART_HorizontalScrollBar"
Orientation="Horizontal"
Grid.Column="0"
Grid.Row="1" />
<ScrollBar Name="PART_VerticalScrollBar"
Orientation="Vertical"
Grid.Column="1"
Grid.Row="0" />
<Panel x:Name="PART_ScrollBarsSeparator"
Grid.Row="1"
Grid.Column="1"
Background="{DynamicResource ScrollViewerScrollBarsSeparatorBackground}"
Opacity="0">
<Panel.Transitions>
<Transitions>
<DoubleTransition Property="Opacity" Duration="0:0:0.1" />
</Transitions>
</Panel.Transitions>
</Panel>
</Grid>
</ControlTemplate>
</Setter>
<Style Selector="^[IsExpanded=true] /template/ Panel#PART_ScrollBarsSeparator">
<Setter Property="Opacity" Value="1" />
</Style>
<Style Selector="^[AllowAutoHide=True] /template/ DockPanel#ContentPanel">
<Setter Property="Grid.ColumnSpan" Value="2" />
<Setter Property="Grid.RowSpan" Value="2" />
</Style>
</ControlTheme>
<!-- TableView theme -->
<ControlTheme x:Key="{x:Type TableView}" TargetType="TableView">
<Setter Property="Foreground" Value="{DynamicResource TableViewForeground}" />
<Setter Property="Background" Value="{DynamicResource TableViewBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource TableViewBorderBrush}" />
<Setter Property="BorderThickness" Value="{DynamicResource TableViewBorderThickness}" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.IsScrollChainingEnabled" Value="True" />
<Setter Property="ScrollViewer.IsScrollInertiaEnabled" Value="True" />
<Setter Property="TextBlock.TextTrimming" Value="{x:Static TextTrimming.CharacterEllipsis}" />
<Setter Property="Template">
<ControlTemplate>
<Border ClipToBounds="{TemplateBinding ClipToBounds}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<ScrollViewer Name="PART_ScrollViewer"
Theme="{StaticResource TableViewScrollViewerTheme}"
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)}"
BringIntoViewOnFocusChange="{TemplateBinding (ScrollViewer.BringIntoViewOnFocusChange)}">
<ItemsPresenter Name="PART_ItemsPresenter"
ItemsPanel="{TemplateBinding ItemsPanel}"
Margin="{TemplateBinding Padding}" />
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter>
</ControlTheme>
</ResourceDictionary>

11
src/Avalonia.Themes.Fluent2/Controls/TableViewCell.xaml

@ -0,0 +1,11 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:ClassModifier="internal">
<Thickness x:Key="TableViewCellPadding">12,0</Thickness>
<ControlTheme x:Key="{x:Type TableViewCell}" TargetType="TableViewCell">
<Setter Property="Padding" Value="{DynamicResource TableViewCellPadding}" />
</ControlTheme>
</ResourceDictionary>

55
src/Avalonia.Themes.Fluent2/Controls/TableViewColumnHeader.xaml

@ -0,0 +1,55 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:ClassModifier="internal">
<Design.PreviewWith>
<Border Margin="20" BorderThickness="1" BorderBrush="LightGray">
<TableViewColumnHeader Content="Header" />
</Border>
</Design.PreviewWith>
<x:Double x:Key="TableViewColumnResizerWidth">12</x:Double>
<Thickness x:Key="TableViewColumnResizerMargin">0,-9,-6,-12</Thickness>
<ControlTemplate x:Key="TableViewColumnHeaderResizerTemplate" TargetType="Thumb">
<Border Background="Transparent">
<Rectangle Width="1"
Fill="{DynamicResource TableViewColumnHeaderSeparatorBackground}"
HorizontalAlignment="Center" />
</Border>
</ControlTemplate>
<ControlTheme x:Key="{x:Type TableViewColumnHeader}" TargetType="TableViewColumnHeader">
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="Padding" Value="{DynamicResource TableViewCellPadding}" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="ClipToBounds" Value="False" />
<Setter Property="Template">
<ControlTemplate>
<Panel>
<ContentPresenter Name="PART_ContentPresenter"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
Padding="{TemplateBinding Padding}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" />
<Thumb Name="PART_Resizer"
Template="{StaticResource TableViewColumnHeaderResizerTemplate}"
Width="{DynamicResource TableViewColumnResizerWidth}"
HorizontalAlignment="Right"
Cursor="SizeWestEast"
Margin="{DynamicResource TableViewColumnResizerMargin}"
IsEnabled="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=Column?.CanUserEffectivelyResize, FallbackValue=False}">
</Thumb>
</Panel>
</ControlTemplate>
</Setter>
</ControlTheme>
</ResourceDictionary>

67
src/Avalonia.Themes.Fluent2/Controls/TableViewRow.xaml

@ -0,0 +1,67 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:ClassModifier="internal">
<Thickness x:Key="TableViewRowPadding">6,9,6,12</Thickness>
<ControlTheme x:Key="{x:Type TableViewRow}" TargetType="TableViewRow">
<Setter Property="Background" Value="{DynamicResource TableViewRowBackground}" />
<Setter Property="Padding" Value="{DynamicResource TableViewRowPadding}" />
<Setter Property="Template">
<ControlTemplate>
<Border Name="Border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
Padding="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
<TableViewCellsPresenter Name="PART_CellsPresenter" />
</Border>
</ControlTemplate>
</Setter>
<!-- Disabled -->
<Style Selector="^:disabled /template/ Border#Border">
<Setter Property="Background" Value="{DynamicResource TableViewRowBackgroundDisabled}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TableViewRowForegroundDisabled}" />
</Style>
<!-- PointerOver -->
<Style Selector="^:pointerover /template/ Border#Border">
<Setter Property="Background" Value="{DynamicResource TableViewRowBackgroundPointerOver}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TableViewRowForegroundPointerOver}" />
</Style>
<!-- Pressed -->
<Style Selector="^:pressed /template/ Border#Border">
<Setter Property="Background" Value="{DynamicResource TableViewRowBackgroundPressed}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TableViewRowForegroundPressed}" />
</Style>
<!-- Selected -->
<Style Selector="^:selected">
<Style Selector="^ /template/ Border#Border">
<Setter Property="Background" Value="{DynamicResource TableViewRowBackgroundSelected}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TableViewRowForegroundSelected}" />
</Style>
<!-- Selected PointerOver -->
<Style Selector="^:pointerover /template/ Border#Border">
<Setter Property="Background" Value="{DynamicResource TableViewRowBackgroundSelectedPointerOver}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TableViewRowForegroundSelectedPointerOver}" />
</Style>
<!-- Selected Pressed -->
<Style Selector="^:pressed /template/ Border#Border">
<Setter Property="Background" Value="{DynamicResource TableViewRowBackgroundSelectedPressed}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TableViewRowForegroundSelectedPressed}" />
</Style>
</Style>
</ControlTheme>
</ResourceDictionary>
Loading…
Cancel
Save