Shrlalgo.RvKits/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"
    Title="IconsPage"
    controls:PageControlDocumentation.DocumentationType="{x:Type ui:SymbolIcon}"
    d:DataContext="{d:DesignInstance local:IconsPage,
                                     IsDesignTimeCreatable=False}"
    d:DesignHeight="450"
    d:DesignWidth="800"
    ui:Design.Background="{DynamicResource ApplicationBackgroundBrush}"
    ui:Design.Foreground="{DynamicResource TextFillColorPrimaryBrush}"
    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="Find out more about 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>
            <ui:AutoSuggestBox
                Grid.Column="0"
                MinWidth="320"
                Margin="0,4,0,0"
                HorizontalAlignment="Left"
                PlaceholderText="Search icons"
                Text="{Binding ViewModel.AutoSuggestBoxText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
            <CheckBox
                Grid.Column="1"
                MinWidth="0"
                Margin="12,0,0,0"
                Command="{Binding ViewModel.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="{ui:ThemeResource CardBackgroundFillColorDefaultBrush}"
                BorderThickness="1,1,0,0"
                CornerRadius="8,0,0,0">
                <ui:VirtualizingItemsControl
                    Margin="0,24,4,0"
                    Padding="0"
                    ItemsSource="{Binding ViewModel.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 ViewModel.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="{ui:ThemeResource CardBackgroundFillColorSecondaryBrush}"
                BorderBrush="{ui:ThemeResource CardBackgroundFillColorDefaultBrush}"
                BorderThickness="0,1,1,0"
                CornerRadius="0,8,0,0">
                <Grid Margin="24">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>

                    <ui:TextBlock
                        Grid.Row="0"
                        FontTypography="BodyStrong"
                        Text="{Binding ViewModel.SelectedSymbolName, Mode=OneWay}" />
                    <ui:SymbolIcon
                        Grid.Row="1"
                        Margin="0,30,0,24"
                        HorizontalAlignment="Left"
                        Filled="{Binding ViewModel.IsIconFilled, Mode=OneWay}"
                        FontSize="62"
                        Symbol="{Binding ViewModel.SelectedSymbol, Mode=OneWay}" />
                    <ui:TextBlock
                        Grid.Row="2"
                        FontTypography="BodyStrong"
                        Text="Icon name" />
                    <ui:TextBlock
                        Grid.Row="3"
                        Foreground="{ui:ThemeResource TextFillColorSecondaryBrush}"
                        Text="{Binding ViewModel.SelectedSymbolName, Mode=OneWay}" />
                    <ui:TextBlock
                        Grid.Row="4"
                        Margin="0,8,0,0"
                        FontTypography="BodyStrong"
                        Text="Unicode point" />
                    <ui:TextBlock
                        Grid.Row="5"
                        Foreground="{ui:ThemeResource TextFillColorSecondaryBrush}"
                        Text="{Binding ViewModel.SelectedSymbolUnicodePoint, Mode=OneWay}" />
                    <ui:TextBlock
                        Grid.Row="6"
                        Margin="0,8,0,0"
                        FontTypography="BodyStrong"
                        Text="Text glyph" />
                    <ui:TextBlock
                        Grid.Row="7"
                        Foreground="{ui:ThemeResource TextFillColorSecondaryBrush}"
                        Text="{Binding ViewModel.SelectedSymbolTextGlyph, Mode=OneWay}" />
                    <ui:TextBlock
                        Grid.Row="8"
                        Margin="0,8,0,0"
                        FontTypography="BodyStrong"
                        Text="XAML" />
                    <ui:TextBlock
                        Grid.Row="9"
                        MaxWidth="250"
                        Foreground="{ui:ThemeResource TextFillColorSecondaryBrush}"
                        Text="{Binding ViewModel.SelectedSymbolXaml, Mode=OneWay}"
                        TextWrapping="WrapWithOverflow" />
                </Grid>
            </Border>
        </Grid>
    </Grid>
</Page>