Avalonia PathIcon使用

PathIcon是一个Avalonia内置的控件，可以根据Geometry绘制一个图标。

源码

PathIcon间接继承TemplatedControl，只有一个Geometry类型的依赖属性Data：

public class PathIcon : IconElement
{
    static PathIcon()
    {
        AffectsRender<PathIcon>(DataProperty);
    }

    public static readonly StyledProperty<Geometry> DataProperty =
        AvaloniaProperty.Register<PathIcon, Geometry>(nameof(Data));

    public Geometry Data
    {
        get { return GetValue(DataProperty); }
        set { SetValue(DataProperty, value); }
    }
}

public abstract class IconElement : TemplatedControl
{
}

外观也很简单，一个Path，Data绑定PathIcon的属性Data，填充色绑定属性Foreground：

<ControlTheme x:Key="{x:Type PathIcon}" TargetType="PathIcon">
  <Setter Property="Background" Value="Transparent" />
  <Setter Property="Height" Value="{DynamicResource IconElementThemeHeight}" />
  <Setter Property="Width" Value="{DynamicResource IconElementThemeWidth}" />
  <Setter Property="Template">
    <ControlTemplate>
      <Border Background="{TemplateBinding Background}">
        <Viewbox Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
          <Path Fill="{TemplateBinding Foreground}" Data="{TemplateBinding Data}" Stretch="Uniform" />
        </Viewbox>
      </Border>
    </ControlTemplate>
  </Setter>
</ControlTheme>

编辑Geometry

首先要创建Geometry，Avalonia UI Fluent Icons提供了一系列的图标集合，见https://avaloniaui.github.io/icons.html。获取所需的图标后，如果需要微调，可以使用Blend进行调整。

比如创建一个登陆窗口，需要一个账号、密码图标：

1. 打开Blend，创建一个WPF项目，新建一个UserControl；
2. 从Fluent Icons中查找账号相关的图标，复制Geometry的内容；
3. 在UserControl的布局中，添加一个Path，Data属性粘贴上述复制的内容；
4. 在编辑窗口中新增、删除或拖动控制点进行微调，在属性窗口中可以选择填充色、画笔颜色等；
5. 重复2-3-4，编辑密码图标；
   

使用PathIcon

1. 在创建的Avalonia项目中，添加一个资源字典文件，将使用Blend编辑的Geometry复制过来：

<ResourceDictionary xmlns="https://github.com/avaloniaui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <!-- Add Resources Here -->
	<StreamGeometry x:Key="login">Blend编辑的账号图标...</StreamGeometry>
	<StreamGeometry x:Key="password">Blend编辑的密码图标...</StreamGeometry>
</ResourceDictionary>

2. 将资源文件添加到App资源中：

<!-- App.axaml -->
<Application.Resources>
	<ResourceDictionary>
		<ResourceDictionary.MergedDictionaries>
			<ResourceInclude Source="avares://PathIconUsing/Contents/Icons.axaml"/>
		</ResourceDictionary.MergedDictionaries>
	</ResourceDictionary>
</Application.Resources>

3. 编辑登陆窗口视图：

• 添加两个TextBox，一个按钮，并调整布局；
• TextBox的InnerLeftContent内容使用PathIcon控件，PathIcon的Data属性使用1中定义的Geometry，Foreground属性使用在Blend中设置的填充色；

<Grid RowDefinitions="*,*,*" Height="150" Width="250">
	<TextBox VerticalAlignment="Center">
		<TextBox.InnerLeftContent>
			<PathIcon Data="{DynamicResource ResourceKey=login}" Margin="5" Foreground="#FF1AA2D9"/>
		</TextBox.InnerLeftContent>
	</TextBox>
	<TextBox Grid.Row="1" VerticalAlignment="Center">
		<TextBox.InnerLeftContent>
			<PathIcon Data="{DynamicResource ResourceKey=password}" Margin="5" Foreground="#FF1AA2D9"/>
		</TextBox.InnerLeftContent>
	</TextBox>
	<Button Content="登陆" Grid.Row="3" Width="250"
			HorizontalContentAlignment="Center" Background="#FF1AA2D9" Foreground="White"/>
</Grid>

效果如下图：