整理控件库

This commit is contained in:
GG Z
2025-05-05 17:04:06 +08:00
parent 74532b77be
commit 3eaad7566e
283 changed files with 2156 additions and 17846 deletions

View File

@@ -10,201 +10,148 @@
xmlns:ui="https://github.com/ShrlAlgo/WPFluent"
xmlns:vm="clr-namespace:WPFluent.Gallery.ViewModels.Pages"
mc:Ignorable="d"
controls:PageControlDocumentation.Show="False"
d:DataContext="{d:DesignInstance vm:BasicInputViewModel,
IsDesignTimeCreatable=False}"
Foreground="{DynamicResource TextFillColorPrimaryBrush}"
Title="BasicInputPage"
ui:Design.Background="{DynamicResource ApplicationBackgroundBrush}"
ui:Design.Foreground="{DynamicResource TextFillColorPrimaryBrush}">
IsDesignTimeCreatable=False}">
<ui:StackPanel Spacing="10">
<GroupBox
Grid.Row="0"
Margin="0"
Header="WPF UI anchor.">
Grid.Row="0"
Margin="0"
Header="WPF UI anchor.">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ui:Anchor
Grid.Column="0"
Content="WPF UI anchor"
Icon="{ui:SymbolIcon Link24}"
IsEnabled="{Binding ViewModel.IsAnchorEnabled, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}"
NavigateUri="https://lepo.co/" />
IsEnabled="{Binding ElementName=CBDisableAnchor,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}"
Grid.Column="0"
Content="Anchor"
Icon="{ui:SymbolIcon Link24}"
NavigateUri="https://www.shrlalgo.com/" />
<CheckBox
Grid.Column="1"
Command="{Binding ViewModel.AnchorCheckboxCheckedCommand, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}"
CommandParameter="{Binding Mode=OneWay, RelativeSource={RelativeSource Mode=Self}}"
Content="Disable anchor" />
Grid.Column="1"
x:Name="CBDisableAnchor"
Content="禁用anchor" />
</Grid>
</GroupBox>
<GroupBox Header="Standard Button">
<GroupBox Header="Badge">
<ui:Badge Appearance="Caution" Content="徽章" />
</GroupBox>
<GroupBox Header="IconButton">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button
<ui:StackPanel Orientation="Horizontal" Spacing="5">
<Button Click="Button_Click" IsEnabled="{Binding ElementName=CBDisableButton,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}">
<ui:SymbolIcon Symbol="Button20" />
</Button>
<Button
Command="{Binding ButtonClickCommand}"
Content="消息"
IsEnabled="{Binding ElementName=CBDisableButton,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}" />
<Button
Grid.Column="0"
Content="Standard WPF button"
IsEnabled="{Binding ViewModel.IsSimpleButtonEnabled, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}" />
<CheckBox
Grid.Column="1"
Command="{Binding ViewModel.SimpleButtonCheckboxCheckedCommand, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}"
CommandParameter="{Binding Mode=OneWay, RelativeSource={RelativeSource Mode=Self}}"
Content="Disable button" />
</Grid>
</GroupBox>
<GroupBox Header="Standard IconButton">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ui:Button
Content="默认按钮"
IsEnabled="{Binding ElementName=CBDisableButton,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}" />
<ui:Button
Grid.Column="0"
Content="WPF UI button"
Content="UiButton"
Icon="{ui:SymbolIcon Fluent24}"
IsEnabled="{Binding ViewModel.IsUiButtonEnabled, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}" />
<CheckBox
Grid.Column="1"
Command="{Binding ViewModel.UiButtonCheckboxCheckedCommand, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}"
CommandParameter="{Binding Mode=OneWay, RelativeSource={RelativeSource Mode=Self}}"
Content="Disable button" />
</Grid>
</GroupBox>
<GroupBox Header="Accent IconButton">
<UniformGrid Rows="1">
<ui:Button
IsEnabled="{Binding ElementName=CBDisableButton,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}" />
<ui:Button
HorizontalAlignment="Center"
Appearance="Primary"
Content="WPF UI button"
Icon="{ui:SymbolIcon Fluent24}" />
<ui:Button
Appearance="Primary"
Content="WPF UI button with font icon"
Icon="{ui:FontIcon 🌈}" />
<ui:Button
Appearance="Primary"
Content="WPF UI button with image icon"
Icon="{ui:ImageIcon pack://application:\,\,\,/WPFluent.Gallery;component/wpfui.png}" />
</UniformGrid>
Content="AccentUiButton"
Icon="{ui:SymbolIcon Fluent24}"
IsEnabled="{Binding ElementName=CBDisableButton,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}" />
<ui:Button
Appearance="Secondary"
Content="FontIcon button"
Icon="{ui:FontIcon 🌈}"
IsEnabled="{Binding ElementName=CBDisableButton,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}" />
<ui:Button
Appearance="Danger"
Content="ImageIconButton"
Icon="{ui:ImageIcon pack://application:\,\,\,/WPFluent.Gallery;component/wpfui.png}"
IsEnabled="{Binding ElementName=CBDisableButton,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}" />
</ui:StackPanel>
<CheckBox
x:Name="CBDisableButton"
Grid.Column="1"
HorizontalAlignment="Right"
Content="禁用button" />
</Grid>
</GroupBox>
<GroupBox Header="ToggleSwitch">
<GroupBox Header="Toggle">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ui:ToggleSwitch
<ui:StackPanel Orientation="Horizontal" Spacing="10">
<ui:ToggleSwitch
Grid.Column="0"
IsEnabled="{Binding ViewModel.IsToggleSwitchEnabled, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}"
OffContent="Off"
OnContent="On" />
IsEnabled="{Binding ElementName=CBDisableToggle,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}"
OffContent=""
OnContent="" />
<ToggleButton
Grid.Column="0"
Content="切换按钮"
IsEnabled="{Binding ElementName=CBDisableToggle,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}" />
</ui:StackPanel>
<CheckBox
Grid.Column="1"
Command="{Binding ViewModel.ToggleSwitchCheckboxCheckedCommand, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}"
CommandParameter="{Binding Mode=OneWay, RelativeSource={RelativeSource Mode=Self}}"
Content="Disable switch" />
x:Name="CBDisableToggle"
Grid.Column="1"
HorizontalAlignment="Right"
Content="禁用Toggle" />
</Grid>
</GroupBox>
<GroupBox Header="ToggleButton">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ToggleButton
Grid.Column="0"
Content="Standard ToggleButton"
IsEnabled="{Binding ViewModel.IsToggleButtonEnabled, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}" />
<GroupBox Header="CheckBox">
<StackPanel Orientation="Horizontal">
<CheckBox Content="复选框" />
<CheckBox
Grid.Column="1"
Command="{Binding ViewModel.ToggleButtonCheckboxCheckedCommand, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}"
CommandParameter="{Binding Mode=OneWay, RelativeSource={RelativeSource Mode=Self}}"
Content="Disable toggle button" />
</Grid>
</GroupBox>
<ui:Card Margin="5">
<UniformGrid Rows="1">
<CheckBox Content="Two-state CheckBox" />
<CheckBox
Content="Three-state CheckBox"
IsChecked="{x:Null}"
IsThreeState="True" />
</UniformGrid>
</ui:Card>
<ui:Card Margin="5">
<StackPanel>
<CheckBox
Command="{Binding ViewModel.SelectAllCheckedCommand, Mode=OneWay}"
CommandParameter="{Binding Mode=OneWay, RelativeSource={RelativeSource Mode=Self}}"
Content="Select all"
IsChecked="{Binding ViewModel.SelectAllCheckBoxChecked, Mode=TwoWay}"
IsThreeState="True" />
<CheckBox
Margin="24,0,0,0"
Command="{Binding ViewModel.SingleCheckedCommand, Mode=OneWay}"
CommandParameter="1"
Content="Option 1"
IsChecked="{Binding ViewModel.OptionOneCheckBoxChecked, Mode=TwoWay}" />
<CheckBox
Margin="24,0,0,0"
Command="{Binding ViewModel.SingleCheckedCommand, Mode=OneWay}"
CommandParameter="2"
Content="Option 2"
IsChecked="{Binding ViewModel.OptionTwoCheckBoxChecked, Mode=TwoWay}" />
<CheckBox
Margin="24,0,0,0"
Command="{Binding ViewModel.SingleCheckedCommand, Mode=OneWay}"
CommandParameter="3"
Content="Option 3"
IsChecked="{Binding ViewModel.OptionThreeCheckBoxChecked, Mode=TwoWay}" />
Content="复选框"
IsChecked="{x:Null}"
IsThreeState="True" />
</StackPanel>
</ui:Card>
</GroupBox>
<GroupBox Header="ComboBox">
<UniformGrid Rows="1">
<ui:StackPanel Orientation="Horizontal" Spacing="10">
<ComboBox
MinWidth="200"
HorizontalAlignment="Left"
SelectedIndex="0">
<ComboBoxItem Content="Blue" />
<ComboBoxItem Content="Green" />
<ComboBoxItem Content="Red" />
<ComboBoxItem Content="Yellow" />
</ComboBox>
<ComboBox
MinWidth="200"
HorizontalAlignment="Left"
ItemsSource="{Binding ViewModel.ComboBoxFontFamilies, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}"
SelectedIndex="0">
MinWidth="150"
HorizontalAlignment="Left"
ItemsSource="{Binding ViewModel.ComboBoxFontFamilies, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}"
SelectedIndex="0">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock FontFamily="{Binding}" Text="{Binding}" />
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<ComboBox
MinWidth="200"
HorizontalAlignment="Left"
IsEditable="True"
ItemsSource="{Binding ViewModel.ComboBoxFontSizes, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}"
SelectedIndex="0" />
</UniformGrid>
<ui:ComboBoxEx ItemsSource="{Binding Animals}" />
<ui:CheckComboBox
DisplayMemberPath="GradeLevel"
ItemsSource="{Binding Grades,Mode=TwoWay}"
PlaceholderText="多选ComboBox"
SelectedObjList="{Binding SelectedItems, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
<ui:ComboBoxEx
MinWidth="150"
HorizontalAlignment="Left"
Header="带标题:"
HeaderPlacement="Left"
ItemsSource="{Binding ViewModel.ComboBoxFontFamilies, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}" />
</ui:StackPanel>
</GroupBox>
<GroupBox Margin="0" Header="A DropDownButton">
<ui:DropDownButton Content="Hello" Icon="{ui:SymbolIcon Fluent24}">
<ui:DropDownButton Content="你好" Icon="{ui:SymbolIcon Fluent24}">
<ui:DropDownButton.Flyout>
<ContextMenu>
<MenuItem Header="Add" />
<MenuItem Header="Remove" />
<MenuItem Header="Send" />
<MenuItem Header="Hello" />
<MenuItem Header="添加" />
<MenuItem Header="移除" />
<MenuItem Header="发送" />
<MenuItem Header="你好" />
</ContextMenu>
</ui:DropDownButton.Flyout>
</ui:DropDownButton>
@@ -215,84 +162,72 @@
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ui:HyperlinkButton
<ui:StackPanel Orientation="Horizontal" Spacing="10">
<ui:HyperlinkButton
Grid.Column="0"
Content="WPF UI hyperlink"
Icon="{ui:SymbolIcon Link24}"
IsEnabled="{Binding ViewModel.IsHyperlinkEnabled, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}"
NavigateUri="https://lepo.co/" />
IsEnabled="{Binding ElementName=CBDisableHyperlink,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}"
NavigateUri="https://www.shrlalgo.cn/" />
<ui:HyperlinkButton
Grid.Column="0"
Content="Github超链接"
Icon="{ui:FontIcon 🌈}"
IsEnabled="{Binding ElementName=CBDisableHyperlink,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}"
NavigateUri="https://www.github.com/shrlalgo" />
<ui:HyperlinkButton
Grid.Column="0"
Content="博客超链接"
Icon="{ui:ImageIcon pack://application:\,\,\,/WPFluent.Gallery;component/wpfui.png}"
IsEnabled="{Binding ElementName=CBDisableHyperlink,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}"
NavigateUri="https://www.shrlalgo.cn/" />
</ui:StackPanel>
<CheckBox
Grid.Column="1"
Command="{Binding ViewModel.HyperlinkCheckboxCheckedCommand, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}"
CommandParameter="{Binding Mode=OneWay, RelativeSource={RelativeSource Mode=Self}}"
Content="Disable hyperlink" />
x:Name="CBDisableHyperlink"
Grid.Column="1"
HorizontalAlignment="Right"
Content="禁用Hyperlink" />
</Grid>
</GroupBox>
<GroupBox Header="WPF UI hyperlink with FontIcon.">
<ui:HyperlinkButton
Grid.Column="0"
Content="WPF UI hyperlink"
Icon="{ui:FontIcon 🌈}"
IsEnabled="{Binding ViewModel.IsHyperlinkEnabled, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}"
NavigateUri="https://lepo.co/" />
</GroupBox>
<GroupBox Header="WPF UI hyperlink with ImageIcon.">
<ui:HyperlinkButton
Grid.Column="0"
Content="WPF UI hyperlink"
Icon="{ui:ImageIcon pack://application:\,\,\,/WPFluent.Gallery;component/wpfui.png}"
IsEnabled="{Binding ViewModel.IsHyperlinkEnabled, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}"
NavigateUri="https://lepo.co/" />
</GroupBox>
<GroupBox Margin="0" Header="Standard RadioButton.">
<GroupBox Header="Hyperlink" />
<GroupBox Margin="0" Header="RadioButton">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<StackPanel Grid.Column="0" Orientation="Horizontal">
<RadioButton
Content="Option 1"
GroupName="radio_group_one"
IsChecked="True"
IsEnabled="{Binding ViewModel.IsRadioButtonEnabled, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}" />
Content="选项 1"
GroupName="radio_group_one"
IsChecked="True"
IsEnabled="{Binding ElementName=CBDisableRadioButton,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}" />
<RadioButton
Content="Option 2"
GroupName="radio_group_one"
IsEnabled="{Binding ViewModel.IsRadioButtonEnabled, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}" />
Content="选项 2"
GroupName="radio_group_one"
IsEnabled="{Binding ElementName=CBDisableRadioButton,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}" />
<RadioButton
Content="Option 3"
GroupName="radio_group_one"
IsEnabled="{Binding ViewModel.IsRadioButtonEnabled, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}" />
</StackPanel>
<CheckBox
Grid.Column="1"
Command="{Binding ViewModel.RadioButtonCheckboxCheckedCommand, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}"
CommandParameter="{Binding Mode=OneWay, RelativeSource={RelativeSource Mode=Self}}"
Content="Disable radio buttons" />
</Grid>
</GroupBox>
<GroupBox Header="RadioButton with right to left flow direction.">
<StackPanel Grid.Column="0">
<RadioButton
Content="Option 1"
Content="选项 1"
FlowDirection="RightToLeft"
GroupName="radio_group_two"
IsChecked="True" />
<RadioButton
Content="Option 2"
IsChecked="True"
IsEnabled="{Binding ElementName=CBDisableRadioButton,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}" />
<RadioButton
Content="选项 2"
FlowDirection="RightToLeft"
GroupName="radio_group_two" />
<RadioButton
Content="Option 3"
FlowDirection="RightToLeft"
GroupName="radio_group_two" />
</StackPanel>
GroupName="radio_group_two"
IsEnabled="{Binding ElementName=CBDisableRadioButton,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}" />
</StackPanel>
<CheckBox
x:Name="CBDisableRadioButton"
Grid.Column="1"
HorizontalAlignment="Right"
Content="禁用Radiobuttons" />
</Grid>
</GroupBox>
<GroupBox Margin="0" Header="WPF UI rating.">
<GroupBox Margin="0" Header="Rating.">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
@@ -300,251 +235,186 @@
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ui:RatingControl
HorizontalAlignment="Left"
Value="{Binding ViewModel.FirstRatingValue, Mode=TwoWay}"
IsEnabled="{Binding ViewModel.IsFirstRatingEnabled, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}" />
x:Name="UiRating"
HorizontalAlignment="Left"
HalfStarEnabled="{Binding ElementName=CBSetFull,Path=IsChecked}"
IsEnabled="{Binding ElementName=CBDisableRating,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}" />
<StackPanel
Grid.Column="1"
MinWidth="60"
Margin="0,4,0,0"
VerticalAlignment="Center">
<Label Margin="0,0,0,-4" Content="Value:" />
<TextBlock Margin="0" Text="{Binding ViewModel.FirstRatingValue, Mode=TwoWay}" />
Grid.Column="1"
MinWidth="60"
Margin="0,4,0,0"
VerticalAlignment="Center">
<Label Margin="0,0,0,-4" Content=":" />
<TextBlock Margin="0" Text="{Binding ElementName=UiRating,Path=Value}" />
</StackPanel>
<CheckBox
Grid.Column="2"
<StackPanel Grid.Column="2" Orientation="Horizontal" HorizontalAlignment="Right">
<CheckBox
x:Name="CBSetFull"
VerticalAlignment="Center"
Command="{Binding ViewModel.FirstRatingCheckboxCheckedCommand, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}"
CommandParameter="{Binding Mode=OneWay, RelativeSource={RelativeSource Mode=Self}}"
Content="Disable rating" />
Content="支持半星" />
<CheckBox
x:Name="CBDisableRating"
VerticalAlignment="Center"
Content="禁用rating" />
</StackPanel>
</Grid>
</GroupBox>
<GroupBox Header="WPF UI rating with full stars only.">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ui:RatingControl
HorizontalAlignment="Left"
Value="{Binding ViewModel.SecondRatingValue, Mode=TwoWay}"
HalfStarEnabled="False"
IsEnabled="{Binding ViewModel.IsSecondRatingEnabled, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}" />
<StackPanel
Grid.Column="1"
MinWidth="60"
Margin="0,4,0,0"
VerticalAlignment="Center">
<Label Margin="0,0,0,-4" Content="Value:" />
<TextBlock Margin="0" Text="{Binding ViewModel.SecondRatingValue, Mode=TwoWay}" />
</StackPanel>
<CheckBox
Grid.Column="2"
VerticalAlignment="Center"
Command="{Binding ViewModel.SecondRatingCheckboxCheckedCommand, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}"
CommandParameter="{Binding Mode=OneWay, RelativeSource={RelativeSource Mode=Self}}"
Content="Disable rating" />
</Grid>
</GroupBox>
<GroupBox Margin="0" Header="A simple slider.">
<GroupBox Header="Slider">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Slider
<StackPanel Orientation="Horizontal">
<Slider
Width="200"
Margin="0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Value="{Binding ViewModel.SimpleSliderValue, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}"
Maximum="100"
Minimum="0" />
<Grid Grid.Column="1">
<StackPanel VerticalAlignment="Center">
<TextBlock Text="Output:" />
<TextBlock Text="{Binding ViewModel.SimpleSliderValue, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}" />
</StackPanel>
</Grid>
</Grid>
</GroupBox>
<GroupBox Header="A slider with steps and range specified.">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Slider
Width="200"
Margin="0"
Margin="10,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Value="{Binding ViewModel.RangeSliderValue, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}"
IsSnapToTickEnabled="True"
Maximum="1000"
Minimum="500"
TickFrequency="20" />
<Grid Grid.Column="1">
<StackPanel VerticalAlignment="Center">
<TextBlock Text="Output:" />
<TextBlock Text="{Binding ViewModel.RangeSliderValue, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}" />
</StackPanel>
</Grid>
</Grid>
</GroupBox>
<GroupBox Header="A slider with tick marks.">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Slider
Width="200"
Margin="0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Value="{Binding ViewModel.MarksSliderValue, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}"
IsSnapToTickEnabled="True"
IsSnapToTickEnabled="{Binding ElementName=CBSnapToTick,Path=IsChecked}"
Maximum="100"
Minimum="0"
TickFrequency="20"
TickPlacement="Both" />
TickPlacement="{Binding ElementName=CBPlacement,Path=SelectedItem}" />
<TextBlock VerticalAlignment="Center" Text="值:" />
<TextBlock VerticalAlignment="Center" Text="{Binding ViewModel.RangeSliderValue, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}" />
</StackPanel>
<Grid Grid.Column="1">
<StackPanel VerticalAlignment="Center">
<TextBlock Text="Output:" />
<TextBlock Text="{Binding ViewModel.MarksSliderValue, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<ComboBox
x:Name="CBPlacement"
Margin="10,0"
SelectedIndex="0">
<ComboBox.ItemsSource>
<x:Array Type="{x:Type TickPlacement}">
<TickPlacement>None</TickPlacement>
<TickPlacement>TopLeft</TickPlacement>
<TickPlacement>BottomRight</TickPlacement>
<TickPlacement>Both</TickPlacement>
</x:Array>
</ComboBox.ItemsSource>
</ComboBox>
<ComboBox
x:Name="CBOrientation"
Margin="10,0"
SelectedIndex="0">
<ComboBox.ItemsSource>
<x:Array Type="{x:Type Orientation}">
<Orientation>Horizontal</Orientation>
<Orientation>Vertical</Orientation>
</x:Array>
</ComboBox.ItemsSource>
</ComboBox>
<CheckBox x:Name="CBSnapToTick" Content="吸附刻度" />
</StackPanel>
</Grid>
</Grid>
</GroupBox>
<GroupBox Header="A vertical slider with range and tick marks specified.">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Slider
Width="200"
Margin="0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Value="{Binding ViewModel.VerticalSliderValue, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}"
IsSnapToTickEnabled="True"
Maximum="100"
Minimum="0"
Orientation="Vertical"
TickFrequency="20"
TickPlacement="Both" />
<Grid Grid.Column="1">
<StackPanel VerticalAlignment="Center">
<TextBlock Text="Output:" />
<TextBlock Text="{Binding ViewModel.VerticalSliderValue, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}" />
</StackPanel>
</Grid>
</Grid>
</GroupBox>
<GroupBox Margin="0" Header="A SplitButton">
<ui:SplitButton Icon="{ui:SymbolIcon PaintBrush24}">
<ui:SplitButton.Flyout>
<ContextMenu>
<MenuItem>
<MenuItem.Header>
<Border
<GroupBox Margin="0" Header="SplitButton">
<ui:StackPanel Orientation="Horizontal" Spacing="10">
<ui:SplitButton Icon="{ui:SymbolIcon PaintBrush24}">
<ui:SplitButton.Flyout>
<ContextMenu>
<MenuItem>
<MenuItem.Header>
<Border
Width="35"
Height="20"
Background="Red"
CornerRadius="4" />
</MenuItem.Header>
</MenuItem>
<MenuItem>
<MenuItem.Header>
<Border
</MenuItem.Header>
</MenuItem>
<MenuItem>
<MenuItem.Header>
<Border
Width="35"
Height="20"
Background="Blue"
CornerRadius="4" />
</MenuItem.Header>
</MenuItem>
<MenuItem>
<MenuItem.Header>
<Border
</MenuItem.Header>
</MenuItem>
<MenuItem>
<MenuItem.Header>
<Border
Width="35"
Height="20"
Background="White"
CornerRadius="4" />
</MenuItem.Header>
</MenuItem>
</ContextMenu>
</ui:SplitButton.Flyout>
<Border
</MenuItem.Header>
</MenuItem>
</ContextMenu>
</ui:SplitButton.Flyout>
<Border
Width="35"
Height="20"
Background="Green"
CornerRadius="4" />
</ui:SplitButton>
</GroupBox>
<GroupBox Header="A SplitButton with modified paddings">
<ui:SplitButton CornerRadius="4" Padding="0">
<ui:SplitButton.Flyout>
<ContextMenu>
<MenuItem>
<MenuItem.Header>
<Border
</ui:SplitButton>
<ui:SplitButton CornerRadius="4" Padding="0">
<ui:SplitButton.Flyout>
<ContextMenu>
<MenuItem>
<MenuItem.Header>
<Border
Width="35"
Height="20"
Background="Red"
CornerRadius="4" />
</MenuItem.Header>
</MenuItem>
<MenuItem>
<MenuItem.Header>
<Border
</MenuItem.Header>
</MenuItem>
<MenuItem>
<MenuItem.Header>
<Border
Width="35"
Height="20"
Background="Blue"
CornerRadius="4" />
</MenuItem.Header>
</MenuItem>
<MenuItem>
<MenuItem.Header>
<Border
</MenuItem.Header>
</MenuItem>
<MenuItem>
<MenuItem.Header>
<Border
Width="35"
Height="20"
Background="White"
CornerRadius="4" />
</MenuItem.Header>
</MenuItem>
</ContextMenu>
</ui:SplitButton.Flyout>
<Border
</MenuItem.Header>
</MenuItem>
</ContextMenu>
</ui:SplitButton.Flyout>
<Border
Width="35"
Height="25"
Background="Green"
CornerRadius="4,0,0,4" />
</ui:SplitButton>
</ui:SplitButton>
</ui:StackPanel>
</GroupBox>
<GroupBox Margin="0" Header="WPF UI thumb rate.">
<GroupBox Margin="0" Header="ThumbRate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ui:ThumbRate HorizontalAlignment="Left" State="{Binding ViewModel.ThumbRateState, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}" />
<ui:ThumbRate x:Name="ThumbRate" HorizontalAlignment="Left" />
<StackPanel
Grid.Column="1"
MinWidth="60"
VerticalAlignment="Center">
<Label Content="State:" />
<TextBlock Text="{Binding ViewModel.ThumRateStateText, Mode=OneWay}" />
Grid.Column="1"
MinWidth="60"
VerticalAlignment="Center">
<Label Content="状态:" />
<TextBlock Text="{Binding ElementName=ThumbRate,Path=State}" />
</StackPanel>
</Grid>
</GroupBox>
<GroupBox Header="ColorPicker">
<StackPanel Orientation="Horizontal">
<ui:ColorPicker x:Name="ColorPicker" />
<ui:ColorPickerControl VerticalAlignment="Top" />
</StackPanel>
</GroupBox>
</ui:StackPanel>
</Page>