Skip to content

Commit

Permalink
Merge pull request #7422 from robloo/robloo-SplitButton
Browse files Browse the repository at this point in the history 
Add SplitButton & ToggleSplitButton
  • Loading branch information
@maxkatz6
maxkatz6 authored Feb 8, 2022
2 parents 7f89d4a + 0757827 commit e11c6c0
Show file tree
Hide file tree
Showing 16 changed files with 1,420 additions and 58 deletions.
4 changes: 2 additions & 2 deletions samples/ControlCatalog/MainView.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@
<TabItem Header="Border">
<pages:BorderPage />
</TabItem>
<TabItem Header="Button">
<pages:ButtonPage />
<TabItem Header="Buttons">
<pages:ButtonsPage />
</TabItem>
<TabItem Header="ButtonSpinner">
<pages:ButtonSpinnerPage />
Expand Down
45 changes: 0 additions & 45 deletions samples/ControlCatalog/Pages/ButtonPage.xaml
View file

This file was deleted.

224 changes: 224 additions & 0 deletions samples/ControlCatalog/Pages/ButtonsPage.xaml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,224 @@
<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>
</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>

<!-- 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">
<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>
4 changes: 2 additions & 2 deletions ...s/ControlCatalog/Pages/ButtonPage.xaml.cs → .../ControlCatalog/Pages/ButtonsPage.xaml.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@

namespace ControlCatalog.Pages
{
public class ButtonPage : UserControl
public class ButtonsPage : UserControl
{
private int repeatButtonClickCount = 0;

public ButtonPage()
public ButtonsPage()
{
InitializeComponent();

Expand Down
2 changes: 1 addition & 1 deletion samples/ControlCatalog/Pages/ToggleSwitchPage.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
</StackPanel>
</Border>

<TextBlock Text="headered ToggleSwitch" Classes="header"/>
<TextBlock Text="Headered ToggleSwitch" Classes="header"/>

<Border Classes="Thin">
<StackPanel>
Expand Down
6 changes: 3 additions & 3 deletions src/Avalonia.Controls/Button.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,8 +85,8 @@ public class Button : ContentControl, ICommandSource
/// <summary>
/// Defines the <see cref="Flyout"/> property
/// </summary>
public static readonly StyledProperty<FlyoutBase> FlyoutProperty =
AvaloniaProperty.Register<Button, FlyoutBase>(nameof(Flyout));
public static readonly StyledProperty<FlyoutBase?> FlyoutProperty =
AvaloniaProperty.Register<Button, FlyoutBase?>(nameof(Flyout));

private ICommand? _command;
private bool _commandCanExecute = true;
Expand Down Expand Up @@ -186,7 +186,7 @@ public bool IsPressed
/// <summary>
/// Gets or sets the Flyout that should be shown with this button.
/// </summary>
public FlyoutBase Flyout
public FlyoutBase? Flyout
{
get => GetValue(FlyoutProperty);
set => SetValue(FlyoutProperty, value);
Expand Down
Loading

0 comments on commit e11c6c0

Please sign in to comment.