Icon
按名称绘制的图标,即 uikit:Icon。
示例可交互
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>