feat: Update split button style.

This commit is contained in:
rabbitism
2023-01-30 00:05:42 +08:00
parent d7574237ec
commit dc010357ba
3 changed files with 134 additions and 69 deletions

View File

@@ -84,6 +84,32 @@
</MenuFlyout> </MenuFlyout>
</SplitButton.Flyout> </SplitButton.Flyout>
</SplitButton> </SplitButton>
<SplitButton Classes="Secondary" Content="Submit" />
<SplitButton Classes="Tertiary" Content="Submit" />
<SplitButton Classes="Warning" Content="Submit" />
<SplitButton Classes="Danger" Content="Submit" />
<SplitButton
Classes="Danger"
Content="Submit"
IsEnabled="False" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<ToggleSplitButton Content="Submit">
<ToggleSplitButton.Flyout>
<MenuFlyout Placement="BottomEdgeAlignedRight">
<MenuItem Header="Submit All" />
<MenuItem Header="Submit Updated" />
</MenuFlyout>
</ToggleSplitButton.Flyout>
</ToggleSplitButton>
<ToggleSplitButton Classes="Secondary" Content="Submit" />
<ToggleSplitButton Classes="Tertiary" Content="Submit" />
<ToggleSplitButton Classes="Warning" Content="Submit" />
<ToggleSplitButton Classes="Danger" Content="Submit" />
<ToggleSplitButton
Classes="Danger"
Content="Submit"
IsEnabled="False" />
</StackPanel> </StackPanel>
</StackPanel> </StackPanel>
</UserControl> </UserControl>

View File

@@ -15,14 +15,6 @@
Text="Welcome to Semi Avalonia" Text="Welcome to Semi Avalonia"
Theme="{StaticResource TitleTextBlock}" /> Theme="{StaticResource TitleTextBlock}" />
<StackPanel Orientation="Horizontal" Spacing="20">
<Button Classes="Primary">主要按钮</Button>
<Button Classes="Secondary">次要按钮</Button>
<Button Classes="Tertiary">第三按钮</Button>
<Button Classes="Warning">警告按钮</Button>
<Button Classes="Danger">危险按钮</Button>
<Button Classes="Primary" IsEnabled="False">禁用按钮</Button>
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="20"> <StackPanel Orientation="Horizontal" Spacing="20">
<Button Classes="Primary" Theme="{DynamicResource SolidButton}">Primary</Button> <Button Classes="Primary" Theme="{DynamicResource SolidButton}">Primary</Button>
<Button Classes="Secondary" Theme="{DynamicResource SolidButton}">Secondary</Button> <Button Classes="Secondary" Theme="{DynamicResource SolidButton}">Secondary</Button>
@@ -61,8 +53,6 @@
<RadioButton Theme="{StaticResource ButtonRadioButton}">选项 2</RadioButton> <RadioButton Theme="{StaticResource ButtonRadioButton}">选项 2</RadioButton>
</StackPanel> </StackPanel>
</Border> </Border>
</StackPanel>
<StackPanel Orientation="Horizontal">
<RadioButton Margin="4" Theme="{StaticResource CardRadioButton}"> <RadioButton Margin="4" Theme="{StaticResource CardRadioButton}">
<StackPanel> <StackPanel>
<TextBlock FontWeight="Bold">Option 1</TextBlock> <TextBlock FontWeight="Bold">Option 1</TextBlock>
@@ -79,6 +69,7 @@
</StackPanel> </StackPanel>
</RadioButton> </RadioButton>
</StackPanel> </StackPanel>
<StackPanel Orientation="Horizontal" />
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<CheckBox Margin="0,0,8,0">Avalonia</CheckBox> <CheckBox Margin="0,0,8,0">Avalonia</CheckBox>
<CheckBox Margin="0,0,8,0" IsChecked="True">WPF</CheckBox> <CheckBox Margin="0,0,8,0" IsChecked="True">WPF</CheckBox>
@@ -89,6 +80,15 @@
Content="Content" Content="Content"
OffContent="No" OffContent="No"
OnContent="Yes" /> OnContent="Yes" />
<ProgressBar
Classes="Right"
ShowProgressText="True"
Value="20" />
<Slider
Width="200"
Margin="30,0"
Orientation="Horizontal"
Value="30" />
</StackPanel> </StackPanel>
<TabControl> <TabControl>
<TabItem Header="Tab 1"> <TabItem Header="Tab 1">
@@ -103,7 +103,9 @@
</TabControl> </TabControl>
<StackPanel Orientation="Horizontal" Spacing="20"> <StackPanel Orientation="Horizontal" Spacing="20">
<ComboBox Width="200" PlaceholderText="Please Select" /> <ComboBox Width="200" PlaceholderText="Please Select" />
<DatePicker />
<TimePicker />
<CalendarDatePicker />
</StackPanel> </StackPanel>
<Grid ColumnDefinitions="* * *"> <Grid ColumnDefinitions="* * *">
<Border Theme="{StaticResource CardBorder}"> <Border Theme="{StaticResource CardBorder}">
@@ -132,6 +134,7 @@
Classes="revealPasswordButton" Classes="revealPasswordButton"
PasswordChar="*" PasswordChar="*"
Text="Avalonia" /> Text="Avalonia" />
</StackPanel> </StackPanel>
<StackPanel Orientation="Horizontal" Spacing="20"> <StackPanel Orientation="Horizontal" Spacing="20">
@@ -152,6 +155,7 @@
<TextBlock>List Item 4</TextBlock> <TextBlock>List Item 4</TextBlock>
<TextBlock>List Item 5</TextBlock> <TextBlock>List Item 5</TextBlock>
</ListBox> </ListBox>
<Calendar />
</StackPanel> </StackPanel>
</StackPanel> </StackPanel>
</ScrollViewer> </ScrollViewer>

