dan/Toolkit2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Overflow styling works

Browse Source
This commit is contained in:
TheXamlGuy
2024-07-11 18:58:59 +01:00
parent d94e04409f
commit bb90015092
2 changed files with 162 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Toolkit.UI.Controls.Avalonia/Overflow/Overflow.axaml
+147 -6
View File
@@ -2,27 +2,168 @@
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:Toolkit.UI.Controls.Avalonia">
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Light">
<StaticResource x:Key="OverflowItemBackgroundSelected" ResourceKey="SubtleFillColorTransparentBrush" />
</ResourceDictionary>
<ResourceDictionary x:Key="Dark">
<StaticResource x:Key="OverflowItemBackgroundSelected" ResourceKey="SubtleFillColorTransparentBrush" />
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
<x:Double x:Key="OverflowItemSpacing">6</x:Double>
<x:Double x:Key="OverflowItemSize">40</x:Double>
<CornerRadius x:Key="OverflowItemCornerRadius">40</CornerRadius>
<ControlTheme x:Key="OverflowItemStyle" TargetType="ListBoxItem">
<Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
<Setter Property="Background" Value="{DynamicResource ListViewItemBackground}" />
<Setter Property="Foreground" Value="{DynamicResource ListViewItemForeground}" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Width" Value="{StaticResource OverflowItemSize}" />
<Setter Property="Height" Value="{StaticResource OverflowItemSize}" />
<Setter Property="MinHeight" Value="{StaticResource OverflowItemSize}" />
<Setter Property="MinWidth" Value="{StaticResource OverflowItemSize}" />
<Setter Property="CornerRadius" Value="{StaticResource OverflowItemCornerRadius}" />
<Setter Property="Template">
<ControlTemplate>
<Panel>
<Border
x:Name="PART_ContentBorder"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<Grid>
<ContentPresenter
Name="PART_ContentPresenter"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
<Border
Name="SelectionIndicator"
BorderBrush="{DynamicResource AccentFillColorDefaultBrush}"
BorderThickness="3"
CornerRadius="{TemplateBinding CornerRadius}"
IsVisible="False"
UseLayoutRounding="False" />
</Grid>
</Border>
</Panel>
</ControlTemplate>
</Setter>
<Style Selector="^:disabled">
<Setter Property="Opacity" Value="0.5" />
</Style>
<Style Selector="^:pointerover">
<Style Selector="^ /template/ Border#PART_ContentBorder">
<Setter Property="Background" Value="{DynamicResource ListViewItemBackgroundPointerOver}" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource ListViewItemForegroundPointerOver}" />
</Style>
</Style>
<Style Selector="^:pressed">
<Style Selector="^ /template/ Border#PART_ContentBorder">
<Setter Property="Background" Value="{DynamicResource ListViewItemBackgroundPressed}" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource ListViewItemForegroundPressed}" />
</Style>
</Style>
<Style Selector="^:selected">
<Style Selector="^ /template/ Border#PART_ContentBorder">
<Setter Property="Background" Value="{DynamicResource OverflowItemBackgroundSelected}" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource ListViewItemForegroundSelected}" />
</Style>
<Style Selector="^ /template/ Border#SelectionIndicator">
<Setter Property="IsVisible" Value="True" />
</Style>
<Style Selector="^:not(:focus) /template/ Border#PART_ContentBorder">
<Setter Property="Background" Value="{DynamicResource OverflowItemBackgroundSelected}" />
</Style>
<Style Selector="^:not(:focus) /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource ListViewItemForegroundSelected}" />
</Style>
<Style Selector="^:pointerover">
<Style Selector="^ /template/ Border#PART_ContentBorder">
<Setter Property="Background" Value="{DynamicResource OverflowItemBackgroundSelectedPointerOver}" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource ListViewItemForegroundSelectedPointerOver}" />
</Style>
<Style Selector="^ /template/ Border#SelectionIndicator">
<Setter Property="BorderBrush" Value="{DynamicResource ListViewItemSelectionIndicatorPointerOverBrush}" />
</Style>
</Style>
<Style Selector="^:pressed">
<Style Selector="^ /template/ Border#PART_ContentBorder">
<Setter Property="Background" Value="{DynamicResource OverflowItemBackgroundSelectedPressed}" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource ListViewItemForegroundSelectedPressed}" />
</Style>
</Style>
<Style Selector="^:disabled /template/ Border#SelectionIndicator">
<Setter Property="BorderBrush" Value="{DynamicResource ListViewItemSelectionIndicatorDisabledBrush}" />
</Style>
</Style>
</ControlTheme>
<ControlTheme x:Key="{x:Type controls:Overflow}" TargetType="controls:Overflow">
<Setter Property="Template">
<ControlTemplate>
<Grid Margin="{TemplateBinding Margin}" ColumnDefinitions="*,Auto">
<StackPanel Margin="{TemplateBinding Margin}">
<ListBox
x:Name="PrimaryListBox"
Grid.Column="0"
ItemContainerTheme="{StaticResource OverflowItemStyle}"
ItemTemplate="{TemplateBinding ItemTemplate}"
ItemsPanel="{TemplateBinding ItemsPanel}"
SelectedItem="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.PrimarySelection, Mode=TwoWay}" />
<Button Grid.Column="1" Focusable="False">
SelectedItem="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.PrimarySelection, Mode=TwoWay}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Spacing="{StaticResource OverflowItemSpacing}" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
<Grid
Grid.Column="1"
Width="{StaticResource OverflowItemSpacing}"
Height="{StaticResource OverflowItemSpacing}" />
<Button
Grid.Column="2"
MinWidth="{StaticResource OverflowItemSize}"
MinHeight="{StaticResource OverflowItemSize}"
Padding="0"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
CornerRadius="{StaticResource OverflowItemCornerRadius}"
Focusable="False">
<Viewbox Width="14" Height="14">
<PathIcon
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="F1 M 6.24 11.799999 C 6.239999 12.146667 6.119999 12.440001 5.88 12.679999 C 5.64 12.92 5.346666 13.039999 5 13.039999 C 4.653333 13.039999 4.36 12.92 4.12 12.679999 C 3.88 12.440001 3.76 12.146667 3.76 11.799999 C 3.76 11.453333 3.88 11.16 4.12 10.919999 C 4.36 10.679999 4.653333 10.559999 5 10.559999 C 5.346666 10.559999 5.64 10.679999 5.88 10.919999 C 6.119999 11.16 6.239999 11.453333 6.24 11.799999 Z M 11.24 11.799999 C 11.24 12.146667 11.12 12.440001 10.88 12.679999 C 10.639999 12.92 10.346666 13.039999 10 13.039999 C 9.653333 13.039999 9.359999 12.92 9.12 12.679999 C 8.879999 12.440001 8.76 12.146667 8.76 11.799999 C 8.76 11.453333 8.879999 11.16 9.12 10.919999 C 9.359999 10.679999 9.653333 10.559999 10 10.559999 C 10.346666 10.559999 10.639999 10.679999 10.88 10.919999 C 11.12 11.16 11.24 11.453333 11.24 11.799999 Z M 15 13.039999 C 15.346665 13.039999 15.639999 12.92 15.88 12.679999 C 16.119999 12.440001 16.24 12.146667 16.24 11.799999 C 16.24 11.453333 16.119999 11.16 15.88 10.919999 C 15.639999 10.679999 15.346665 10.559999 15 10.559999 C 14.653333 10.559999 14.36 10.679999 14.12 10.919999 C 13.879999 11.16 13.759998 11.453333 13.759999 11.799999 C 13.759998 12.146667 13.879999 12.440001 14.12 12.679999 C 14.36 12.92 14.653333 13.039999 15 13.039999 Z " />
</Viewbox>
<Button.Flyout>
<Flyout>
<ListBox
x:Name="SecondaryListBox"
ItemContainerTheme="{StaticResource OverflowItemStyle}"
ItemTemplate="{TemplateBinding ItemTemplate}"
SelectedItem="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.SecondarySelection, Mode=TwoWay}" />
SelectedItem="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.SecondarySelection, Mode=TwoWay}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Spacing="{StaticResource OverflowItemSpacing}" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Flyout>
</Button.Flyout>
</Button>
</Grid>
</StackPanel>
</ControlTemplate>
</Setter>
</ControlTheme>
Toolkit.UI.Controls.Avalonia/Overflow/Overflow.cs
+15 -15
View File
@@ -48,20 +48,6 @@ public class Overflow :
.AddClassHandler<OverflowTemplateSettings>(OnSecondarySelectionPropertyChanged);
}
private void OnPrimarySelectionPropertyChanged(OverflowTemplateSettings sender,
AvaloniaPropertyChangedEventArgs args)
{
object? selection = args.GetNewValue<object>();
SetValue(SelectedItemProperty, selection);
}
private void OnSecondarySelectionPropertyChanged(OverflowTemplateSettings sender,
AvaloniaPropertyChangedEventArgs args)
{
object? selection = args.GetNewValue<object>();
SetValue(SelectedItemProperty, selection);
}
public ITemplate<Panel?> ItemsPanel
{
get => GetValue(ItemsPanelProperty);
@@ -92,6 +78,7 @@ public class Overflow :
get => GetValue(TemplateSettingsProperty);
set => SetValue(TemplateSettingsProperty, value);
}
protected override void OnApplyTemplate(TemplateAppliedEventArgs args)
{
base.OnApplyTemplate(args);
@@ -152,6 +139,19 @@ public class Overflow :
}
}
private void OnPrimarySelectionPropertyChanged(OverflowTemplateSettings sender,
AvaloniaPropertyChangedEventArgs args)
{
object? selection = args.GetNewValue<object>();
SetValue(SelectedItemProperty, selection);
}
private void OnSecondarySelectionPropertyChanged(OverflowTemplateSettings sender,
AvaloniaPropertyChangedEventArgs args)
{
object? selection = args.GetNewValue<object>();
SetValue(SelectedItemProperty, selection);
}
private void OnSourceCollectionChanged(object? sender,
NotifyCollectionChangedEventArgs args)
{
@@ -249,7 +249,7 @@ public class Overflow :
return;
}
double controlWidth = primaryListBox?.DesiredSize.Width ?? 0;
double controlWidth = 240;
double accumulatedWidth = 0;
double itemSpacing = 6;