Merge pull request #322 from irihitech/293-bs-bin

BackgroundSizing: Button
This commit is contained in:
Zhang Dian
2024-03-22 20:39:17 +08:00
committed by GitHub
14 changed files with 712 additions and 441 deletions

View File

@@ -4,114 +4,148 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<StackPanel HorizontalAlignment="Left" Spacing="20">
<TextBlock>Light (Default)</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="20">
<Button Classes="Primary">Primary</Button>
<Button Classes="Secondary">Secondary</Button>
<Button Classes="Tertiary">Tertiary</Button>
<Button Classes="Success">Success</Button>
<Button Classes="Warning">Warning</Button>
<Button Classes="Danger">Danger</Button>
<Button Classes="Primary" IsEnabled="False">Danger</Button>
<ScrollViewer>
<StackPanel HorizontalAlignment="Left" Spacing="20">
<StackPanel.Styles>
<Style Selector="SplitButton">
<Setter Property="Flyout">
<MenuFlyout Placement="BottomEdgeAlignedRight">
<MenuItem Header="Submit All" />
<MenuItem Header="Submit Updated" />
</MenuFlyout>
</Setter>
</Style>
<Style Selector="DropDownButton">
<Setter Property="Flyout">
<MenuFlyout Placement="BottomEdgeAlignedRight">
<MenuItem Header="Submit All" />
<MenuItem Header="Submit Updated" />
</MenuFlyout>
</Setter>
</Style>
<Style Selector="ToggleSplitButton">
<Setter Property="Flyout">
<MenuFlyout Placement="BottomEdgeAlignedRight">
<MenuItem Header="Submit All" />
<MenuItem Header="Submit Updated" />
</MenuFlyout>
</Setter>
</Style>
</StackPanel.Styles>
<TextBlock>Light (Default)</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="20">
<Button Classes="Primary">Primary</Button>
<Button Classes="Secondary">Secondary</Button>
<Button Classes="Tertiary">Tertiary</Button>
<Button Classes="Success">Success</Button>
<Button Classes="Warning">Warning</Button>
<Button Classes="Danger">Danger</Button>
<Button Classes="Danger" IsEnabled="False">Disabled</Button>
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="20">
<Button Classes="Primary Small">Small</Button>
<Button Classes="Primary">Default</Button>
<Button Classes="Primary Large">Large</Button>
</StackPanel>
<TextBlock>Solid</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="20">
<Button Classes="Primary" Theme="{DynamicResource SolidButton}">Primary</Button>
<Button Classes="Secondary" Theme="{DynamicResource SolidButton}">Secondary</Button>
<Button Classes="Tertiary" Theme="{DynamicResource SolidButton}">Tertiary</Button>
<Button Classes="Success" Theme="{DynamicResource SolidButton}">Success</Button>
<Button Classes="Warning" Theme="{DynamicResource SolidButton}">Warning</Button>
<Button Classes="Danger" Theme="{DynamicResource SolidButton}">Danger</Button>
<Button
Classes="Danger"
IsEnabled="False"
Theme="{DynamicResource SolidButton}">
Disabled
</Button>
</StackPanel>
<TextBlock>Borderless</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="20">
<Button Classes="Primary" Theme="{DynamicResource BorderlessButton}">Primary</Button>
<Button Classes="Secondary" Theme="{DynamicResource BorderlessButton}">Secondary</Button>
<Button Classes="Tertiary" Theme="{DynamicResource BorderlessButton}">Tertiary</Button>
<Button Classes="Success" Theme="{DynamicResource BorderlessButton}">Success</Button>
<Button Classes="Warning" Theme="{DynamicResource BorderlessButton}">Warning</Button>
<Button Classes="Danger" Theme="{DynamicResource BorderlessButton}">Danger</Button>
<Button
Classes="Danger"
IsEnabled="False"
Theme="{DynamicResource BorderlessButton}">
Disabled
</Button>
</StackPanel>
<TextBlock>DropDownButton</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="8">
<DropDownButton Content="Primary" />
<DropDownButton Classes="Secondary" Content="Secondary" />
<DropDownButton Classes="Tertiary" Content="Tertiary" />
<DropDownButton Classes="Success" Content="Success" />
<DropDownButton Classes="Warning" Content="Warning" />
<DropDownButton Classes="Danger" Content="Danger" />
<DropDownButton
Classes="Danger"
Content="Disabled"
IsEnabled="False" />
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="8">
<DropDownButton Content="Default" Classes="Success"/>
<DropDownButton Content="Solid" Theme="{DynamicResource SolidDropDownButton}" Classes="Success"/>
<DropDownButton Content="Borderless" Theme="{DynamicResource BorderlessDropDownButton}" Classes="Success"/>
<DropDownButton Content="Default" Classes="Success" IsEnabled="False"/>
<DropDownButton Content="Solid" Theme="{DynamicResource SolidDropDownButton}" Classes="Success" IsEnabled="False"/>
<DropDownButton Content="Borderless" Theme="{DynamicResource BorderlessDropDownButton}" Classes="Success" IsEnabled="False"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="8">
<DropDownButton Classes="Small" Content="Small" />
<DropDownButton Content="Default" />
<DropDownButton Classes="Large" Content="Large" />
</StackPanel>
<TextBlock>SplitButton</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="8">
<SplitButton Content="Primary" />
<SplitButton Classes="Secondary" Content="Secondary" />
<SplitButton Classes="Tertiary" Content="Tertiary" />
<SplitButton Classes="Success" Content="Success" />
<SplitButton Classes="Warning" Content="Warning" />
<SplitButton Classes="Danger" Content="Danger" />
<SplitButton Classes="Danger" Content="Disabled" IsEnabled="False" />
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="8">
<SplitButton Content="Default" Classes="Success" />
<SplitButton Theme="{DynamicResource SolidSplitButton}" Content="Solid" Classes="Success" />
<SplitButton Theme="{DynamicResource BorderlessSplitButton}" Content="Borderless" Classes="Success" />
<SplitButton Content="Default" Classes="Success" IsEnabled="False" />
<SplitButton Theme="{DynamicResource SolidSplitButton}" Content="Solid" Classes="Success" IsEnabled="False" />
<SplitButton Theme="{DynamicResource BorderlessSplitButton}" Content="Borderless" Classes="Success" IsEnabled="False" />
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="8">
<SplitButton Classes="Small" Content="Small" />
<SplitButton Content="Default" />
<SplitButton Classes="Large" Content="Large" />
</StackPanel>
<TextBlock>ToggleSplitButton</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="8">
<ToggleSplitButton Content="Primary" />
<ToggleSplitButton Classes="Secondary" Content="Secondary" />
<ToggleSplitButton Classes="Tertiary" Content="Tertiary" />
<ToggleSplitButton Classes="Success" Content="Success" />
<ToggleSplitButton Classes="Warning" Content="Warning" />
<ToggleSplitButton Classes="Danger" Content="Danger" />
<ToggleSplitButton Classes="Danger" Content="Disabled" IsEnabled="False" />
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="8">
<ToggleSplitButton Classes="Small" Content="Small" />
<ToggleSplitButton Content="Default" />
<ToggleSplitButton Classes="Large" Content="Large" />
</StackPanel>
</StackPanel>
<TextBlock>Solid</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="20">
<Button Classes="Primary" Theme="{DynamicResource SolidButton}">Primary</Button>
<Button Classes="Secondary" Theme="{DynamicResource SolidButton}">Secondary</Button>
<Button Classes="Tertiary" Theme="{DynamicResource SolidButton}">Tertiary</Button>
<Button Classes="Success" Theme="{DynamicResource SolidButton}">Success</Button>
<Button Classes="Warning" Theme="{DynamicResource SolidButton}">Warning</Button>
<Button Classes="Danger" Theme="{DynamicResource SolidButton}">Danger</Button>
<Button
Classes="Primary"
IsEnabled="False"
Theme="{DynamicResource SolidButton}">
Danger
</Button>
</StackPanel>
<TextBlock>Borderless</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="20">
<Button Classes="Primary" Theme="{DynamicResource BorderlessButton}">Primary</Button>
<Button Classes="Secondary" Theme="{DynamicResource BorderlessButton}">Secondary</Button>
<Button Classes="Tertiary" Theme="{DynamicResource BorderlessButton}">Tertiary</Button>
<Button Classes="Success" Theme="{DynamicResource BorderlessButton}">Success</Button>
<Button Classes="Warning" Theme="{DynamicResource BorderlessButton}">Warning</Button>
<Button Classes="Danger" Theme="{DynamicResource BorderlessButton}">Danger</Button>
<Button
Classes="Primary"
IsEnabled="False"
Theme="{DynamicResource BorderlessButton}">
Danger
</Button>
</StackPanel>
<TextBlock>DropDownButton</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="8">
<DropDownButton Content="Submit">
<DropDownButton.Flyout>
<MenuFlyout Placement="BottomEdgeAlignedRight">
<MenuItem Header="Submit All" />
<MenuItem Header="Submit Updated" />
</MenuFlyout>
</DropDownButton.Flyout>
</DropDownButton>
<DropDownButton Content="Submit" Theme="{DynamicResource SolidDropDownButton}">
<DropDownButton.Flyout>
<MenuFlyout Placement="BottomEdgeAlignedRight">
<MenuItem Header="Submit All" />
<MenuItem Header="Submit Updated" />
</MenuFlyout>
</DropDownButton.Flyout>
</DropDownButton>
<DropDownButton Content="Submit" Theme="{DynamicResource BorderlessDropDownButton}">
<DropDownButton.Flyout>
<MenuFlyout Placement="BottomEdgeAlignedRight">
<MenuItem Header="Submit All" />
<MenuItem Header="Submit Updated" />
</MenuFlyout>
</DropDownButton.Flyout>
</DropDownButton>
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="8">
<SplitButton Content="Submit">
<SplitButton.Flyout>
<MenuFlyout Placement="BottomEdgeAlignedRight">
<MenuItem Header="Submit All" />
<MenuItem Header="Submit Updated" />
</MenuFlyout>
</SplitButton.Flyout>
</SplitButton>
<SplitButton Classes="Secondary" Content="Submit" />
<SplitButton Classes="Tertiary" Content="Submit" />
<SplitButton Classes="Success" Content="Submit" />
<SplitButton Classes="Warning" Content="Submit" />
<SplitButton Classes="Danger" Content="Submit" />
<SplitButton
Classes="Danger"
Content="Submit"
IsEnabled="False" />
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="8">
<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="Success" Content="Submit" />
<ToggleSplitButton Classes="Warning" Content="Submit" />
<ToggleSplitButton Classes="Danger" Content="Submit" />
<ToggleSplitButton
Classes="Danger"
Content="Submit"
IsEnabled="False" />
</StackPanel>
</StackPanel>
</UserControl>
</ScrollViewer>
</UserControl>

