Files
Shrlalgo.RvKits/AntdWpfDemo/Views/InputView.xaml
2025-07-31 20:12:24 +08:00

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.&#x0a;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>
&lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" /&gt;\n
&lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/AntIcons.xaml" /&gt;\n\n
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
&lt;WrapPanel&gt;\n
\t&lt;antd:Tag&gt;Tag 1&lt;/antd:Tag&gt;\n
\t&lt;antd:Tag&gt;Link&lt;/antd:Tag&gt;\n
\t&lt;antd:Tag Closable="True"&gt;Tag 2&lt;/antd:Tag&gt;\n
\t&lt;antd:Tag Closable="True" cal:Message.Attached="[Event Closing] = [Action Closing($source, $eventArgs)]"&gt;Prevent Default&lt;/antd:Tag&gt;\n
&lt;/WrapPanel&gt;
</antd:CodeBox.Code>
</antd:CodeBox>
<antd:CodeBox Title="Pre / Post tab">
<antd:CodeBox.Description>
Using pre &amp; 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>
&lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" /&gt;\n
&lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/AntIcons.xaml" /&gt;\n\n
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
&lt;WrapPanel&gt;\n
\t&lt;antd:Tag&gt;Tag 1&lt;/antd:Tag&gt;\n
\t&lt;antd:Tag&gt;Link&lt;/antd:Tag&gt;\n
\t&lt;antd:Tag Closable="True"&gt;Tag 2&lt;/antd:Tag&gt;\n
\t&lt;antd:Tag Closable="True" cal:Message.Attached="[Event Closing] = [Action Closing($source, $eventArgs)]"&gt;Prevent Default&lt;/antd:Tag&gt;\n
&lt;/WrapPanel&gt;
</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>
&lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" /&gt;\n
&lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/AntIcons.xaml" /&gt;\n\n
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
&lt;WrapPanel&gt;\n
\t&lt;antd:Tag&gt;Tag 1&lt;/antd:Tag&gt;\n
\t&lt;antd:Tag&gt;Link&lt;/antd:Tag&gt;\n
\t&lt;antd:Tag Closable="True"&gt;Tag 2&lt;/antd:Tag&gt;\n
\t&lt;antd:Tag Closable="True" cal:Message.Attached="[Event Closing] = [Action Closing($source, $eventArgs)]"&gt;Prevent Default&lt;/antd:Tag&gt;\n
&lt;/WrapPanel&gt;
</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>
&lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" /&gt;\n
&lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/AntIcons.xaml" /&gt;\n\n
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
&lt;TextBox antd:Input.Placeholder="Enter your username"&gt;\n
\t&lt;antd:Input.Prefix&gt;\n
\t\t&lt;antd:Icon Type="user" Foreground="#3F000000" /&gt;\n
\t&lt;/antd:Input.Prefix&gt;\n
\t&lt;antd:Input.Suffix&gt;\n
\t\t&lt;antd:Icon Type="close" Foreground="#3F000000" /&gt;\n
\t&lt;/antd:Input.Suffix&gt;\n
&lt;/TextBox&gt;
</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>
&lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" /&gt;\n
&lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/AntIcons.xaml" /&gt;\n\n
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
&lt;WrapPanel&gt;\n
\t&lt;antd:Tag&gt;Tag 1&lt;/antd:Tag&gt;\n
\t&lt;antd:Tag&gt;Link&lt;/antd:Tag&gt;\n
\t&lt;antd:Tag Closable="True"&gt;Tag 2&lt;/antd:Tag&gt;\n
\t&lt;antd:Tag Closable="True" cal:Message.Attached="[Event Closing] = [Action Closing($source, $eventArgs)]"&gt;Prevent Default&lt;/antd:Tag&gt;\n
&lt;/WrapPanel&gt;
</antd:CodeBox.Code>
</antd:CodeBox>
</StackPanel>
</Grid>
</Grid>
</ScrollViewer>
</UserControl>