| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255 |
- <UserControl xmlns="https://github.com/avaloniaui"
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- x:Class="ControlCatalog.Pages.ButtonsPage">
- <UserControl.Resources>
- <MenuFlyout x:Key="SharedMenuFlyout"
- Placement="Bottom">
- <MenuItem Header="Item 1">
- <MenuItem Header="Subitem 1" />
- <MenuItem Header="Subitem 2" />
- <MenuItem Header="Subitem 3" />
- </MenuItem>
- <MenuItem Header="Item 2"
- InputGesture="Ctrl+A" />
- <MenuItem Header="Item 3" />
- </MenuFlyout>
- </UserControl.Resources>
-
- <UserControl.Styles >
- <Style Selector="Border.header-border">
- <Setter Property="Background">
- <Setter.Value>
- <SolidColorBrush Color="Gray" Opacity="0.5" />
- </Setter.Value>
- </Setter>
- <Setter Property="BorderBrush" Value="Gray" />
- <Setter Property="BorderThickness" Value="0.5" />
- <Setter Property="CornerRadius" Value="5,5,0,0" />
- <Setter Property="MaxWidth" Value="450" />
- <Setter Property="Padding" Value="10" />
- </Style>
-
- <Style Selector="TextBlock.header">
- <Setter Property="FontSize" Value="18" />
- <Setter Property="FontWeight" Value="Bold" />
- </Style>
- <Style Selector="Border.thin">
- <Setter Property="BorderBrush" Value="Gray" />
- <Setter Property="BorderThickness" Value="0.5" />
- <Setter Property="CornerRadius" Value="0,0,5,5" />
- <Setter Property="Margin" Value="0,0,0,15" />
- </Style>
- </UserControl.Styles>
- <!-- Styles and overall page design based on AcrylicPage -->
- <StackPanel Orientation="Vertical"
- Width="450">
- <!-- Button -->
- <Border Classes="header-border">
- <StackPanel Orientation="Vertical"
- Spacing="4">
- <TextBlock Text="Button" Classes="header" />
- <TextBlock TextWrapping="Wrap">A standard button control</TextBlock>
- </StackPanel>
- </Border>
- <Border Classes="thin"
- Padding="15">
- <StackPanel Orientation="Horizontal"
- HorizontalAlignment="Center"
- Spacing="10">
- <StackPanel Orientation="Vertical"
- Spacing="8"
- Width="200">
- <Button>Standard _XAML Button</Button>
- <Button Foreground="White">Foreground</Button>
- <Button Background="{DynamicResource SystemAccentColor}">Background</Button>
- <Button IsEnabled="False">Disabled</Button>
- <Button Content="Re-themed">
- <Button.Styles>
- <Style>
- <Style.Resources>
- <SolidColorBrush x:Key="ThemeBorderMidBrush">Red</SolidColorBrush>
- <SolidColorBrush x:Key="ThemeControlHighBrush">DarkRed</SolidColorBrush>
- <SolidColorBrush x:Key="ButtonBorderBrush">Red</SolidColorBrush>
- <SolidColorBrush x:Key="ButtonBackground">DarkRed</SolidColorBrush>
- <SolidColorBrush x:Key="ButtonBackgroundPointerOver">Red</SolidColorBrush>
- <SolidColorBrush x:Key="ButtonBackgroundPressed">OrangeRed</SolidColorBrush>
- <SolidColorBrush x:Key="ButtonForeground">White</SolidColorBrush>
- <SolidColorBrush x:Key="ButtonForegroundPointerOver">Black</SolidColorBrush>
- <SolidColorBrush x:Key="ButtonForegroundPressed">Black</SolidColorBrush>
- </Style.Resources>
- </Style>
- </Button.Styles>
- </Button>
- <Button Classes="accent">Accent</Button>
- </StackPanel>
- <StackPanel Orientation="Vertical"
- Spacing="8"
- Width="200">
- <Button BorderThickness="0">No Border</Button>
- <Button BorderBrush="{DynamicResource SystemAccentColor}">Border Color</Button>
- <Button BorderBrush="{DynamicResource SystemAccentColor}"
- BorderThickness="4">Thick Border</Button>
- <Button BorderBrush="{DynamicResource SystemAccentColor}"
- BorderThickness="4"
- IsEnabled="False">Disabled</Button>
- <Button BorderBrush="{DynamicResource SystemAccentColor}"
- KeyboardNavigation.IsTabStop="False">IsTabStop=False</Button>
- </StackPanel>
- </StackPanel>
- </Border>
- <!-- ToggleButton -->
- <Border Classes="header-border">
- <StackPanel Orientation="Vertical"
- Spacing="4">
- <TextBlock Text="ToggleButton"
- Classes="header" />
- <TextBlock TextWrapping="Wrap">A button control with multiple states: checked, unchecked or indeterminate.</TextBlock>
- </StackPanel>
- </Border>
- <Border Classes="thin"
- Padding="15">
- <StackPanel Orientation="Vertical"
- Spacing="8">
- <ToggleButton Content="Toggle Button" />
- </StackPanel>
- </Border>
- <!-- RepeatButton -->
- <Border Classes="header-border">
- <StackPanel Orientation="Vertical"
- Spacing="4">
- <TextBlock Text="RepeatButton"
- Classes="header" />
- <TextBlock TextWrapping="Wrap">A button control that raises its Click event repeatedly when it is pressed and held.</TextBlock>
- </StackPanel>
- </Border>
- <Border Classes="thin"
- Padding="15">
- <StackPanel Orientation="Vertical"
- Spacing="8">
- <RepeatButton Name="RepeatButton">
- <TextBlock Name="RepeatButtonTextBlock"
- Text="Repeat Button: 0" />
- </RepeatButton>
- </StackPanel>
- </Border>
- <!-- DropDownButton -->
- <Border Classes="header-border">
- <StackPanel Orientation="Vertical"
- Spacing="4">
- <TextBlock Text="DropDownButton"
- Classes="header" />
- <TextBlock TextWrapping="Wrap">A button with an added drop-down chevron to visually indicate it has a flyout with additional actions.</TextBlock>
- </StackPanel>
- </Border>
- <Border Classes="thin"
- Padding="15">
- <StackPanel Orientation="Vertical"
- Spacing="8">
- <DropDownButton Flyout="{StaticResource SharedMenuFlyout}">
- <TextBlock Text="Drop Down Button" />
- </DropDownButton>
- <DropDownButton Padding="0,0,8,0">
- <Border Background="Teal"
- HorizontalAlignment="Stretch"
- VerticalAlignment="Stretch"
- Height="32"
- Width="32" />
- </DropDownButton>
- <DropDownButton IsEnabled="False">Disabled</DropDownButton>
- <DropDownButton />
- </StackPanel>
- </Border>
- <!-- SplitButton -->
- <Border Classes="header-border">
- <StackPanel Orientation="Vertical"
- Spacing="4">
- <TextBlock Text="SplitButton"
- Classes="header" />
- <TextBlock TextWrapping="Wrap">A button with primary and secondary parts that can each be pressed separately. The primary part behaves like a Button and the secondary part opens a flyout.</TextBlock>
- </StackPanel>
- </Border>
- <Border Classes="thin"
- Padding="15">
- <StackPanel Orientation="Vertical"
- Spacing="8">
- <SplitButton Flyout="{StaticResource SharedMenuFlyout}">
- <TextBlock Text="Content" />
- </SplitButton>
- <SplitButton IsEnabled="False"
- Flyout="{StaticResource SharedMenuFlyout}">
- <TextBlock Text="Disabled" />
- </SplitButton>
- <SplitButton Flyout="{StaticResource SharedMenuFlyout}"
- Content="Re-themed"
- Foreground="White">
- <SplitButton.Styles>
- <Style>
- <Style.Resources>
- <x:Double x:Key="SplitButtonSeparatorWidth">1.5</x:Double>
- <Thickness x:Key="SplitButtonBorderThemeThickness">2</Thickness>
- <SolidColorBrush x:Key="SplitButtonBorderBrush">Red</SolidColorBrush>
- <SolidColorBrush x:Key="SplitButtonBorderBrushPointerOver">Red</SolidColorBrush>
- <SolidColorBrush x:Key="SplitButtonBorderBrushPressed">Red</SolidColorBrush>
- <SolidColorBrush x:Key="SplitButtonBackground">DarkRed</SolidColorBrush>
- <SolidColorBrush x:Key="SplitButtonBackgroundPointerOver">Red</SolidColorBrush>
- <SolidColorBrush x:Key="SplitButtonBackgroundPressed">OrangeRed</SolidColorBrush>
- <SolidColorBrush x:Key="SplitButtonForeground">White</SolidColorBrush>
- <SolidColorBrush x:Key="SplitButtonForegroundPointerOver">Black</SolidColorBrush>
- <SolidColorBrush x:Key="SplitButtonForegroundPressed">Black</SolidColorBrush>
- </Style.Resources>
- </Style>
- </SplitButton.Styles>
- </SplitButton>
- </StackPanel>
- </Border>
- <!-- ToggleSplitButton -->
- <Border Classes="header-border">
- <StackPanel Orientation="Vertical"
- Spacing="4">
- <TextBlock Text="ToggleSplitButton"
- Classes="header" />
- <TextBlock TextWrapping="Wrap">A button with primary and secondary parts that can each be pressed separately. The primary part behaves like a ToggleButton with two states and the secondary part opens a flyout.</TextBlock>
- </StackPanel>
- </Border>
- <Border Classes="thin"
- Padding="15">
- <StackPanel Orientation="Vertical"
- Spacing="8">
- <ToggleSplitButton Flyout="{StaticResource SharedMenuFlyout}">
- <TextBlock Text="Content" />
- </ToggleSplitButton>
- <ToggleSplitButton IsChecked="True"
- Flyout="{StaticResource SharedMenuFlyout}">
- <TextBlock Text="Content" />
- </ToggleSplitButton>
- <ToggleSplitButton IsChecked="True"
- IsEnabled="False"
- Flyout="{StaticResource SharedMenuFlyout}">
- <TextBlock Text="Disabled" />
- </ToggleSplitButton>
- </StackPanel>
- </Border>
- </StackPanel>
- </UserControl>
|