chuan/Ursa.Avalonia
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: support clear.

Browse Source
This commit is contained in:
rabbitism
2024-03-26 12:05:16 +08:00
parent bc4262efc8
commit 5d917d5905
3 changed files with 229 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
demo/Ursa.Demo/Pages/MultiComboBoxDemo.axaml
View File

@@ -8,7 +8,8 @@
x:DataType="vm:MultiComboBoxDemoViewModel" x:DataType="vm:MultiComboBoxDemoViewModel"
x:CompileBindings="True" x:CompileBindings="True"
x:Class="Ursa.Demo.Pages.MultiComboBoxDemo"> x:Class="Ursa.Demo.Pages.MultiComboBoxDemo">
<StackPanel> <StackPanel Orientation="Horizontal">
<u:MultiComboBox ItemsSource="{Binding Items}"/> <u:MultiComboBox Classes="ClearButton" Name="combo" ItemsSource="{Binding Items}"/>
<ListBox ItemsSource="{Binding #combo.SelectedItems}"/>
</StackPanel> </StackPanel>
</UserControl> </UserControl>

301
src/Ursa.Themes.Semi/Controls/MultiComboBox.axaml
View File

@@ -5,65 +5,160 @@
<!-- Add Resources Here --> <!-- Add Resources Here -->
<ControlTheme x:Key="{x:Type u:MultiComboBox}" TargetType="u:MultiComboBox"> <ControlTheme x:Key="{x:Type u:MultiComboBox}" TargetType="u:MultiComboBox">
<Setter Property="Focusable" Value="True" /> <Setter Property="Focusable" Value="True" />
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="Background" Value="{DynamicResource ComboBoxSelectorBackground}" />
<Setter Property="CornerRadius" Value="{DynamicResource ComboBoxSelectorCornerRadius}" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="HorizontalAlignment" Value="Left" /> <Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="Width" Value="300" /> <Setter Property="Width" Value="300" />
<Setter Property="MaxDropdownHeight" Value="300" /> <Setter Property="MaxDropdownHeight" Value="300" />
<Setter Property="MinHeight" Value="32" /> <Setter Property="MinHeight" Value="32" />
<Setter Property="Padding" Value="12 4" /> <Setter Property="Padding" Value="12 4" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate TargetType="u:MultiComboBox"> <ControlTemplate TargetType="u:MultiComboBox">
<Panel> <DataValidationErrors>
<Border <Panel>
HorizontalAlignment="Stretch" <Border
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
Background="Transparent" VerticalAlignment="Stretch"
BorderBrush="{DynamicResource SemiGrey2}" Background="{TemplateBinding Background}"
BorderThickness="1"> BorderBrush="{TemplateBinding BorderBrush}"
<Grid Name="PART_RootGrid" ColumnDefinitions="*, Auto, 32"> BorderThickness="{TemplateBinding BorderThickness}"
<Border CornerRadius="{TemplateBinding CornerRadius}">
Name="{x:Static u:MultiComboBox.PART_BackgroundBorder}" <Grid Name="PART_RootGrid" ColumnDefinitions="*, Auto, 32">
Grid.Column="0" <Border
Grid.ColumnSpan="3" Name="{x:Static u:MultiComboBox.PART_BackgroundBorder}"
Background="Transparent" /> Grid.Column="0"
<u:MultiComboBoxSelectedItemList Grid.ColumnSpan="3"
Grid.Column="0" Background="Transparent" />
ItemsSource="{TemplateBinding SelectedItems}" <u:MultiComboBoxSelectedItemList
RemoveCommand="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Remove}"> Grid.Column="0"
<ItemsControl.ItemsPanel> VerticalAlignment="Center"
<ItemsPanelTemplate> ItemsSource="{TemplateBinding SelectedItems}"
<WrapPanel Orientation="Horizontal" /> RemoveCommand="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Remove}">
</ItemsPanelTemplate> <ItemsControl.ItemsPanel>
</ItemsControl.ItemsPanel> <ItemsPanelTemplate>
</u:MultiComboBoxSelectedItemList> <WrapPanel Orientation="Horizontal" />
<PathIcon </ItemsPanelTemplate>
x:Name="DropDownGlyph" </ItemsControl.ItemsPanel>
Grid.Column="2" </u:MultiComboBoxSelectedItemList>
Width="12" <Button
Height="12" Name="ClearButton"
Margin="0,0,10,0" Grid.Column="1"
HorizontalAlignment="Right" Command="{Binding $parent[u:MultiComboBox].Clear}"
VerticalAlignment="Center" Content="{DynamicResource IconButtonClearData}"
Data="{DynamicResource ComboBoxIcon}" IsVisible="False"
Foreground="{DynamicResource ComboBoxIconDefaultForeground}" Theme="{DynamicResource InnerIconButton}" />
IsHitTestVisible="False" <PathIcon
UseLayoutRounding="False" /> x:Name="DropDownGlyph"
</Grid> Grid.Column="2"
</Border> Width="12"
<Popup Height="12"
Width="{Binding #PART_RootGrid.Bounds.Width}" Margin="0,0,10,0"
MaxHeight="{TemplateBinding MaxDropdownHeight}" HorizontalAlignment="Right"
IsLightDismissEnabled="True" VerticalAlignment="Center"
IsOpen="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsDropDownOpen, Mode=TwoWay}" Data="{DynamicResource ComboBoxIcon}"
PlacementTarget="PART_RootGrid"> Foreground="{DynamicResource ComboBoxIconDefaultForeground}"
<Border Theme="{DynamicResource CardBorder}"> IsHitTestVisible="False"
<ScrollViewer> UseLayoutRounding="False" />
<ItemsPresenter HorizontalAlignment="Stretch" ItemsPanel="{TemplateBinding ItemsPanel}" /> </Grid>
</ScrollViewer>
</Border> </Border>
</Popup> <Popup
</Panel> Width="{Binding #PART_RootGrid.Bounds.Width}"
MaxHeight="{TemplateBinding MaxDropdownHeight}"
IsLightDismissEnabled="True"
IsOpen="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsDropDownOpen, Mode=TwoWay}"
PlacementTarget="PART_RootGrid">
<Border
Margin="0,4"
HorizontalAlignment="Stretch"
Background="{DynamicResource ComboBoxPopupBackground}"
BorderBrush="{DynamicResource ComboBoxPopupBorderBrush}"
BorderThickness="{DynamicResource ComboBoxPopupBorderThickness}"
BoxShadow="{DynamicResource ComboBoxPopupBoxShadow}"
ClipToBounds="True"
CornerRadius="6">
<ScrollViewer Grid.IsSharedSizeScope="True" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
<ItemsPresenter
Name="PART_ItemsPresenter"
Margin="{DynamicResource ComboBoxDropdownContentMargin}"
HorizontalAlignment="Stretch"
ItemsPanel="{TemplateBinding ItemsPanel}" />
</ScrollViewer>
</Border>
</Popup>
</Panel>
</DataValidationErrors>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
<Style Selector="^.Large">
<Setter Property="MinHeight" Value="{DynamicResource ComboBoxLargeHeight}" />
</Style>
<Style Selector="^.Small">
<Setter Property="MinHeight" Value="{DynamicResource ComboBoxSmallHeight}" />
</Style>
<Style Selector="^.clearButton, ^.ClearButton">
<Style Selector="^:pointerover:not(:selection-empty) /template/ Button#ClearButton">
<Setter Property="IsVisible" Value="{Binding $parent[ComboBox].SelectionBoxItem, Converter={x:Static ObjectConverters.IsNotNull}}" />
</Style>
</Style>
<!-- Pointerover State -->
<Style Selector="^:pointerover">
<Setter Property="Background" Value="{DynamicResource ComboBoxSelectorPointeroverBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ComboBoxSelectorPointeroverBorderBrush}" />
</Style>
<Style Selector="^:pointerover /template/ PathIcon#DropDownGlyph">
<Setter Property="Foreground" Value="{DynamicResource ComboBoxIconPointeroverForeground}" />
</Style>
<!-- Pressed State -->
<Style Selector="^:pressed">
<Setter Property="Background" Value="{DynamicResource ComboBoxSelectorPressedBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ComboBoxSelectorPressedBorderBrush}" />
<Style Selector="^ /template/ PathIcon#DropDownGlyph">
<Setter Property="Foreground" Value="{DynamicResource ComboBoxIconPressedForeground}" />
</Style>
</Style>
<Style Selector="^:dropdownopen">
<Setter Property="BorderBrush" Value="{DynamicResource ComboBoxSelectorPressedBorderBrush}" />
</Style>
<!-- Disabled State -->
<Style Selector="^:disabled">
<Setter Property="Background" Value="{DynamicResource ComboBoxSelectorDisabledBackground}" />
<Style Selector="^ /template/ ContentControl#ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource ComboBoxDisabledForeground}" />
</Style>
<Style Selector="^ /template/ TextBlock#PlaceholderTextBlock">
<Setter Property="Foreground" Value="{DynamicResource ComboBoxDisabledForeground}" />
</Style>
<Style Selector="^ /template/ PathIcon#DropDownGlyph">
<Setter Property="Foreground" Value="{DynamicResource ComboBoxIconDisabledForeground}" />
</Style>
</Style>
<!-- Error State -->
<Style Selector="^:error">
<Style Selector="^ /template/ Border#Background">
<Setter Property="Background" Value="{DynamicResource DataValidationErrorsBackground}" />
</Style>
<Style Selector="^:pointerover /template/ Border#Background">
<Setter Property="Background" Value="{DynamicResource DataValidationErrorsPointerOverBackground}" />
<Setter Property="BorderBrush" Value="Transparent" />
</Style>
<Style Selector="^:pressed /template/ Border#Background">
<Setter Property="Background" Value="{DynamicResource DataValidationErrorsPressedBackground}" />
<Setter Property="BorderBrush" Value="Transparent" />
</Style>
<Style Selector="^:focus /template/ Border#Background">
<Setter Property="Background" Value="{DynamicResource DataValidationErrorsSelectedBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsSelectedBorderBrush}" />
</Style>
</Style>
</ControlTheme> </ControlTheme>
<ControlTheme x:Key="{x:Type u:MultiComboBoxItem}" TargetType="u:MultiComboBoxItem"> <ControlTheme x:Key="{x:Type u:MultiComboBoxItem}" TargetType="u:MultiComboBoxItem">
@@ -87,26 +182,17 @@
BorderBrush="{TemplateBinding BorderBrush}" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"> CornerRadius="{TemplateBinding CornerRadius}">
<Grid x:Name="RootGrid" ColumnDefinitions="Auto,*"> <Grid x:Name="RootGrid" ColumnDefinitions="Auto, *">
<Grid <PathIcon
Name="CheckGlyph"
Grid.Column="0" Grid.Column="0"
Margin="0,0,0,0" VerticalAlignment="Center"
VerticalAlignment="Center"> Opacity="0"
<Border Data="{DynamicResource ListBoxItemCheckCheckGlyph}"
x:Name="NormalRectangle" Width="{DynamicResource ListBoxItemCheckBoxGlyphWidth}"
Width="{DynamicResource ListBoxItemCheckBoxWidth}" Height="{DynamicResource ListBoxItemCheckBoxGlyphHeight}"
Height="{DynamicResource ListBoxItemCheckBoxHeight}" Margin="8,0"
Background="{DynamicResource ListBoxItemCheckDefaultBackground}" />
BorderBrush="{DynamicResource ListBoxItemCheckDefaultBorderBrush}"
BorderThickness="{DynamicResource ListBoxItemCheckBoxBorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
UseLayoutRounding="False" />
<PathIcon
Name="CheckGlyph"
Width="{DynamicResource ListBoxItemCheckBoxGlyphWidth}"
Height="{DynamicResource ListBoxItemCheckBoxGlyphHeight}"
Foreground="{DynamicResource ListBoxItemCheckGlyphFill}" />
</Grid>
<ContentPresenter <ContentPresenter
x:Name="ContentPresenter" x:Name="ContentPresenter"
Grid.Column="1" Grid.Column="1"
@@ -123,75 +209,28 @@
</Border> </Border>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
<!-- Unchecked Pointerover State -->
<Style Selector="^:pointerover">
<Style Selector="^ /template/ Border#NormalRectangle">
<Setter Property="BorderBrush" Value="{DynamicResource ListBoxItemCheckPointeroverBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource ListBoxItemCheckPointeroverBackground}" />
</Style>
</Style>
<!-- Unchecked Pressed State -->
<Style Selector="^:pressed">
<Style Selector="^ /template/ Border#NormalRectangle">
<Setter Property="BorderBrush" Value="{DynamicResource ListBoxItemCheckPressedBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource ListBoxItemCheckPressedBackground}" />
</Style>
</Style>
<!-- Unchecked Disabled state -->
<Style Selector="^:disabled"> <Style Selector="^:disabled">
<Style Selector="^ /template/ ContentPresenter#ContentPresenter"> <Setter Property="Foreground" Value="{DynamicResource ListBoxItemDisabledForeground}" />
<Setter Property="Foreground" Value="{DynamicResource ListBoxItemCheckDisabledForeground}" /> <Setter Property="Background" Value="{DynamicResource ListBoxItemDisabledBackground}" />
</Style> <Style Selector="^:selected">
<Style Selector="^ /template/ Border#NormalRectangle"> <Setter Property="Background"
<Setter Property="BorderBrush" Value="{DynamicResource ListBoxItemCheckDefaultDisabledBorderBrush}" /> Value="{DynamicResource ListBoxItemSelectedDisabledBackground}" />
<Setter Property="Background" Value="{DynamicResource ListBoxItemCheckDefaultDisabledBackground}" />
</Style> </Style>
</Style> </Style>
<Style Selector="^:selected"> <!-- Pointerover State -->
<Style Selector="^ /template/ Border#NormalRectangle"> <Style Selector="^:pointerover">
<Setter Property="BorderBrush" Value="{DynamicResource ListBoxItemCheckCheckedDefaultBorderBrush}" /> <Setter Property="Background" Value="{DynamicResource ListBoxItemPointeroverBackground}" />
<Setter Property="Background" Value="{DynamicResource ListBoxItemCheckCheckedDefaultBackground}" /> </Style>
</Style>
<Style Selector="^ /template/ PathIcon#CheckGlyph"> <!-- Pressed State -->
<Setter Property="Data" Value="{DynamicResource ListBoxItemCheckCheckGlyph}" /> <Style Selector="^:pressed">
<Setter Property="Opacity" Value="1" /> <Setter Property="Background" Value="{DynamicResource ListBoxItemPressedBackground}" />
</Style> </Style>
<!-- Checked Pointerover State --> <!-- Selected State -->
<Style Selector="^:pointerover"> <Style Selector="^:selected /template/ PathIcon#CheckGlyph">
<Style Selector="^ /template/ Border#NormalRectangle"> <Setter Property="Opacity" Value="1"></Setter>
<Setter Property="BorderBrush" Value="{DynamicResource ListBoxItemCheckCheckedPointeroverBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource ListBoxItemCheckCheckedPointeroverBackground}" />
</Style>
</Style>
<!-- Checked Pressed State -->
<Style Selector="^:pressed">
<Style Selector="^ /template/ Border#NormalRectangle">
<Setter Property="BorderBrush" Value="{DynamicResource ListBoxItemCheckCheckedPressedBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource ListBoxItemCheckCheckedPressedBackground}" />
</Style>
</Style>
<!-- Checked Disabled State -->
<Style Selector="^:disabled">
<Style Selector="^ /template/ ContentPresenter#ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource ListBoxItemCheckDisabledForeground}" />
</Style>
<Style Selector="^ /template/ Border#NormalRectangle">
<Setter Property="BorderBrush" Value="{DynamicResource ListBoxItemCheckCheckedDisabledBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource ListBoxItemCheckCheckedDisabledBackground}" />
</Style>
<Style Selector="^ /template/ Path#CheckGlyph">
<Setter Property="Fill" Value="{DynamicResource ListBoxItemCheckGlyphDisabledFill}" />
</Style>
</Style>
</Style> </Style>
</ControlTheme> </ControlTheme>