View File

@@ -10,6 +10,7 @@
<UserControl.Styles>
<Style Selector="Button">
<Setter Property="Margin" Value="8" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
</Style>
</UserControl.Styles>
<Grid

View File

@@ -8,6 +8,11 @@
d:DesignWidth="800"
mc:Ignorable="d">
<StackPanel HorizontalAlignment="Left" Spacing="10">
<StackPanel.Styles>
<Style Selector="Button">
<Setter Property="HorizontalAlignment" Value="Stretch" />
</Style>
</StackPanel.Styles>
<Button Name="openFileDialog">Open File</Button>
<Button Name="selectFolderDialog">Select Folder</Button>
<Button Name="saveFileDialog">Save File</Button>

View File

@@ -8,10 +8,17 @@
d:DesignWidth="800"
mc:Ignorable="d">
<StackPanel HorizontalAlignment="Left" Spacing="20">
<StackPanel.Styles>
<Style Selector="Button">
<Setter Property="Theme" Value="{DynamicResource SolidButton}" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
</Style>
</StackPanel.Styles>
<Button Click="InfoButton_OnClick" Content="Default" />
<Button Click="InfoButton_OnClick" Content="Information" />
<Button Click="InfoButton_OnClick" Content="Success" />
<Button Click="InfoButton_OnClick" Content="Warning" />
<Button Click="InfoButton_OnClick" Content="Error" />
<Button Click="InfoButton_OnClick" Content="Success" Classes="Success" />
<Button Click="InfoButton_OnClick" Content="Warning" Classes="Warning" />
<Button Click="InfoButton_OnClick" Content="Error" Classes="Danger" />
</StackPanel>
</UserControl>
</UserControl>

