ShrlAlgoToolkit/MelskinTest/IconsWindow.xaml

<ms:MelWindow
    Height="450"
    Title="图标预览"
    Width="820"
    d:DataContext="{d:DesignInstance Type=local:IconsWindow}"
    mc:Ignorable="d"
    x:Class="MelskinTest.IconsWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:MelskinTest"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ms="https://github.com/ShrlAlgo/Melskin"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid Margin="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!--  第一行: 搜索框  -->
        <Border
            BorderBrush="LightGray"
            BorderThickness="0,0,0,1"
            Grid.Row="0"
            Padding="10">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <TextBox
                    FontSize="14"
                    Grid.Column="1"
                    Padding="5"
                    Text="{Binding SearchText, UpdateSourceTrigger=PropertyChanged}"
                    VerticalContentAlignment="Center">
                    <ms:InputAssist.Suffix>
                        <ms:IconElement
                            FontSize="18"
                            Foreground="Gray"
                            Margin="0,0,10,0"
                            Symbol="Search"
                            VerticalAlignment="Center" />
                    </ms:InputAssist.Suffix>
                </TextBox>
            </Grid>
        </Border>

        <!--  第二行: 选中图标信息和复制代码  -->
        <Border
            BorderBrush="LightGray"
            BorderThickness="0,0,0,1"
            Grid.Row="1"
            Padding="10">
            <ms:FlexibleRowPanel LayoutMode="Auto">
                <TextBlock
                    FontWeight="Bold"
                    Foreground="{DynamicResource TextPrimaryBrush}"
                    Text="选中图标:"
                    VerticalAlignment="Center" />
                <!--  确保绑定是 OneWay，因为我们只从后台更新UI  -->
                <TextBox
                    FontWeight="Bold"
                    Foreground="{DynamicResource PrimaryNormalBrush}"
                    IsReadOnly="True"
                    Margin="10,0"
                    Padding="5"
                    Text="{Binding SelectedSymbolName, Mode=OneWay, FallbackValue='请选择一个图标...'}"
                    VerticalAlignment="Center"
                    ms:FlexibleRowPanel.IsFill="True" />
                <Button
                    Click="CopyCode_Click"
                    Content="复制代码"
                    Padding="10,5"
                    VerticalAlignment="Center" />
                <ms:ColorPicker
                    Margin="10,0,0,0"
                    VerticalAlignment="Center"
                    x:Name="ColorPicker" />
            </ms:FlexibleRowPanel>
        </Border>

        <!--  第三行: 图标浏览器  -->
        <ListBox
            Grid.Row="2"
            ItemsSource="{Binding SymbolCollectionView}"
            Name="IconItemsControl"
            ScrollViewer.HorizontalScrollBarVisibility="Disabled"
            SelectionChanged="IconItemsControl_SelectionChanged"
            VirtualizingStackPanel.IsVirtualizing="True"
            VirtualizingStackPanel.VirtualizationMode="Recycling">
            <ListBox.Foreground>
                <SolidColorBrush Color="{Binding ElementName=ColorPicker, Path=SelectedColor}" />
            </ListBox.Foreground>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel ItemHeight="80" ItemWidth="80" />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel HorizontalAlignment="Center">
                        <ms:IconElement
                            FontSize="32"
                            Foreground="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListBox}, Path=Foreground}"
                            Symbol="{Binding}"
                            ToolTip="{Binding}" />
                        <TextBlock
                            FontSize="12"
                            HorizontalAlignment="Center"
                            Margin="0,5,0,0"
                            Text="{Binding}"
                            TextWrapping="Wrap"
                            ToolTip="{Binding}"
                            VerticalAlignment="Center" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
            <!--<ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Center" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Background" Value="#CCE8FF" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </ListBox.ItemContainerStyle>-->
        </ListBox>
    </Grid>
</ms:MelWindow>