58
src/Ursa/Controls/ComboBox/MultiComboBox.cs
View File

@@ -1,5 +1,4 @@
using System.Collections; using System.Collections;
using System.Collections.ObjectModel;
using System.Collections.Specialized; using System.Collections.Specialized;
using Avalonia; using Avalonia;
using Avalonia.Collections; using Avalonia.Collections;
@@ -9,14 +8,19 @@ using Avalonia.Controls.Primitives;
using Avalonia.Controls.Templates; using Avalonia.Controls.Templates;
using Avalonia.Input; using Avalonia.Input;
using Avalonia.Interactivity; using Avalonia.Interactivity;
using Avalonia.LogicalTree;
using Irihi.Avalonia.Shared.Helpers; using Irihi.Avalonia.Shared.Helpers;
namespace Ursa.Controls; namespace Ursa.Controls;
[TemplatePart(PART_BackgroundBorder, typeof(Border))] [TemplatePart(PART_BackgroundBorder, typeof(Border))]
[PseudoClasses(PC_DropDownOpen, PC_Empty)]
public class MultiComboBox: SelectingItemsControl public class MultiComboBox: SelectingItemsControl
{ {
public const string PART_BackgroundBorder = "PART_BackgroundBorder"; public const string PART_BackgroundBorder = "PART_BackgroundBorder";
public const string PC_DropDownOpen = ":dropdownopen";
public const string PC_Empty = ":selection-empty";
private Border? _rootBorder; private Border? _rootBorder;
private static ITemplate<Panel?> _defaultPanel = new FuncTemplate<Panel?>(() => new VirtualizingStackPanel()); private static ITemplate<Panel?> _defaultPanel = new FuncTemplate<Panel?>(() => new VirtualizingStackPanel());
@@ -52,6 +56,33 @@ public class MultiComboBox: SelectingItemsControl
{ {
FocusableProperty.OverrideDefaultValue<MultiComboBox>(true); FocusableProperty.OverrideDefaultValue<MultiComboBox>(true);
ItemsPanelProperty.OverrideDefaultValue<MultiComboBox>(_defaultPanel); ItemsPanelProperty.OverrideDefaultValue<MultiComboBox>(_defaultPanel);
IsDropDownOpenProperty.AffectsPseudoClass<MultiComboBox>(PC_DropDownOpen);
SelectedItemsProperty.Changed.AddClassHandler<MultiComboBox, IList?>((box, args) => box.OnSelectedItemsChanged(args));
}
public MultiComboBox()
{
if (SelectedItems is INotifyCollectionChanged c)
{
c.CollectionChanged+=OnSelectedItemsCollectionChanged;
}
}
private void OnSelectedItemsChanged(AvaloniaPropertyChangedEventArgs<IList?> args)
{
if (args.OldValue.Value is INotifyCollectionChanged old)
{
old.CollectionChanged-=OnSelectedItemsCollectionChanged;
}
if (args.NewValue.Value is INotifyCollectionChanged @new)
{
@new.CollectionChanged += OnSelectedItemsCollectionChanged;
}
}
private void OnSelectedItemsCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
{
PseudoClasses.Set(PC_Empty, SelectedItems?.Count == 0);
} }
protected override bool NeedsContainerOverride(object? item, int index, out object? recycleKey) protected override bool NeedsContainerOverride(object? item, int index, out object? recycleKey)
@@ -71,7 +102,7 @@ public class MultiComboBox: SelectingItemsControl
PointerPressedEvent.RemoveHandler(OnBackgroundPointerPressed, _rootBorder); PointerPressedEvent.RemoveHandler(OnBackgroundPointerPressed, _rootBorder);
_rootBorder = e.NameScope.Find<Border>(PART_BackgroundBorder); _rootBorder = e.NameScope.Find<Border>(PART_BackgroundBorder);
PointerPressedEvent.AddHandler(OnBackgroundPointerPressed, _rootBorder); PointerPressedEvent.AddHandler(OnBackgroundPointerPressed, _rootBorder);
PseudoClasses.Set(PC_Empty, SelectedItems?.Count == 0);
} }
private void OnBackgroundPointerPressed(object sender, PointerPressedEventArgs e) private void OnBackgroundPointerPressed(object sender, PointerPressedEventArgs e)
@@ -105,4 +136,27 @@ public class MultiComboBox: SelectingItemsControl
} }
} }
public void Clear()
{
this.SelectedItems?.Clear();
var containers = Presenter?.Panel?.Children;
if(containers is null) return;
foreach (var container in containers)
{
if (container is MultiComboBoxItem t)
{
t.IsSelected = false;
}
}
}
protected override void OnUnloaded(RoutedEventArgs e)
{
base.OnUnloaded(e);
if (SelectedItems is INotifyCollectionChanged c)
{
c.CollectionChanged-=OnSelectedItemsCollectionChanged;
}
}
} }