220 lines
15 KiB
Plaintext
220 lines
15 KiB
Plaintext
|
<UserControl x:Class="AntdWpfDemo.Views.ButtonView"
|
||
|
|
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
||
|
|
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"
|
||
|
|
xmlns:antd="https://github.com/ShrlAlgo/AntdWpf"
|
||
|
|
|
||
|
|
mc:Ignorable="d"
|
||
|
|
d:DesignHeight="600"
|
||
|
|
d:DesignWidth="930">
|
||
|
|
<ScrollViewer>
|
||
|
|
<Grid Margin="16 0">
|
||
|
|
<Grid.RowDefinitions>
|
||
|
|
<RowDefinition Height="Auto" />
|
||
|
|
<RowDefinition Height="*" />
|
||
|
|
</Grid.RowDefinitions>
|
||
|
|
<StackPanel>
|
||
|
|
<Label Style="{StaticResource Ant.H1}" Content="Button" />
|
||
|
|
<TextBlock Style="{StaticResource Ant.P}" Text="To trigger an operation." />
|
||
|
|
|
||
|
|
<Label Style="{StaticResource Ant.H2}" Content="When To Use" />
|
||
|
|
<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 Style="{StaticResource Ant.H2}" Content="Examples" />
|
||
|
|
</StackPanel>
|
||
|
|
<Grid Grid.Row="1">
|
||
|
|
<Grid.Resources>
|
||
|
|
<Style TargetType="antd:Button">
|
||
|
|
<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 `primary` button, `default` button, `dashed` button and `danger` button in antd.
|
||
|
|
</antd:CodeBox.Description>
|
||
|
|
<antd:CodeBox.Content>
|
||
|
|
<WrapPanel Orientation="Horizontal">
|
||
|
|
<antd:Button Type="Primary" Content="Primary" />
|
||
|
|
<antd:Button Content="Default" />
|
||
|
|
<antd:Button Type="Dashed" Content="Dashed" />
|
||
|
|
<antd:Button Type="Danger" Content="Danger" />
|
||
|
|
</WrapPanel>
|
||
|
|
</antd:CodeBox.Content>
|
||
|
|
<antd:CodeBox.Code>
|
||
|
|
<ResourceDictionary Source="pack://application:,,,/AntdWpf;component/Themes/Theme.xaml" />\n\n
|
||
|
|
xmlns:antd="https://github.com/ShrlAlgo/AntdWpf"\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:Button Type="Primary" Content="Primary" />
|
||
|
|
<antd:Button Content="Default" Size="Large" />
|
||
|
|
<antd:Button Type="Dashed" Content="Dashed" />
|
||
|
|
<antd:Button Type="Danger" Content="Danger" />
|
||
|
|
<antd:Button Type="Primary" Icon="search" Shape="Circle" />
|
||
|
|
<antd:Button Type="Primary" Icon="search" Content="Search" />
|
||
|
|
</WrapPanel>
|
||
|
|
</antd:CodeBox.Content>
|
||
|
|
<antd:CodeBox.Code>
|
||
|
|
<ResourceDictionary Source="pack://application:,,,/AntdWpf;component/Themes/Theme.xaml" />\n\n
|
||
|
|
xmlns:antd="https://github.com/ShrlAlgo/AntdWpf"\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:Button Type="Primary" Content="Loading" Loading="True" />
|
||
|
|
<antd:Button Type="Primary" Content="Loading" Loading="True" Size="small" />
|
||
|
|
<antd:Button x:Name="Click1" Type="Primary" Content="Click Me!" Loading="{Binding Loading1}" />
|
||
|
|
<antd:Button x:Name="Click2" Type="Primary" Content="Click Me!" Icon="poweroff" Loading="{Binding Loading2}" />
|
||
|
|
<antd:Button Shape="Circle" Loading="True" />
|
||
|
|
<antd:Button Type="Primary" Shape="Circle" Loading="True" />
|
||
|
|
</WrapPanel>
|
||
|
|
</antd:CodeBox.Content>
|
||
|
|
<antd:CodeBox.Code>
|
||
|
|
<ResourceDictionary Source="pack://application:,,,/AntdWpf;component/Themes/Theme.xaml" />\n\n
|
||
|
|
xmlns:antd="https://github.com/ShrlAlgo/AntdWpf"\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:Button Type="Primary" Icon="search" Shape="Circle" />
|
||
|
|
<antd:Button Type="Primary" Icon="search" Content="Search" />
|
||
|
|
<antd:Button Icon="search" Shape="Circle" />
|
||
|
|
<antd:Button Icon="search" Content="Search" />
|
||
|
|
<antd:Button Type="Dashed" Icon="search" Shape="Circle" />
|
||
|
|
<antd:Button Type="Dashed" Icon="search" Content="Search" />
|
||
|
|
<antd:Button Type="Danger" Icon="search" Shape="Circle" />
|
||
|
|
<antd:Button Type="Danger" Icon="search" Content="Search" />
|
||
|
|
</WrapPanel>
|
||
|
|
</antd:CodeBox.Content>
|
||
|
|
<antd:CodeBox.Code>
|
||
|
|
<ResourceDictionary Source="pack://application:,,,/AntdWpf;component/Themes/Theme.xaml" />\n\n
|
||
|
|
xmlns:antd="https://github.com/ShrlAlgo/AntdWpf"\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:Button Type="Primary" Content="Primary" />
|
||
|
|
<antd:Button Type="Primary" Content="Primary(disabled)" IsEnabled="False" />
|
||
|
|
<antd:Button Content="Default" />
|
||
|
|
<antd:Button Content="Default(disabled)" IsEnabled="False" />
|
||
|
|
<antd:Button Type="Dashed" Content="Dashed" />
|
||
|
|
<antd:Button Type="Dashed" Content="Dashed(disabled)" IsEnabled="False" />
|
||
|
|
<StackPanel Background="#BEC8C8">
|
||
|
|
<WrapPanel Margin="8 8 8 0">
|
||
|
|
<antd:Button Content="Ghost" Ghost="True" />
|
||
|
|
<antd:Button Content="Ghost(disabled)" Ghost="True" IsEnabled="False" />
|
||
|
|
</WrapPanel>
|
||
|
|
</StackPanel>
|
||
|
|
</WrapPanel>
|
||
|
|
</antd:CodeBox.Content>
|
||
|
|
<antd:CodeBox.Code>
|
||
|
|
<ResourceDictionary Source="pack://application:,,,/AntdWpf;component/Themes/Theme.xaml" />\n\n
|
||
|
|
xmlns:antd="https://github.com/ShrlAlgo/AntdWpf"\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:Button Type="Primary" Content="Primary" Ghost="True" />
|
||
|
|
<antd:Button Content="Default" Ghost="True" />
|
||
|
|
<antd:Button Type="Dashed" Content="Dashed" Ghost="True" />
|
||
|
|
<antd:Button Type="Danger" Content="Danger" Ghost="True" />
|
||
|
|
</WrapPanel>
|
||
|
|
</StackPanel>
|
||
|
|
</antd:CodeBox.Content>
|
||
|
|
<antd:CodeBox.Code>
|
||
|
|
<ResourceDictionary Source="pack://application:,,,/AntdWpf;component/Themes/Theme.xaml" />\n\n
|
||
|
|
xmlns:antd="https://github.com/ShrlAlgo/AntdWpf"\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>
|