MyAvaloniaDemo/Views/Pages/IconsPageView.axaml

<reactive:ReactiveUserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:vm="using:MyAvaloniaApp.ViewModels.Pages"
             xmlns:converters="using:MyAvaloniaApp.Converters"
             xmlns:heroicons="clr-namespace:HeroIconsAvalonia.Controls;assembly=HeroIconsAvalonia"
             xmlns:reactive="clr-namespace:Avalonia.ReactiveUI;assembly=Avalonia.ReactiveUI"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="600"
             x:Class="MyAvaloniaApp.Views.Pages.IconsPageView"
             x:DataType="vm:IconsPageViewModel">
    
    <Design.DataContext>
        <vm:IconsPageViewModel />
    </Design.DataContext>
    
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        
        <!-- 页面标题 -->
        <StackPanel Grid.Row="0" Margin="0,0,0,20">
            <TextBlock Text="HeroIcons 图标库" 
                       FontSize="24" 
                       FontWeight="Bold"
                       Foreground="{StaticResource TextPrimary}"/>
            <TextBlock Text="浏览和选择 HeroIcons 图标" 
                       FontSize="14" 
                       Foreground="{StaticResource SecondaryGrayDark}"
                       Margin="0,5,0,0"/>
            
            <!-- HeroIcons.Avalonia 静态示例 -->
            <StackPanel Orientation="Horizontal" Margin="0,15,0,0" Spacing="20">
                <TextBlock Text="HeroIcons.Avalonia 示例：" 
                           FontSize="14" 
                           FontWeight="SemiBold"
                           Foreground="{StaticResource TextPrimary}"
                           VerticalAlignment="Center"/>
                
                <!-- 示例图标 -->
                <StackPanel Orientation="Horizontal" Spacing="15">
                    <!-- Home 图标 -->
                    <StackPanel Spacing="5">
                        <Border Background="{StaticResource BackgroundLight}"
                                BorderBrush="{StaticResource BorderMedium}"
                                BorderThickness="1"
                                CornerRadius="6"
                                Width="40" Height="40"
                                HorizontalAlignment="Center">
                            <heroicons:HeroIcon Foreground="{StaticResource TextPrimary}" Type="Home" Width="20" Height="20"/>
						</Border>
                        <TextBlock Text="Home" FontSize="10" 
                                   Foreground="{StaticResource SecondaryGrayDark}"
                                   HorizontalAlignment="Center"/>
                    </StackPanel>
                    
                    <!-- User 图标 -->
                    <StackPanel Spacing="5">
                        <Border Background="{StaticResource BackgroundLight}"
                                BorderBrush="{StaticResource BorderMedium}"
                                BorderThickness="1"
                                CornerRadius="6"
                                Width="40" Height="40"
                                HorizontalAlignment="Center">
                            <heroicons:HeroIcon Foreground="{StaticResource TextPrimary}" Type="User" Width="20" Height="20"/>
                        </Border>
                        <TextBlock Text="User" FontSize="10" 
                                   Foreground="{StaticResource SecondaryGrayDark}"
                                   HorizontalAlignment="Center"/>
                    </StackPanel>
                    
                    <!-- Settings 图标 -->
                    <StackPanel Spacing="5">
                        <Border Background="{StaticResource BackgroundLight}"
                                BorderBrush="{StaticResource BorderMedium}"
                                BorderThickness="1"
                                CornerRadius="6"
                                Width="40" Height="40"
                                HorizontalAlignment="Center">
                            <heroicons:HeroIcon Foreground="{StaticResource TextPrimary}" Type="Cog6Tooth" Width="20" Height="20"/>
                        </Border>
                        <TextBlock Text="Settings" FontSize="10" 
                                   Foreground="{StaticResource SecondaryGrayDark}"
                                   HorizontalAlignment="Center"/>
                    </StackPanel>
                    
                    <!-- Heart 图标 -->
                    <StackPanel Spacing="5">
                        <Border Background="{StaticResource BackgroundLight}"
                                BorderBrush="{StaticResource BorderMedium}"
                                BorderThickness="1"
                                CornerRadius="6"
                                Width="40" Height="40"
                                HorizontalAlignment="Center">
                            <heroicons:HeroIcon Foreground="{StaticResource TextPrimary}" Type="Heart" Width="20" Height="20"/>
                        </Border>
                        <TextBlock Text="Heart" FontSize="10" 
                                   Foreground="{StaticResource SecondaryGrayDark}"
                                   HorizontalAlignment="Center"/>
                    </StackPanel>
                </StackPanel>
            </StackPanel>
        </StackPanel>
        
        
        <!-- HeroIcons MVVM 数据绑定网格 -->
        <ScrollViewer Grid.Row="1" 
                      VerticalScrollBarVisibility="Auto"
                      HorizontalScrollBarVisibility="Disabled">
            <ItemsControl ItemsSource="{Binding HeroIcons}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <UniformGrid Columns="8" Margin="10"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Border Background="{StaticResource BackgroundLight}"
                                BorderBrush="{StaticResource BorderLight}"
                                BorderThickness="1"
                                CornerRadius="8"
                                Margin="5"
                                Padding="15">
                            <Border.Styles>
                                <Style Selector="Border">
                                    <Setter Property="Background" Value="{StaticResource BackgroundLight}"/>
                                    <Setter Property="BorderBrush" Value="{StaticResource BorderLight}"/>
                                </Style>
                                <Style Selector="Border:pointerover">
                                    <Setter Property="Background" Value="{StaticResource BackgroundLightHover}"/>
                                    <Setter Property="BorderBrush" Value="{StaticResource PrimaryBlue}"/>
                                </Style>
                            </Border.Styles>
                            
                            <Button Background="Transparent"
                                    BorderThickness="0"
                                    Command="{Binding $parent[UserControl].DataContext.SelectIconCommand}"
                                    CommandParameter="{Binding}"
                                    HorizontalAlignment="Stretch"
                                    VerticalAlignment="Stretch">
                                <Button.Styles>
                                    <Style Selector="Button">
                                        <Setter Property="Background" Value="Transparent"/>
                                    </Style>
                                    <Style Selector="Button:pointerover">
                                        <Setter Property="Background" Value="Transparent"/>
                                    </Style>
                                </Button.Styles>
                                
                                <StackPanel>
                                    <!-- HeroIcon 控件 -->
                                    <Border Background="{StaticResource BackgroundWhite}"
                                            BorderBrush="{StaticResource BorderMedium}"
                                            BorderThickness="1"
                                            CornerRadius="6"
                                            Width="48" Height="48"
                                            HorizontalAlignment="Center"
                                            Margin="0,0,0,10">
                                        <heroicons:HeroIcon Type="{Binding IconType}"
                                                           Kind="{Binding IconKind}"
                                                           Width="24" Height="24"
                                                           Foreground="{StaticResource TextPrimary}"/>
                                    </Border>
                                    
                                    <!-- 图标信息 -->
                                    <TextBlock Text="{Binding DisplayName}"
                                               FontSize="10"
                                               Foreground="{StaticResource SecondaryGrayDark}"
                                               HorizontalAlignment="Center"
                                               TextWrapping="Wrap"
                                               MaxWidth="120"/>
                                </StackPanel>
                            </Button>
                        </Border>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ScrollViewer>
    </Grid>
</reactive:ReactiveUserControl>