220 lines
14 KiB
XML
220 lines
14 KiB
XML
<UserControl
|
|
mc:Ignorable="d"
|
|
x:Class="AntDesignWPFDemo.Views.InputView"
|
|
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
|
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"
|
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
|
|
|
<ScrollViewer>
|
|
<Grid Margin="16,0">
|
|
<Grid.RowDefinitions>
|
|
<RowDefinition Height="Auto" />
|
|
<RowDefinition Height="*" />
|
|
<RowDefinition Height="*" />
|
|
</Grid.RowDefinitions>
|
|
<StackPanel>
|
|
<Label Content="Input" Style="{StaticResource Ant.H1}" />
|
|
<TextBlock Style="{StaticResource Ant.P}" Text="A basic widget for getting the user input is a text field. Keyboard and mouse can be used for providing or changing data." />
|
|
|
|
<Label Content="When To Use" Style="{StaticResource Ant.H2}" />
|
|
<TextBlock Style="{StaticResource Ant.P}" Text="A user input in a form field is needed.
A search input is required." />
|
|
|
|
<Label Content="Examples" Style="{StaticResource Ant.H2}" />
|
|
</StackPanel>
|
|
<Grid Grid.Row="1">
|
|
<Grid.Resources>
|
|
<Style BasedOn="{StaticResource Ant.TextBox}" TargetType="TextBox">
|
|
<Setter Property="Margin" Value="0,16,16,0" />
|
|
</Style>
|
|
<Style BasedOn="{StaticResource Ant.PasswordBox}" TargetType="PasswordBox">
|
|
<Setter Property="Margin" Value="0,16,16,0" />
|
|
</Style>
|
|
</Grid.Resources>
|
|
<Grid.ColumnDefinitions>
|
|
<ColumnDefinition />
|
|
<ColumnDefinition />
|
|
</Grid.ColumnDefinitions>
|
|
<StackPanel Margin="8,0">
|
|
<antd:CodeBox Title="Basic usage">
|
|
<antd:CodeBox.Description>
|
|
Basic usage example.
|
|
</antd:CodeBox.Description>
|
|
<antd:CodeBox.Content>
|
|
<StackPanel>
|
|
<TextBox antd:Input.Placeholder="Basic usage" />
|
|
<PasswordBox
|
|
Password="666"
|
|
antd:Input.Eyeable="True"
|
|
antd:Input.Placeholder="Basic usage" />
|
|
</StackPanel>
|
|
</antd:CodeBox.Content>
|
|
<antd:CodeBox.Code>
|
|
<ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" />\n
|
|
<ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/AntIcons.xaml" />\n\n
|
|
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
|
|
<WrapPanel>\n
|
|
\t<antd:Tag>Tag 1</antd:Tag>\n
|
|
\t<antd:Tag>Link</antd:Tag>\n
|
|
\t<antd:Tag Closable="True">Tag 2</antd:Tag>\n
|
|
\t<antd:Tag Closable="True" cal:Message.Attached="[Event Closing] = [Action Closing($source, $eventArgs)]">Prevent Default</antd:Tag>\n
|
|
</WrapPanel>
|
|
</antd:CodeBox.Code>
|
|
</antd:CodeBox>
|
|
<antd:CodeBox Title="Pre / Post tab">
|
|
<antd:CodeBox.Description>
|
|
Using pre & post tabs example.
|
|
</antd:CodeBox.Description>
|
|
<antd:CodeBox.Content>
|
|
<StackPanel>
|
|
<Grid>
|
|
<Grid.ColumnDefinitions>
|
|
<ColumnDefinition Width="Auto" />
|
|
<ColumnDefinition Width="*" />
|
|
<ColumnDefinition Width="Auto" />
|
|
</Grid.ColumnDefinitions>
|
|
<antd:AntBorder
|
|
BorderBrush="{DynamicResource AntDesign.Brush.BorderPrimary}"
|
|
BorderThickness="1,1,0,1"
|
|
CornerRadius="4 0 0 4"
|
|
Grid.Column="0"
|
|
Padding="11,0"
|
|
UseLayoutRounding="True">
|
|
<TextBlock Text="http://" VerticalAlignment="Center" />
|
|
</antd:AntBorder>
|
|
<TextBox
|
|
Grid.Column="1"
|
|
Margin="0"
|
|
Text="mysite"
|
|
antd:AntControl.CornerRadius="0" />
|
|
<antd:AntBorder
|
|
BorderBrush="{DynamicResource AntDesign.Brush.BorderPrimary}"
|
|
BorderThickness="0,1,1,1"
|
|
CornerRadius="0 4 4 0"
|
|
Grid.Column="2"
|
|
Padding="11,0"
|
|
UseLayoutRounding="True">
|
|
<TextBlock Text=".com" VerticalAlignment="Center" />
|
|
</antd:AntBorder>
|
|
</Grid>
|
|
</StackPanel>
|
|
</antd:CodeBox.Content>
|
|
<antd:CodeBox.Code>
|
|
<ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" />\n
|
|
<ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/AntIcons.xaml" />\n\n
|
|
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
|
|
<WrapPanel>\n
|
|
\t<antd:Tag>Tag 1</antd:Tag>\n
|
|
\t<antd:Tag>Link</antd:Tag>\n
|
|
\t<antd:Tag Closable="True">Tag 2</antd:Tag>\n
|
|
\t<antd:Tag Closable="True" cal:Message.Attached="[Event Closing] = [Action Closing($source, $eventArgs)]">Prevent Default</antd:Tag>\n
|
|
</WrapPanel>
|
|
</antd:CodeBox.Code>
|
|
</antd:CodeBox>
|
|
<antd:CodeBox Title="Search box">
|
|
<antd:CodeBox.Description>
|
|
Example of creating a search box by grouping a standard input with a search button.
|
|
</antd:CodeBox.Description>
|
|
<antd:CodeBox.Content>
|
|
<StackPanel>
|
|
<TextBox antd:Input.Clearable="True" antd:Input.Placeholder="input search text">
|
|
<antd:Input.Suffix>
|
|
<antd:Icon Type="search" />
|
|
</antd:Input.Suffix>
|
|
</TextBox>
|
|
<TextBox Padding="12,0,0,0" antd:Input.Placeholder="input search text">
|
|
<antd:Input.Suffix>
|
|
<antd:AntButton
|
|
Content="Search"
|
|
Margin="8,-1,-2,-1"
|
|
Variant="Solid"
|
|
antd:AntControl.CornerRadius="0 4 4 0" />
|
|
</antd:Input.Suffix>
|
|
</TextBox>
|
|
<TextBox
|
|
Padding="12,0,0,0"
|
|
antd:AntControl.Size="Large"
|
|
antd:Input.Placeholder="input search text">
|
|
<antd:Input.Suffix>
|
|
<antd:AntButton
|
|
Content="Search"
|
|
Margin="8,-1,-2,-1"
|
|
Size="Large"
|
|
Variant="Solid"
|
|
antd:AntControl.CornerRadius="0 4 4 0" />
|
|
</antd:Input.Suffix>
|
|
</TextBox>
|
|
</StackPanel>
|
|
</antd:CodeBox.Content>
|
|
<antd:CodeBox.Code>
|
|
<ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" />\n
|
|
<ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/AntIcons.xaml" />\n\n
|
|
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
|
|
<WrapPanel>\n
|
|
\t<antd:Tag>Tag 1</antd:Tag>\n
|
|
\t<antd:Tag>Link</antd:Tag>\n
|
|
\t<antd:Tag Closable="True">Tag 2</antd:Tag>\n
|
|
\t<antd:Tag Closable="True" cal:Message.Attached="[Event Closing] = [Action Closing($source, $eventArgs)]">Prevent Default</antd:Tag>\n
|
|
</WrapPanel>
|
|
</antd:CodeBox.Code>
|
|
</antd:CodeBox>
|
|
<antd:CodeBox Title="Prefix and Suffix">
|
|
<antd:CodeBox.Description>
|
|
Add prefix or suffix icons inside input.
|
|
</antd:CodeBox.Description>
|
|
<antd:CodeBox.Content>
|
|
<TextBox antd:Input.Placeholder="Enter your username">
|
|
<antd:Input.Prefix>
|
|
<antd:Icon Foreground="#3F000000" Type="user" />
|
|
</antd:Input.Prefix>
|
|
<antd:Input.Suffix>
|
|
<antd:Icon Foreground="#3F000000" Type="close" />
|
|
</antd:Input.Suffix>
|
|
</TextBox>
|
|
</antd:CodeBox.Content>
|
|
<antd:CodeBox.Code>
|
|
<ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" />\n
|
|
<ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/AntIcons.xaml" />\n\n
|
|
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
|
|
<TextBox antd:Input.Placeholder="Enter your username">\n
|
|
\t<antd:Input.Prefix>\n
|
|
\t\t<antd:Icon Type="user" Foreground="#3F000000" />\n
|
|
\t</antd:Input.Prefix>\n
|
|
\t<antd:Input.Suffix>\n
|
|
\t\t<antd:Icon Type="close" Foreground="#3F000000" />\n
|
|
\t</antd:Input.Suffix>\n
|
|
</TextBox>
|
|
</antd:CodeBox.Code>
|
|
</antd:CodeBox>
|
|
</StackPanel>
|
|
<StackPanel Grid.Column="1" Margin="8,0">
|
|
<antd:CodeBox Title="Three sizes of Input">
|
|
<antd:CodeBox.Description>
|
|
There are three sizes of an Input box: `Large` (40px)、`Default` (32px) and `Small` (24px).
|
|
</antd:CodeBox.Description>
|
|
<antd:CodeBox.Content>
|
|
<StackPanel>
|
|
<TextBox antd:AntControl.Size="Large" antd:Input.Placeholder="large size" />
|
|
<TextBox antd:Input.Placeholder="default size" />
|
|
<TextBox antd:AntControl.Size="Small" antd:Input.Placeholder="small size" />
|
|
</StackPanel>
|
|
</antd:CodeBox.Content>
|
|
<antd:CodeBox.Code>
|
|
<ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" />\n
|
|
<ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/AntIcons.xaml" />\n\n
|
|
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
|
|
<WrapPanel>\n
|
|
\t<antd:Tag>Tag 1</antd:Tag>\n
|
|
\t<antd:Tag>Link</antd:Tag>\n
|
|
\t<antd:Tag Closable="True">Tag 2</antd:Tag>\n
|
|
\t<antd:Tag Closable="True" cal:Message.Attached="[Event Closing] = [Action Closing($source, $eventArgs)]">Prevent Default</antd:Tag>\n
|
|
</WrapPanel>
|
|
</antd:CodeBox.Code>
|
|
</antd:CodeBox>
|
|
</StackPanel>
|
|
</Grid>
|
|
</Grid>
|
|
</ScrollViewer>
|
|
</UserControl>
|