Files
ShrlAlgoToolkit/WPFluent.Gallery/Views/Pages/BasicInputPage.xaml
ShrlAlgo 4d35cadb56 更新
2025-07-11 09:20:23 +08:00

570 lines
29 KiB
XML

<Page
x:Class="WPFluent.Gallery.Views.Pages.BasicInputPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:WPFluent.Gallery.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:models="clr-namespace:WPFluent.Gallery.Models"
xmlns:pages="clr-namespace:WPFluent.Gallery.Views.Pages"
xmlns:ui="https://github.com/ShrlAlgo/WPFluent"
xmlns:vm="clr-namespace:WPFluent.Gallery.ViewModels.Pages"
mc:Ignorable="d"
d:DataContext="{d:DesignInstance vm:BasicInputViewModel,
IsDesignTimeCreatable=False}">
<ui:StackPanel Spacing="10">
<GroupBox
Grid.Row="0"
Margin="0"
Header="WPF UI anchor.">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ui:Anchor
Grid.Column="0"
Content="Anchor"
Icon="{ui:SymbolIcon Link24}"
IsEnabled="{Binding ElementName=CBDisableAnchor,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}"
NavigateUri="https://www.shrlalgo.com/" />
<ui:Badge
Grid.Column="1"
Appearance="Caution"
Content="Badge" />
<CheckBox
x:Name="CBDisableAnchor"
Grid.Column="2"
HorizontalAlignment="Right"
Content="禁用anchor" />
</Grid>
</GroupBox>
<GroupBox Header="Button">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ui:StackPanel Spacing="5">
<ui:StackPanel Orientation="Horizontal" Spacing="5">
<TextBlock
Width="120"
VerticalAlignment="Center"
Text="Button:"
TextAlignment="Right" />
<Button
Width="120"
Content="Default"
IsEnabled="{Binding ElementName=CBDisableButton,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}" />
<RepeatButton Width="120" IsEnabled="{Binding ElementName=CBDisableButton,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}">
<StackPanel Orientation="Horizontal">
<ui:SymbolIcon Symbol="KeyCommand16" />
<TextBlock Text="Repeat" />
</StackPanel>
</RepeatButton>
<Button Width="120" IsEnabled="{Binding ElementName=CBDisableButton,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}">
<StackPanel Orientation="Horizontal">
<ui:SymbolIcon Symbol="KeyCommand16" />
<TextBlock Text="Icon" />
</StackPanel>
</Button>
</ui:StackPanel>
<ui:StackPanel Orientation="Horizontal" Spacing="5">
<TextBlock
Width="120"
VerticalAlignment="Center"
Text="UiButton:"
TextAlignment="Right" />
<ui:Button
Width="120"
Appearance="Primary"
Content="Primary"
IsEnabled="{Binding ElementName=CBDisableButton,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}" />
<ui:Button
Width="120"
Appearance="Accent"
Content="Accent"
IsEnabled="{Binding ElementName=CBDisableButton,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}" />
</ui:StackPanel>
<ui:StackPanel Orientation="Horizontal" Spacing="5">
<TextBlock
Width="120"
VerticalAlignment="Center"
Text="AccentUiButton:" />
<ui:Button
Width="120"
Appearance="Attention"
Command="{Binding ButtonClickCommand}"
CommandParameter="{Binding RelativeSource={RelativeSource Mode=Self}}"
Content="Attention"
Icon="{ui:SymbolIcon Fluent24}"
IsEnabled="{Binding ElementName=CBDisableButton,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}" />
<ui:Button
Width="120"
Appearance="Success"
Command="{Binding ButtonClickCommand}"
CommandParameter="{Binding RelativeSource={RelativeSource Mode=Self}}"
Content="Success"
Icon="{ui:SymbolIcon Fluent24}"
IsEnabled="{Binding ElementName=CBDisableButton,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}" />
<ui:Button
Width="120"
Appearance="Caution"
Command="{Binding ButtonClickCommand}"
CommandParameter="{Binding RelativeSource={RelativeSource Mode=Self}}"
Content="Caution"
Icon="{ui:SymbolIcon Fluent24}"
IsEnabled="{Binding ElementName=CBDisableButton,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}" />
<ui:Button
Width="120"
Appearance="Critical"
Command="{Binding ButtonClickCommand}"
CommandParameter="{Binding RelativeSource={RelativeSource Mode=Self}}"
Content="Critical"
Icon="{ui:SymbolIcon Fluent24}"
IsEnabled="{Binding ElementName=CBDisableButton,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}" />
</ui:StackPanel>
<ui:StackPanel Orientation="Horizontal" Spacing="5">
<TextBlock
Width="120"
VerticalAlignment="Center"
Text="IconUiButton:"
TextAlignment="Right" />
<ui:Button
Width="120"
Content="Symbol"
Icon="{ui:SymbolIcon Fluent24}"
IsEnabled="{Binding ElementName=CBDisableButton,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}" />
<ui:Button
Width="120"
Content="Font"
Icon="{ui:FontIcon 🌈}"
IsEnabled="{Binding ElementName=CBDisableButton,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}" />
<ui:Button
Width="120"
Content="Image"
Icon="{ui:ImageIcon pack://application:\,\,\,/WPFluent.Gallery;component/wpfui.png}"
IsEnabled="{Binding ElementName=CBDisableButton,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}" />
</ui:StackPanel>
<ui:StackPanel Orientation="Horizontal" Spacing="5">
<TextBlock
Width="120"
VerticalAlignment="Center"
Text="MessageBox:"
TextAlignment="Right" />
<ui:Button
Width="120"
Content="Sync"
Icon="{ui:SymbolIcon Symbol=Info16}"
Command="{Binding MsgSyncCommand}"
IsEnabled="{Binding ElementName=CBDisableButton,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}" />
<ui:Button
Width="120"
Content="Async"
Command="{Binding MsgAsyncCommand}"
Icon="{ui:SymbolIcon Symbol=Info16}"
IsEnabled="{Binding ElementName=CBDisableButton,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}" />
<ui:Button
Width="120"
Content="Pending"
Command="{Binding MsgPendingCommand}"
Icon="{ui:SymbolIcon Symbol=Info16}"
IsEnabled="{Binding ElementName=CBDisableButton,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}" />
</ui:StackPanel>
</ui:StackPanel>
<CheckBox
x:Name="CBDisableButton"
Grid.Column="1"
HorizontalAlignment="Right"
Content="禁用button" />
</Grid>
</GroupBox>
<GroupBox Header="Toggle">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ui:StackPanel Orientation="Horizontal" Spacing="10">
<ui:ToggleSwitch
Grid.Column="0"
IsEnabled="{Binding ElementName=CBDisableToggle,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}"
OffContent="关"
OnContent="开" />
<ToggleButton
Grid.Column="0"
Width="120"
Content="切换按钮"
IsEnabled="{Binding ElementName=CBDisableToggle,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}" />
</ui:StackPanel>
<CheckBox
x:Name="CBDisableToggle"
Grid.Column="1"
HorizontalAlignment="Right"
Content="禁用Toggle" />
</Grid>
</GroupBox>
<GroupBox Header="CheckBox">
<StackPanel Orientation="Horizontal">
<CheckBox Content="复选框" />
<CheckBox
Content="复选框"
IsChecked="{x:Null}"
IsThreeState="True" />
</StackPanel>
</GroupBox>
<GroupBox Header="ComboBox">
<ui:StackPanel Orientation="Horizontal" Spacing="10">
<ComboBox
MinWidth="150"
HorizontalAlignment="Left"
ItemsSource="{Binding ComboBoxFontFamilies, Mode=OneWay}"
SelectedIndex="0">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock FontFamily="{Binding}" Text="{Binding}" />
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<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 ComboBoxFontFamilies, Mode=OneWay}" />
</ui:StackPanel>
</GroupBox>
<GroupBox Margin="0" Header="A DropDownButton">
<ui:DropDownButton Content="你好" Icon="{ui:SymbolIcon Fluent24}">
<ui:DropDownButton.Flyout>
<ContextMenu>
<MenuItem Header="添加" />
<MenuItem Header="移除" />
<MenuItem Header="发送" />
<MenuItem Header="你好" />
</ContextMenu>
</ui:DropDownButton.Flyout>
</ui:DropDownButton>
</GroupBox>
<GroupBox Margin="0" Header="WPF UI hyperlink.">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ui:StackPanel Orientation="Horizontal" Spacing="10">
<ui:HyperlinkButton
Grid.Column="0"
Content="WPF UI hyperlink"
Icon="{ui:SymbolIcon Link24}"
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
x:Name="CBDisableHyperlink"
Grid.Column="1"
HorizontalAlignment="Right"
Content="禁用Hyperlink" />
</Grid>
</GroupBox>
<GroupBox Header="Hyperlink" />
<GroupBox Margin="0" Header="RadioButton">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ui:StackPanel Grid.Column="0" Orientation="Horizontal" Spacing="30">
<StackPanel Orientation="Horizontal">
<RadioButton
Content="选项 1"
GroupName="radio_group_one"
IsChecked="True"
IsEnabled="{Binding ElementName=CBDisableRadioButton,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}" />
<RadioButton
Content="选项 2"
GroupName="radio_group_one"
IsEnabled="{Binding ElementName=CBDisableRadioButton,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<RadioButton
Content="选项 1"
FlowDirection="RightToLeft"
GroupName="radio_group_two"
IsChecked="True"
IsEnabled="{Binding ElementName=CBDisableRadioButton,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}" />
<RadioButton
Content="选项 2"
FlowDirection="RightToLeft"
GroupName="radio_group_two"
IsEnabled="{Binding ElementName=CBDisableRadioButton,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<StackPanel.Resources>
<ui:ToggleButtonGroup x:Key="ToggleButtonGroup" />
</StackPanel.Resources>
<ToggleButton
Content="1st"
IsChecked="True"
ui:ToggleButtonGroup.Group="{DynamicResource ToggleButtonGroup}" />
<ToggleButton Content="2nd" ui:ToggleButtonGroup.Group="{DynamicResource ToggleButtonGroup}" />
</StackPanel>
</ui:StackPanel>
<CheckBox
x:Name="CBDisableRadioButton"
Grid.Column="1"
HorizontalAlignment="Right"
Content="禁用Radiobuttons" />
</Grid>
</GroupBox>
<GroupBox Margin="0" Header="Rating.">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ui:RatingControl
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="值:" />
<TextBlock Margin="0" Text="{Binding ElementName=UiRating,Path=Value}" />
</StackPanel>
<StackPanel
Grid.Column="2"
HorizontalAlignment="Right"
Orientation="Horizontal">
<CheckBox
x:Name="CBSetFull"
VerticalAlignment="Center"
Content="支持半星" />
<CheckBox
x:Name="CBDisableRating"
VerticalAlignment="Center"
Content="禁用rating" />
</StackPanel>
</Grid>
</GroupBox>
<GroupBox Header="Slider">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal">
<Slider
x:Name="Slider"
Width="200"
Margin="10,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
IsSnapToTickEnabled="{Binding ElementName=CBSnapToTick,Path=IsChecked}"
Maximum="100"
Minimum="0"
TickFrequency="20"
TickPlacement="{Binding ElementName=CBPlacement,Path=SelectedItem}" />
<TextBlock VerticalAlignment="Center" Text="值:" />
<TextBlock VerticalAlignment="Center" Text="{Binding ElementName=Slider,Path=Value, Mode=OneWay}" />
</StackPanel>
<Grid Grid.Column="1">
<StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
<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 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
Width="35"
Height="20"
Background="Blue"
CornerRadius="4" />
</MenuItem.Header>
</MenuItem>
<MenuItem>
<MenuItem.Header>
<Border
Width="35"
Height="20"
Background="White"
CornerRadius="4" />
</MenuItem.Header>
</MenuItem>
</ContextMenu>
</ui:SplitButton.Flyout>
<Border
Width="35"
Height="20"
Background="Green"
CornerRadius="4" />
</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
Width="35"
Height="20"
Background="Blue"
CornerRadius="4" />
</MenuItem.Header>
</MenuItem>
<MenuItem>
<MenuItem.Header>
<Border
Width="35"
Height="20"
Background="White"
CornerRadius="4" />
</MenuItem.Header>
</MenuItem>
</ContextMenu>
</ui:SplitButton.Flyout>
<Border
Width="35"
Height="25"
Background="Green"
CornerRadius="4,0,0,4" />
</ui:SplitButton>
</ui:StackPanel>
</GroupBox>
<GroupBox Margin="0" Header="ThumbRate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ui:ThumbRate x:Name="ThumbRate" HorizontalAlignment="Left" />
<StackPanel
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>
<GroupBox Header="Flyout">
<ui:StackPanel Orientation="Horizontal" Spacing="5">
<ui:Flyout IsOpen="{Binding IsFlyoutOpen, Mode=TwoWay}" Placement="Top">
<StackPanel>
<TextBlock
Width="280"
HorizontalAlignment="Left"
Text="Replicants like any other machine are either a benefit or a hazard. If they're a benefit it's not my problem."
TextWrapping="WrapWithOverflow" />
<Button Margin="0,8,0,0" Content="The cake is a lie!" />
</StackPanel>
</ui:Flyout>
<Button
Command="{Binding FlyoutButtonClickCommand, Mode=OneWay}"
CommandParameter="{Binding Mode=OneWay, RelativeSource={RelativeSource Mode=Self}}"
Content="Open flyout" />
<Button
Command="{Binding OpenCustomMessageBoxCommand}"
CommandParameter="{Binding Mode=OneWay, RelativeSource={RelativeSource Mode=Self}}"
Content="Open UI MessageBox" />
</ui:StackPanel>
</GroupBox>
<GroupBox Header="Media">
<ui:StackPanel Orientation="Horizontal" Spacing="5">
<Image
Height="200"
HorizontalAlignment="Left"
Source="pack://application:,,,/WPFluent.Gallery;component/Assets/pexels-johannes-plenio-1103970.jpg" />
<ui:Image
Height="200"
HorizontalAlignment="Left"
BorderBrush="#33000000"
BorderThickness="2"
CornerRadius="4"
Source="pack://application:,,,/WPFluent.Gallery;component/Assets/pexels-johannes-plenio-1103970.jpg" />
</ui:StackPanel>
</GroupBox>
</ui:StackPanel>
</Page>