View File

@@ -87,31 +87,37 @@
Margin="0,8"
Classes="Primary"
Content="Primary"
HorizontalAlignment="Stretch"
Theme="{DynamicResource SolidButton}" />
<Button
Margin="0,8"
Classes="Secondary"
Content="Secondary"
HorizontalAlignment="Stretch"
Theme="{DynamicResource SolidButton}" />
<Button
Margin="0,8"
Classes="Tertiary"
Content="Tertiary"
HorizontalAlignment="Stretch"
Theme="{DynamicResource SolidButton}" />
<Button
Margin="0,8"
Classes="Success"
Content="Success"
HorizontalAlignment="Stretch"
Theme="{DynamicResource SolidButton}" />
<Button
Margin="0,8"
Classes="Warning"
Content="Warning"
HorizontalAlignment="Stretch"
Theme="{DynamicResource SolidButton}" />
<Button
Margin="0,8"
Classes="Danger"
Content="Danger"
HorizontalAlignment="Stretch"
Theme="{DynamicResource SolidButton}" />
</StackPanel>
<Calendar Margin="16,0" />
@@ -194,26 +200,32 @@
<StackPanel Margin="16,0">
<Button
Margin="0,8"
HorizontalAlignment="Stretch"
Classes="Primary"
Content="Primary" />
<Button
Margin="0,8"
HorizontalAlignment="Stretch"
Classes="Secondary"
Content="Secondary" />
<Button
Margin="0,8"
HorizontalAlignment="Stretch"
Classes="Tertiary"
Content="Tertiary" />
<Button
Margin="0,8"
HorizontalAlignment="Stretch"
Classes="Success"
Content="Success" />
<Button
Margin="0,8"
HorizontalAlignment="Stretch"
Classes="Warning"
Content="Warning" />
<Button
Margin="0,8"
HorizontalAlignment="Stretch"
Classes="Danger"
Content="Danger" />
</StackPanel>

