ShrlAlgoToolkit/WPFluent.Gallery/Views/Pages/DesignGuidance/IconsPage.xaml

<Page
    x:Class="WPFluent.Gallery.Views.Pages.DesignGuidance.IconsPage"
    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:local="clr-namespace:WPFluent.Gallery.Views.Pages.DesignGuidance"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:models="clr-namespace:WPFluent.Gallery.Models"
    xmlns:ui="https://github.com/ShrlAlgo/WPFluent"
    xmlns:vm="clr-namespace:WPFluent.Gallery.ViewModels.Pages"
    Title="IconsPage"
    d:DataContext="{d:DesignInstance vm:IconsViewModel,
                                     IsDesignTimeCreatable=False}"
    d:DesignHeight="450"
    d:DesignWidth="800"
    
    
    Foreground="{DynamicResource TextFillColorPrimaryBrush}"
    ScrollViewer.CanContentScroll="False"
    mc:Ignorable="d">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <ui:TextBlock
            Grid.Row="0"
            Text="WPF UI uses Fluent System Icons. Although this font was also created by Microsoft, it does not contain all the icons for Windows 11. If you need the missing icons, add Segoe Fluent Icons to your application."
            TextWrapping="WrapWithOverflow" />
        <ui:HyperlinkButton
            Grid.Row="1"
            Margin="0,4,0,0"
            Padding="0"
            Content="了解更多Fluent System Icons"
            NavigateUri="https://github.com/microsoft/fluentui-system-icons" />
        <ui:TextBlock
            Grid.Row="2"
            Margin="0,24,0,0"
            FontTypography="BodyStrong"
            Text="Fluent System Icons Library" />
        <Grid Grid.Row="3">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <CheckBox
                Grid.Column="1"
                MinWidth="0"
                Margin="12,0,0,0"
                Command="{Binding DataContext.CheckboxCheckedCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=local:IconsPage}, Mode=OneWay}"
                CommandParameter="{Binding RelativeSource={RelativeSource Self}, Mode=OneWay}"
                Content="Is filled" />
        </Grid>

        <Grid Grid.Row="4" Margin="0,12,0,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <Border
                Grid.Column="0"
                BorderBrush="{DynamicResource CardBackgroundFillColorDefaultBrush}"
                BorderThickness="1,1,0,0"
                CornerRadius="8,0,0,0">
                <ui:VirtualizingItemsControl
                    Margin="0,24,4,0"
                    Padding="0"
                    ItemsSource="{Binding FilteredIconsCollection, Mode=OneWay}"
                    VirtualizingPanel.CacheLengthUnit="Pixel">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate DataType="{x:Type models:DisplayableIcon}">
                            <Button
                                Width="80"
                                Height="80"
                                Margin="2"
                                Padding="0"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch"
                                Command="{Binding DataContext.IconSelectedCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=local:IconsPage}}"
                                CommandParameter="{Binding Path=Id, Mode=OneTime}"
                                ToolTip="{Binding Name, Mode=OneTime}"
                                ToolTipService.InitialShowDelay="240">
                                <ui:SymbolIcon
                                    Grid.Row="0"
                                    FontSize="28"
                                    Symbol="{Binding Icon, Mode=OneTime}" />
                            </Button>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ui:VirtualizingItemsControl>
            </Border>
            <Border
                Grid.Column="1"
                MinWidth="300"
                Background="{DynamicResource CardBackgroundFillColorSecondaryBrush}"
                BorderBrush="{DynamicResource CardBackgroundFillColorDefaultBrush}"
                BorderThickness="0,1,1,0"
                CornerRadius="0,8,0,0">
                <ui:StackPanel Spacing="10" Margin="24">
                    <ui:TextBlock
                        FontTypography="BodyStrong"
                        Text="{Binding SelectedSymbolName, Mode=OneWay}" />
                    <ui:SymbolIcon
                        HorizontalAlignment="Left"
                        Filled="{Binding IsIconFilled, Mode=OneWay}"
                        FontSize="62"
                        Symbol="{Binding SelectedSymbol, Mode=OneWay}" />
                    <ui:TextBlock
                        FontTypography="BodyStrong"
                        Text="Icon name" />
                    <ui:TextBlock
                        Foreground="{DynamicResource TextFillColorSecondaryBrush}"
                        Text="{Binding SelectedSymbolName, Mode=OneWay}" />
                    <ui:TextBlock
                        FontTypography="BodyStrong"
                        Text="Unicode point" />
                    <ui:TextBlock
                        Foreground="{DynamicResource TextFillColorSecondaryBrush}"
                        Text="{Binding SelectedSymbolUnicodePoint, Mode=OneWay}" />
                    <ui:TextBlock
                        FontTypography="BodyStrong"
                        Text="Text glyph" />
                    <ui:TextBlock
                        Foreground="{DynamicResource TextFillColorSecondaryBrush}"
                        Text="{Binding SelectedSymbolTextGlyph, Mode=OneWay}" />
                    <ui:TextBlock
                        FontTypography="BodyStrong"
                        Text="XAML" />
                    <ui:TextBlock
                        MaxWidth="250"
                        Foreground="{DynamicResource TextFillColorSecondaryBrush}"
                        Text="{Binding SelectedSymbolXaml, Mode=OneWay}"
                        TextWrapping="WrapWithOverflow" />
                </ui:StackPanel>
            </Border>
        </Grid>
    </Grid>
</Page>