fix: fix ButtonGroup Height & Padding issue.

This commit is contained in:
Zhang Dian
2025-03-27 15:41:57 +08:00
parent adf46e3949
commit 9978ad416f
4 changed files with 46 additions and 27 deletions

View File

@@ -11,25 +11,37 @@
x:CompileBindings="True" x:CompileBindings="True"
x:DataType="vm:ButtonGroupDemoViewModel" x:DataType="vm:ButtonGroupDemoViewModel"
mc:Ignorable="d"> mc:Ignorable="d">
<StackPanel Margin="20" Spacing="20"> <StackPanel Margin="20" Spacing="20">
<u:ButtonGroup Classes="Primary Solid" <u:ButtonGroup
Classes="Primary Solid"
CommandBinding="{Binding InvokeCommand}" CommandBinding="{Binding InvokeCommand}"
ItemsSource="{Binding Items}" > ItemsSource="{Binding Items}">
<u:ButtonGroup.ItemTemplate> <u:ButtonGroup.ItemTemplate>
<DataTemplate x:DataType="vm:ButtonItem"> <DataTemplate x:DataType="vm:ButtonItem">
<TextBlock> <TextBlock>
<Run Text="🐼"></Run> <Run Text="🐼" />
<Run Text="{Binding Name}"></Run> <Run Text="{Binding Name}" />
</TextBlock> </TextBlock>
</DataTemplate> </DataTemplate>
</u:ButtonGroup.ItemTemplate> </u:ButtonGroup.ItemTemplate>
</u:ButtonGroup> </u:ButtonGroup>
<u:ButtonGroup Classes="Primary" <u:ButtonGroup
Classes="Success"
ContentBinding="{Binding Name}" ContentBinding="{Binding Name}"
CommandBinding="{Binding InvokeCommand}" CommandBinding="{Binding InvokeCommand}"
ItemsSource="{Binding Items}" > ItemsSource="{Binding Items}" />
</u:ButtonGroup>
<u:ButtonGroup
Classes="Warning Small"
ContentBinding="{Binding Name}"
CommandBinding="{Binding InvokeCommand}"
ItemsSource="{Binding Items}" />
<u:ButtonGroup
Classes="Danger Large"
ContentBinding="{Binding Name}"
CommandBinding="{Binding InvokeCommand}"
ItemsSource="{Binding Items}" />
</StackPanel> </StackPanel>
</UserControl> </UserControl>

View File

@@ -14,7 +14,7 @@
<Setter Property="VerticalAlignment" Value="Top" /> <Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="HorizontalAlignment" Value="Left" /> <Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="Background" Value="{DynamicResource ButtonGroupDefaultBackground}" /> <Setter Property="Background" Value="{DynamicResource ButtonGroupDefaultBackground}" />
<Setter Property="CornerRadius" Value="3" /> <Setter Property="CornerRadius" Value="{DynamicResource ButtonGroupCornerRadius}" />
<Setter Property="ClipToBounds" Value="True" /> <Setter Property="ClipToBounds" Value="True" />
<Setter Property="ItemContainerTheme" Value="{DynamicResource ButtonGroupItemTheme}" /> <Setter Property="ItemContainerTheme" Value="{DynamicResource ButtonGroupItemTheme}" />
<Setter Property="ItemsPanel"> <Setter Property="ItemsPanel">
@@ -28,9 +28,11 @@
Background="{TemplateBinding Background}" Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" BorderThickness="{TemplateBinding BorderThickness}"
ClipToBounds="True" CornerRadius="{TemplateBinding CornerRadius}"
CornerRadius="{TemplateBinding CornerRadius}"> ClipToBounds="True">
<ItemsPresenter Name="PART_ItemsPresenter" ItemsPanel="{TemplateBinding ItemsPanel}" /> <ItemsPresenter
Name="PART_ItemsPresenter"
ItemsPanel="{TemplateBinding ItemsPanel}" />
</Border> </Border>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
@@ -41,6 +43,7 @@
<Setter Property="VerticalContentAlignment" Value="Center" /> <Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Background" Value="Transparent" /> <Setter Property="Background" Value="Transparent" />
<Setter Property="Padding" Value="{DynamicResource ButtonGroupDefaultPadding}" /> <Setter Property="Padding" Value="{DynamicResource ButtonGroupDefaultPadding}" />
<Setter Property="MinHeight" Value="{DynamicResource ButtonGroupDefaultMinHeight}" />
<Setter Property="FontWeight" Value="{DynamicResource ButtonGroupDefaultFontWeight}" /> <Setter Property="FontWeight" Value="{DynamicResource ButtonGroupDefaultFontWeight}" />
<Setter Property="Cursor" Value="Hand" /> <Setter Property="Cursor" Value="Hand" />
<Setter Property="Template"> <Setter Property="Template">
@@ -48,10 +51,9 @@
<DockPanel LastChildFill="True"> <DockPanel LastChildFill="True">
<Rectangle <Rectangle
Name="PART_Separator" Name="PART_Separator"
Width="1"
Height="16"
VerticalAlignment="Center"
DockPanel.Dock="Right" DockPanel.Dock="Right"
Width="1"
Height="{DynamicResource ButtonGroupSeparatorHeight}"
Fill="{DynamicResource ButtonGroupSeparatorForeground}" /> Fill="{DynamicResource ButtonGroupSeparatorForeground}" />
<Border <Border
Background="{TemplateBinding Background}" Background="{TemplateBinding Background}"

