tsai
/
Avalonia
mirror of https://github.com/AvaloniaUI/Avalonia.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Integrate all button controls within a redesigned ButtonsPage

pull/7422/head
robloo 5 years ago
parent
8a529a6768
commit
aaf5282ebd
7 changed files with 206 additions and 111 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      samples/ControlCatalog/MainView.xaml
  2. 45
      samples/ControlCatalog/Pages/ButtonPage.xaml
  3. 201
      samples/ControlCatalog/Pages/ButtonsPage.xaml
  4. 4
      samples/ControlCatalog/Pages/ButtonsPage.xaml.cs
  5. 40
      samples/ControlCatalog/Pages/SplitButtonPage.xaml
  6. 18
      samples/ControlCatalog/Pages/SplitButtonPage.xaml.cs
  7. 2
      samples/ControlCatalog/Pages/ToggleSwitchPage.xaml

7
samples/ControlCatalog/MainView.xaml
View File

@ -22,8 +22,8 @@
<TabItem Header="Border"> <TabItem Header="Border">
<pages:BorderPage /> <pages:BorderPage />
</TabItem> </TabItem>
<TabItem Header="Button"> <TabItem Header="Buttons">
<pages:ButtonPage /> <pages:ButtonsPage />
</TabItem> </TabItem>
<TabItem Header="ButtonSpinner"> <TabItem Header="ButtonSpinner">
<pages:ButtonSpinnerPage /> <pages:ButtonSpinnerPage />
@ -121,9 +121,6 @@
<TabItem Header="Slider"> <TabItem Header="Slider">
<pages:SliderPage /> <pages:SliderPage />
</TabItem> </TabItem>
<TabItem Header="SplitButton">
<pages:SplitButtonPage />
</TabItem>
<TabItem Header="SplitView"> <TabItem Header="SplitView">
<pages:SplitViewPage /> <pages:SplitViewPage />
</TabItem> </TabItem>

45
samples/ControlCatalog/Pages/ButtonPage.xaml
View File

@ -1,45 +0,0 @@
<UserControl xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="ControlCatalog.Pages.ButtonPage">
<StackPanel Orientation="Vertical" Spacing="4">
<TextBlock Classes="h2">A button control</TextBlock>
<StackPanel Orientation="Horizontal"
Margin="0,16,0,0"
HorizontalAlignment="Center"
Spacing="16">
<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>
</Style.Resources>
</Style>
</Button.Styles>
</Button>
<RepeatButton Name="RepeatButton">
<TextBlock Name="RepeatButtonTextBlock" Text="Repeat Button: 0" />
</RepeatButton>
<ToggleButton Content="Toggle Button"/>
</StackPanel>
<StackPanel Orientation="Vertical" Spacing="8" Width="150">
<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>
</StackPanel>
</UserControl>

201
samples/ControlCatalog/Pages/ButtonsPage.xaml
View File

@ -0,0 +1,201 @@
<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>
</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>
</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
samples/ControlCatalog/Pages/ButtonPage.xaml.cs → samples/ControlCatalog/Pages/ButtonsPage.xaml.cs
View File

@ -3,11 +3,11 @@ using Avalonia.Markup.Xaml;
namespace ControlCatalog.Pages namespace ControlCatalog.Pages
{ {
public class ButtonPage : UserControl public class ButtonsPage : UserControl
{ {
private int repeatButtonClickCount = 0; private int repeatButtonClickCount = 0;
public ButtonPage() public ButtonsPage()
{ {
InitializeComponent(); InitializeComponent();

40
samples/ControlCatalog/Pages/SplitButtonPage.xaml
View File

@ -1,40 +0,0 @@
<UserControl xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="ControlCatalog.Pages.SplitButtonPage">
<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>
<StackPanel Orientation="Vertical" Spacing="4">
<SplitButton Flyout="{StaticResource SharedMenuFlyout}">
<TextBlock Text="Content" />
</SplitButton>
<SplitButton IsEnabled="False"
Flyout="{StaticResource SharedMenuFlyout}">
<TextBlock Text="Content" />
</SplitButton>
<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="Content" />
</ToggleSplitButton>
</StackPanel>
</UserControl>

18
samples/ControlCatalog/Pages/SplitButtonPage.xaml.cs
View File

@ -1,18 +0,0 @@
using Avalonia.Controls;
using Avalonia.Markup.Xaml;
namespace ControlCatalog.Pages
{
public class SplitButtonPage : UserControl
{
public SplitButtonPage()
{
InitializeComponent();
}
private void InitializeComponent()
{
AvaloniaXamlLoader.Load(this);
}
}
}

2
samples/ControlCatalog/Pages/ToggleSwitchPage.xaml
View File

@ -11,7 +11,7 @@
</StackPanel> </StackPanel>
</Border> </Border>
<TextBlock Text="headered ToggleSwitch" Classes="header"/> <TextBlock Text="Headered ToggleSwitch" Classes="header"/>
<Border Classes="Thin"> <Border Classes="Thin">
<StackPanel> <StackPanel>

Write Preview
Loading…
Cancel
Save