跳到正文
浏览文档

Icon

按名称绘制的图标,即 uikit:Icon。

示例可交互
Icon — Avalonia UIKit
Live demo unavailable
<StackPanel Spacing="16" HorizontalAlignment="Left">
  <WrapPanel ItemSpacing="12" LineSpacing="12">
    <uikit:Icon Kind="Info" />
    <uikit:Icon Kind="Map" />
    <uikit:Icon Kind="Bot" />
    <uikit:Icon Kind="Github" />
    <uikit:Icon Kind="Calendar" />
    <uikit:Icon Kind="Globe" />
    <uikit:Icon Kind="Heart" />
    <uikit:Icon Kind="Settings" />
    <uikit:Icon Kind="Palette" />
  </WrapPanel>
  <WrapPanel ItemSpacing="12" LineSpacing="12">
    <uikit:Icon Classes="large" Kind="Maximize" Foreground="{DynamicResource UIKit.Green}" />
    <uikit:Icon Classes="large" Kind="Minimize" Foreground="{DynamicResource UIKit.Red}" />
    <uikit:Icon Classes="large" Kind="SortAscending" />
    <Button Classes="ghost small icon-only">
      <uikit:Icon Kind="Heart" />
    </Button>
    <Button Classes="outline">
      <StackPanel Orientation="Horizontal" Spacing="8">
        <uikit:Icon Kind="Search" />
        <TextBlock Text="Search" />
      </StackPanel>
    </Button>
  </WrapPanel>
</StackPanel>

用法

uikit:Icon 按名称绘制图标:Kind 是 IconName 中的一个值,即 GPUI Kit 同捆的每个图标(可在图标页面浏览)。主题自带组件的图标,包的生成器会补充应用用到的其他图标(参见图标)。Kind 默认为 None,此时 Data 交由应用负责。它是 PathIcon,因此 Icon 的尺寸样式类、Foreground,以及按钮和菜单赋予其图标的尺寸,都以同样的方式作用于它。IconNames.ResourceKey 在代码中给出图标的几何资源。

示例

主题自带的图标,即 IconNames.Bundled;指向某个图标可查看其名称。

图库可交互
Live demo unavailable
<ItemsControl Width="560" HorizontalAlignment="Left" ItemsSource="{x:Static local:IconSamples.All}">
  <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <WrapPanel ItemSpacing="4" LineSpacing="4" />
    </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>
  <ItemsControl.ItemTemplate>
    <DataTemplate x:DataType="uikit:IconName">
      <Border Width="36" Height="36" CornerRadius="6" Background="Transparent" ToolTip.Tip="{Binding}">
        <uikit:Icon Kind="{Binding}" />
      </Border>
    </DataTemplate>
  </ItemsControl.ItemTemplate>
</ItemsControl>