View File

@@ -18,12 +18,6 @@
<Setter Property="SplitButton.MinHeight" Value="12" /> <Setter Property="SplitButton.MinHeight" Value="12" />
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate TargetType="SplitButton"> <ControlTemplate TargetType="SplitButton">
<Border
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
ClipToBounds="True"
CornerRadius="{TemplateBinding CornerRadius}">
<Grid ColumnDefinitions="*,Auto,Auto"> <Grid ColumnDefinitions="*,Auto,Auto">
<Button <Button
x:Name="PART_PrimaryButton" x:Name="PART_PrimaryButton"
@@ -69,16 +63,57 @@
BorderThickness="{TemplateBinding BorderThickness}" BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="0 3 3 0" CornerRadius="0 3 3 0"
Focusable="False" Focusable="False"
Foreground="{TemplateBinding Foreground}"
KeyboardNavigation.IsTabStop="False"> KeyboardNavigation.IsTabStop="False">
<PathIcon <PathIcon
Width="12" Width="12"
Height="12" Height="12"
Data="{DynamicResource SplitButtonIconGlyph}" Data="{DynamicResource SplitButtonIconGlyph}"
Foreground="{TemplateBinding Foreground}" /> Foreground="{Binding $parent[Button].Foreground}" />
</Button> </Button>
</Grid> </Grid>
</Border>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
<Style Selector="^.Secondary /template/ Button">
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultSecondaryForeground}" />
</Style>
<Style Selector="^.Tertiary /template/ Button">
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultTertiaryForeground}" />
</Style>
<Style Selector="^.Warning /template/ Button">
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultWarningForeground}" />
</Style>
<Style Selector="^.Danger /template/ Button">
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDangerForeground}" />
</Style>
<Style Selector="^:checked">
<Style Selector="^ /template/ Button">
<Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
<Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
</Style>
<Style Selector="^.Secondary /template/ Button">
<Setter Property="Background" Value="{DynamicResource ButtonSolidSecondaryBackground}" />
<Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
</Style>
<Style Selector="^.Tertiary /template/ Button">
<Setter Property="Background" Value="{DynamicResource ButtonSolidTertiaryBackground}" />
<Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
</Style>
<Style Selector="^.Warning /template/ Button">
<Setter Property="Background" Value="{DynamicResource ButtonSolidWarningBackground}" />
<Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
</Style>
<Style Selector="^.Danger /template/ Button">
<Setter Property="Background" Value="{DynamicResource ButtonSolidDangerBackground}" />
<Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
</Style>
</Style>
<Style Selector="^:disabled /template/ Button">
<Setter Property="Background" Value="{DynamicResource ButtonDefaultDisabledBackground}" />
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
</Style>
</ControlTheme> </ControlTheme>
</ResourceDictionary> </ResourceDictionary>