ShrlAlgoToolkit/WPFluent.Gallery/Views/Pages/BasicInputPage.xaml

<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="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <ui:Anchor
                    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"
                    x:Name="CBDisableAnchor"
                    Content="禁用anchor" />
            </Grid>
        </GroupBox>
        <GroupBox Header="Badge">
            <ui:Badge Appearance="Caution" Content="徽章" />
        </GroupBox>
        <GroupBox Header="IconButton">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <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="默认按钮"
                        IsEnabled="{Binding ElementName=CBDisableButton,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}" />
                    <ui:Button
                        Grid.Column="0"
                        Content="UiButton"
                        Icon="{ui:SymbolIcon Fluent24}"
                        IsEnabled="{Binding ElementName=CBDisableButton,Path=IsChecked,Converter={StaticResource InvertBooleanConverter}}" />
                    <ui:Button
                        HorizontalAlignment="Center"
                        Appearance="Primary"
                        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="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"
                        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 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>
                <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="你好" 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>
                <StackPanel Grid.Column="0" 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}}" />
                    <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>
                <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" Orientation="Horizontal" HorizontalAlignment="Right">
                    <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
                        Width="200"
                        Margin="10,0"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Center"
                        Value="{Binding ViewModel.RangeSliderValue, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}"
                        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 ViewModel.RangeSliderValue, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type pages:BasicInputPage}, Mode=FindAncestor}}" />
                </StackPanel>
                <Grid Grid.Column="1">
                    <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 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>

    </ui:StackPanel>
</Page>