View File

@@ -23,9 +23,11 @@
</Style> </Style>
<Style Selector="u|ButtonGroup.Large Button"> <Style Selector="u|ButtonGroup.Large Button">
<Setter Property="Padding" Value="{DynamicResource ButtonGroupLargePadding}" /> <Setter Property="Padding" Value="{DynamicResource ButtonGroupLargePadding}" />
<Setter Property="MinHeight" Value="{DynamicResource ButtonGroupLargeMinHeight}" />
</Style> </Style>
<Style Selector="u|ButtonGroup.Small Button"> <Style Selector="u|ButtonGroup.Small Button">
<Setter Property="Padding" Value="{DynamicResource ButtonGroupSmallPadding}" /> <Setter Property="Padding" Value="{DynamicResource ButtonGroupSmallPadding}" />
<Setter Property="MinHeight" Value="{DynamicResource ButtonGroupSmallMinHeight}" />
</Style> </Style>
<Style Selector="u|ButtonGroup Button:pointerover"> <Style Selector="u|ButtonGroup Button:pointerover">
<Setter Property="Background" Value="{DynamicResource ButtonGroupDefaultPointeroverBackground}" /> <Setter Property="Background" Value="{DynamicResource ButtonGroupDefaultPointeroverBackground}" />

View File

@@ -1,10 +1,13 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<x:Double x:Key="ButtonGroupDefaultFontSize">14</x:Double> <x:Double x:Key="ButtonGroupDefaultFontSize">14</x:Double>
<FontWeight x:Key="ButtonGroupDefaultFontWeight">600</FontWeight> <FontWeight x:Key="ButtonGroupDefaultFontWeight">600</FontWeight>
<CornerRadius x:Key="ButtonGroupCornerRadius">3</CornerRadius> <CornerRadius x:Key="ButtonGroupCornerRadius">3</CornerRadius>
<Thickness x:Key="ButtonGroupDefaultPadding">12 6</Thickness> <x:Double x:Key="ButtonGroupSeparatorHeight">20</x:Double>
<Thickness x:Key="ButtonGroupLargePadding">16 10</Thickness> <Thickness x:Key="ButtonGroupDefaultPadding">12 0</Thickness>
<Thickness x:Key="ButtonGroupSmallPadding">6 2</Thickness> <Thickness x:Key="ButtonGroupLargePadding">16 0</Thickness>
<Thickness x:Key="ButtonGroupSmallPadding">12 0</Thickness>
<x:Double x:Key="ButtonGroupDefaultMinHeight">32</x:Double>
<x:Double x:Key="ButtonGroupLargeMinHeight">40</x:Double>
<x:Double x:Key="ButtonGroupSmallMinHeight">24</x:Double>
</ResourceDictionary> </ResourceDictionary>