236 lines
17 KiB
XML
236 lines
17 KiB
XML
<UserControl x:Class="AntDesignWPFDemo.Views.ButtonView"
|
|
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
|
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"
|
|
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
|
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
|
mc:Ignorable="d">
|
|
<ScrollViewer>
|
|
<Grid Margin="16,0">
|
|
<Grid.RowDefinitions>
|
|
<RowDefinition Height="Auto" />
|
|
<RowDefinition Height="*" />
|
|
</Grid.RowDefinitions>
|
|
<StackPanel>
|
|
<Label Content="Button" Style="{StaticResource Ant.H1}" />
|
|
<TextBlock Style="{StaticResource Ant.P}" Text="To trigger an operation." />
|
|
|
|
<Label Content="When To Use" Style="{StaticResource Ant.H2}" />
|
|
<TextBlock Style="{StaticResource Ant.P}" Text="A button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic." />
|
|
|
|
<Label Content="Examples" Style="{StaticResource Ant.H2}" />
|
|
</StackPanel>
|
|
<Grid Grid.Row="1">
|
|
<Grid.Resources>
|
|
<Style TargetType="antd:AntButton">
|
|
<Setter Property="Margin" Value="0,0,8,12" />
|
|
</Style>
|
|
</Grid.Resources>
|
|
<Grid.ColumnDefinitions>
|
|
<ColumnDefinition />
|
|
<ColumnDefinition />
|
|
</Grid.ColumnDefinitions>
|
|
<StackPanel Margin="8,0">
|
|
<antd:CodeBox Title="Type">
|
|
<antd:CodeBox.Description>There are `solid` button, `outlined` button, `dashed` button,`text` button,`link` button and `filled` button in antd.</antd:CodeBox.Description>
|
|
<antd:CodeBox.Content>
|
|
<WrapPanel Orientation="Horizontal">
|
|
<antd:AntButton Content="Solid" Variant="Solid" />
|
|
<antd:AntButton Content="Outlined" Variant="Outlined" />
|
|
<antd:AntButton Content="Dashed" Variant="Dashed" />
|
|
<antd:AntButton Content="Filled" Variant="Filled" />
|
|
<antd:AntButton Content="Text" Variant="Text" />
|
|
<antd:AntButton Content="Link" Variant="Link" />
|
|
</WrapPanel>
|
|
</antd:CodeBox.Content>
|
|
<antd:CodeBox.Code><ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" />\n\n
|
|
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
|
|
<WrapPanel Orientation="Horizontal">\n
|
|
\t<antd:Button Type="Primary" Content="Primary" />\n
|
|
\t<antd:Button Content="Default" />\n
|
|
\t<antd:Button Type="Dashed" Content="Dashed" />\n
|
|
\t<antd:Button Type="Danger" Content="Danger" />\n
|
|
</WrapPanel></antd:CodeBox.Code>
|
|
</antd:CodeBox>
|
|
<antd:CodeBox Title="Size">
|
|
<antd:CodeBox.Description>Ant Design supports a default button size as well as a large and small size.\n
|
|
If a large or small button is desired, set the `Size` property to either `large` or `small` respectively. Omit the `Size` property for a button with the default size.</antd:CodeBox.Description>
|
|
<antd:CodeBox.Content>
|
|
<WrapPanel Orientation="Horizontal">
|
|
<antd:AntButton Content="Primary" Variant="Solid" />
|
|
<antd:AntButton Content="Default" Size="Large" />
|
|
<antd:AntButton Content="Dashed" Variant="Dashed" />
|
|
<antd:AntButton Content="Danger" Variant="Outlined" />
|
|
<antd:AntButton Icon="search"
|
|
Shape="Circle"
|
|
Variant="Solid" />
|
|
<antd:AntButton Content="Search"
|
|
Icon="search"
|
|
Variant="Solid" />
|
|
</WrapPanel>
|
|
</antd:CodeBox.Content>
|
|
<antd:CodeBox.Code><ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" />\n\n
|
|
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
|
|
<WrapPanel Orientation="Horizontal">\n
|
|
\t<antd:Button Type="Primary" Content="Primary" />\n
|
|
\t<antd:Button Content="Default" Size="Large" />\n
|
|
\t<antd:Button Type="Dashed" Content="Dashed" />\n
|
|
\t<antd:Button Type="Danger" Content="Danger" />\n
|
|
\t<antd:Button Type="Primary" Icon="search" Shape="Circle" />\n
|
|
\t<antd:Button Type="Primary" Icon="search" Content="Search" />\n
|
|
</WrapPanel></antd:CodeBox.Code>
|
|
</antd:CodeBox>
|
|
<antd:CodeBox Title="Loading">
|
|
<antd:CodeBox.Description>A loading indicator can be added to a button by setting the `Loading` property on the `Button`.</antd:CodeBox.Description>
|
|
<antd:CodeBox.Content>
|
|
<WrapPanel Orientation="Horizontal">
|
|
<antd:AntButton Content="Loading"
|
|
Loading="True"
|
|
Variant="Solid" />
|
|
<antd:AntButton Content="Loading"
|
|
Loading="True"
|
|
Size="small"
|
|
Variant="Solid" />
|
|
<antd:AntButton x:Name="Click1"
|
|
Content="Click Me!"
|
|
Loading="{Binding Loading1}"
|
|
Variant="Solid" />
|
|
<antd:AntButton x:Name="Click2"
|
|
Content="Click Me!"
|
|
Icon="poweroff"
|
|
Loading="{Binding Loading2}"
|
|
Variant="Solid" />
|
|
<antd:AntButton Loading="True" Shape="Circle" />
|
|
<antd:AntButton Loading="True"
|
|
Shape="Circle"
|
|
Variant="Solid" />
|
|
</WrapPanel>
|
|
</antd:CodeBox.Content>
|
|
<antd:CodeBox.Code><ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" />\n\n
|
|
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
|
|
<WrapPanel Orientation="Horizontal">\n
|
|
\t<antd:Button Type="Primary" Content="Loading" Loading="True" />\n
|
|
\t<antd:Button Type="Primary" Content="Loading" Loading="True" Size="small" />\n
|
|
\t<antd:Button x:Name="Click1" Type="Primary" Content="Click Me!" Loading="{Binding Loading1}" />\n
|
|
\t<antd:Button x:Name="Click2" Type="Primary" Content="Click Me!" Icon="poweroff" Loading="{Binding Loading2}" />\n
|
|
\t<antd:Button Shape="Circle" Loading="True" />\n
|
|
\t<antd:Button Type="Primary" Shape="Circle" Loading="True" />\n
|
|
</WrapPanel></antd:CodeBox.Code>
|
|
</antd:CodeBox>
|
|
</StackPanel>
|
|
<StackPanel Grid.Column="1" Margin="8,0">
|
|
<antd:CodeBox Title="Icon">
|
|
<antd:CodeBox.Description>`Button` components can contain an `Icon`. This is done by setting the `icon` property or placing an `Icon` component within the `Button`\n
|
|
If you want specific control over the positioning and placement of the Icon, then that should be done by placing the `Icon` component within the `Button` rather than using the `icon` property.</antd:CodeBox.Description>
|
|
<antd:CodeBox.Content>
|
|
<WrapPanel Orientation="Horizontal">
|
|
<antd:AntButton Icon="search"
|
|
Shape="Circle"
|
|
Variant="Solid" />
|
|
<antd:AntButton Content="Search"
|
|
Icon="search"
|
|
Variant="Solid" />
|
|
<antd:AntButton Icon="search" Shape="Circle" />
|
|
<antd:AntButton Content="Search" Icon="search" />
|
|
<antd:AntButton Icon="search"
|
|
Shape="Circle"
|
|
Variant="Dashed" />
|
|
<antd:AntButton Content="Search"
|
|
Icon="search"
|
|
Variant="Dashed" />
|
|
<antd:AntButton Icon="search"
|
|
Shape="Circle"
|
|
Variant="Outlined" />
|
|
<antd:AntButton Content="Search"
|
|
Icon="search"
|
|
Variant="Outlined" />
|
|
</WrapPanel>
|
|
</antd:CodeBox.Content>
|
|
<antd:CodeBox.Code><ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" />\n\n
|
|
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
|
|
<WrapPanel Orientation="Horizontal">\n
|
|
\t<antd:Button Type="Primary" Icon="search" Shape="Circle" />\n
|
|
\t<antd:Button Type="Primary" Icon="search" Content="Search" />\n
|
|
\t<antd:Button Icon="search" Shape="Circle" />\n
|
|
\t<antd:Button Icon="search" Content="Search" />\n
|
|
\t<antd:Button Type="Dashed" Icon="search" Shape="Circle" />\n
|
|
\t<antd:Button Type="Dashed" Icon="search" Content="Search" />\n
|
|
\t<antd:Button Type="Danger" Icon="search" Shape="Circle" />\n
|
|
\t<antd:Button Type="Danger" Icon="search" Content="Search" />\n
|
|
</WrapPanel></antd:CodeBox.Code>
|
|
</antd:CodeBox>
|
|
<antd:CodeBox Title="Disabled">
|
|
<antd:CodeBox.Description>To mark a button as disabled, set the `IsEnabled` property to `False`</antd:CodeBox.Description>
|
|
<antd:CodeBox.Content>
|
|
<WrapPanel Orientation="Horizontal">
|
|
<antd:AntButton Content="Primary" Variant="Solid" />
|
|
<antd:AntButton Content="Primary(disabled)"
|
|
IsEnabled="False"
|
|
Variant="Solid" />
|
|
<antd:AntButton Content="Default" />
|
|
<antd:AntButton Content="Default(disabled)" IsEnabled="False" />
|
|
<antd:AntButton Content="Dashed" Variant="Dashed" />
|
|
<antd:AntButton Content="Dashed(disabled)"
|
|
IsEnabled="False"
|
|
Variant="Dashed" />
|
|
<StackPanel Background="#BEC8C8">
|
|
<WrapPanel Margin="8,8,8,0">
|
|
<antd:AntButton Content="Ghost" Ghost="True" />
|
|
<antd:AntButton Content="Ghost(disabled)"
|
|
Ghost="True"
|
|
IsEnabled="False" />
|
|
</WrapPanel>
|
|
</StackPanel>
|
|
</WrapPanel>
|
|
</antd:CodeBox.Content>
|
|
<antd:CodeBox.Code><ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" />\n\n
|
|
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
|
|
<WrapPanel Orientation="Horizontal">\n
|
|
\t<antd:Button Type="Primary" Content="Primary" />\n
|
|
\t<antd:Button Type="Primary" Content="Primary(disabled)" IsEnabled="False" />\n
|
|
\t<antd:Button Content="Default" />\n
|
|
\t<antd:Button Content="Default(disabled)" IsEnabled="False" />\n
|
|
\t<antd:Button Type="Dashed" Content="Dashed" />\n
|
|
\t<antd:Button Type="Dashed" Content="Dashed(disabled)" IsEnabled="False" />\n
|
|
\t<StackPanel Background="#BEC8C8">\n
|
|
\t\t<WrapPanel Margin="8 8 8 0">\n
|
|
\t\t\t<antd:Button Content="Ghost" Ghost="True" />\n
|
|
\t\t\t<antd:Button Content="Ghost(disabled)" Ghost="True" IsEnabled="False" />\n
|
|
\t\t</WrapPanel>\n
|
|
\t</StackPanel>\n
|
|
</WrapPanel></antd:CodeBox.Code>
|
|
</antd:CodeBox>
|
|
<antd:CodeBox Title="Ghost Button">
|
|
<antd:CodeBox.Description>`Ghost` property will make button's background transparent, it is common used in colored background.</antd:CodeBox.Description>
|
|
<antd:CodeBox.Content>
|
|
<StackPanel Background="#BEC8C8">
|
|
<WrapPanel Margin="16,26,16,16" Orientation="Horizontal">
|
|
<antd:AntButton Content="Primary"
|
|
Ghost="True"
|
|
Variant="Solid" />
|
|
<antd:AntButton Content="Default" Ghost="True" />
|
|
<antd:AntButton Content="Dashed"
|
|
Ghost="True"
|
|
Variant="Dashed" />
|
|
<antd:AntButton Content="Danger"
|
|
Ghost="True"
|
|
Variant="Outlined" />
|
|
</WrapPanel>
|
|
</StackPanel>
|
|
</antd:CodeBox.Content>
|
|
<antd:CodeBox.Code><ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" />\n\n
|
|
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
|
|
<StackPanel Background="#BEC8C8">\n
|
|
\t<WrapPanel Margin="16 26 16 16" Orientation="Horizontal">\n
|
|
\t\t<antd:Button Type="Primary" Content="Primary" Ghost="True" />\n
|
|
\t\t<antd:Button Content="Default" Ghost="True" />\n
|
|
\t\t<antd:Button Type="Dashed" Content="Dashed" Ghost="True" />\n
|
|
\t\t<antd:Button Type="Danger" Content="Danger" Ghost="True" />\n
|
|
\t</WrapPanel>
|
|
</StackPanel></antd:CodeBox.Code>
|
|
</antd:CodeBox>
|
|
</StackPanel>
|
|
</Grid>
|
|
</Grid>
|
|
</ScrollViewer>
|
|
</UserControl> |