View File

@@ -16,7 +16,7 @@
<RepeatButton Classes="Success">Success</RepeatButton>
<RepeatButton Classes="Warning">Warning</RepeatButton>
<RepeatButton Classes="Danger">Danger</RepeatButton>
<RepeatButton Classes="Primary" IsEnabled="False">Danger</RepeatButton>
<RepeatButton Classes="Danger" IsEnabled="False">Disabled</RepeatButton>
</StackPanel>
<TextBlock>Solid</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="20">
@@ -27,10 +27,10 @@
<RepeatButton Classes="Warning" Theme="{DynamicResource SolidRepeatButton}">Warning</RepeatButton>
<RepeatButton Classes="Danger" Theme="{DynamicResource SolidRepeatButton}">Danger</RepeatButton>
<RepeatButton
Classes="Primary"
Classes="Danger"
IsEnabled="False"
Theme="{DynamicResource SolidRepeatButton}">
Danger
Disabled
</RepeatButton>
</StackPanel>
<TextBlock>Borderless</TextBlock>
@@ -42,11 +42,16 @@
<RepeatButton Classes="Warning" Theme="{DynamicResource BorderlessRepeatButton}">Warning</RepeatButton>
<RepeatButton Classes="Danger" Theme="{DynamicResource BorderlessRepeatButton}">Danger</RepeatButton>
<RepeatButton
Classes="Primary"
Classes="Danger"
IsEnabled="False"
Theme="{DynamicResource BorderlessRepeatButton}">
Danger
Disabled
</RepeatButton>
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="8">
<RepeatButton Classes="Small">Small</RepeatButton>
<RepeatButton>Default</RepeatButton>
<RepeatButton Classes="Large">Large</RepeatButton>
</StackPanel>
</StackPanel>
</UserControl>

View File

@@ -28,18 +28,64 @@
<ToggleButton Classes="Success" IsChecked="True">Success</ToggleButton>
<ToggleButton Classes="Warning" IsChecked="True">Warning</ToggleButton>
<ToggleButton Classes="Danger" IsChecked="True">Danger</ToggleButton>
<ToggleButton Classes="Danger" IsChecked="True" IsEnabled="False">Danger</ToggleButton>
<ToggleButton
Classes="Danger"
IsChecked="True"
IsEnabled="False">
Danger
</ToggleButton>
</StackPanel>
<TextBlock Text="Toggle Button Three State" />
<StackPanel Orientation="Horizontal" Spacing="20">
<ToggleButton IsThreeState="True" IsChecked="{x:Null}">Default</ToggleButton>
<ToggleButton Classes="Primary" IsThreeState="True" IsChecked="{x:Null}">Primary</ToggleButton>
<ToggleButton Classes="Secondary" IsThreeState="True" IsChecked="{x:Null}">Secondary</ToggleButton>
<ToggleButton Classes="Tertiary" IsThreeState="True" IsChecked="{x:Null}">Tertiary</ToggleButton>
<ToggleButton Classes="Success" IsThreeState="True" IsChecked="{x:Null}">Success</ToggleButton>
<ToggleButton Classes="Warning" IsThreeState="True" IsChecked="{x:Null}">Warning</ToggleButton>
<ToggleButton Classes="Danger" IsThreeState="True" IsChecked="{x:Null}">Danger</ToggleButton>
<ToggleButton Classes="Danger" IsThreeState="True" IsChecked="{x:Null}" IsEnabled="False">Danger</ToggleButton>
<ToggleButton IsChecked="{x:Null}" IsThreeState="True">Default</ToggleButton>
<ToggleButton
Classes="Primary"
IsChecked="{x:Null}"
IsThreeState="True">
Primary
</ToggleButton>
<ToggleButton
Classes="Secondary"
IsChecked="{x:Null}"
IsThreeState="True">
Secondary
</ToggleButton>
<ToggleButton
Classes="Tertiary"
IsChecked="{x:Null}"
IsThreeState="True">
Tertiary
</ToggleButton>
<ToggleButton
Classes="Success"
IsChecked="{x:Null}"
IsThreeState="True">
Success
</ToggleButton>
<ToggleButton
Classes="Warning"
IsChecked="{x:Null}"
IsThreeState="True">
Warning
</ToggleButton>
<ToggleButton
Classes="Danger"
IsChecked="{x:Null}"
IsThreeState="True">
Danger
</ToggleButton>
<ToggleButton
Classes="Danger"
IsChecked="{x:Null}"
IsEnabled="False"
IsThreeState="True">
Danger
</ToggleButton>
</StackPanel>
<StackPanel Orientation="Horizontal">
<ToggleButton Classes="Small" IsThreeState="True">Small</ToggleButton>
<ToggleButton IsThreeState="True">Default</ToggleButton>
<ToggleButton Classes="Large" IsThreeState="True">Large</ToggleButton>
</StackPanel>
</StackPanel>
</UserControl>