526互联

Avalonia创建自定义控件

发布时间 2024-01-12 00:11:49作者: louzi

Avalonia中有三个主要的控件类型：用户控件（User Control）、模板化控件（Templated Control）、基本控件（Basic Control）。创建自定义控件时选择适合的控件类型进行创建，三种控件类型适用场景如下（参考文档）：

  • UserControl：适合创建Views或Pages，和创建Window一样，创建一个新的UserControl，然后添加控件即可；
  • TemplatedControl：最常用，能在多个程序之间共享的通用控件。Avalonia定义的大多数标准控件都属于这一类；
  • BasicControl：基础控件，通过重写Visual.Render()方法使用几何图形进行绘制，如TextBlock和Image；

本文记录如何创建一个通用的模板化控件。

添加依赖属性

添加新建项，选择Avalonia TemplatedControl，添加后会生成一个axaml文件和一个cs文件。如实现一个ImageButton，继承自Button，添加一个IImage依赖属性：

public class ImageButton : Button
{
    public static readonly StyledProperty<IImage?> SourceProperty =
        AvaloniaProperty.Register<ImageButton, IImage?>(nameof(Source));

    public IImage? Source
    {
        get => GetValue(SourceProperty);
        set => SetValue(SourceProperty, value);
    }
}

设计外观

修改axaml文件，为ImageButton设计外观。ControlTemplate中包含了一个Image控件，其Source属性绑定到添加的Source依赖属性，以显示图片。设置Transitions属性，监听Image的RenderTransform属性，当其变化时使用过度动画处理。添加伪类，处理鼠标悬停时的效果（图片透明度变化）和按下时的效果（图片缩放）。

<Styles xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:controls="using:AvaloniaAppTest">

  <Style Selector="controls|ImageButton">
	  <Setter Property="Background" Value="Orange"/>
	  <Setter Property="BorderBrush" Value="Blue"/>
	  <Setter Property="BorderThickness" Value="1.2"/>
	  <Setter Property="CornerRadius" Value="5"/>
	  <Setter Property="Padding" Value="3"/>
	  <Setter Property="HorizontalContentAlignment" Value="Center"/>
	  <Setter Property="VerticalContentAlignment" Value="Center" />
	  <Setter Property="Template">
		  <ControlTemplate>
			  <Border BorderBrush="{TemplateBinding BorderBrush}" 
					  BorderThickness="{TemplateBinding BorderThickness}"
					  CornerRadius="{TemplateBinding CornerRadius}"
					  Background="{TemplateBinding Background}"
					  Padding="{TemplateBinding Padding}">
				  <Image Source="{TemplateBinding Source}"/>
			  </Border>
		  </ControlTemplate>
	  </Setter>

	  <Style Selector="^ /template/ Image">
		  <Setter Property="Transitions">
			  <Transitions>
				  <TransformOperationsTransition Property="RenderTransform" Duration="0:0:.075" />
			  </Transitions>
		  </Setter>
	  </Style>
	  <Style Selector="^:pointerover">
		  <Style Selector="^ /template/ Image">
			  <Setter Property="Opacity" Value="0.8"/>
		  </Style>
	  </Style>
	  <Style Selector="^:pressed">
		  <Style Selector="^ /template/ Image">
			  <Setter Property="RenderTransform">
				  <ScaleTransform ScaleX="0.8" ScaleY="0.8" />
			  </Setter>
		  </Style>
	  </Style>
  </Style>
</Styles>

添加样式到应用程序中

在App.axaml中，添加ImageButton的样式文件：

<Application.Styles>
    <FluentTheme />
	<StyleInclude Source="avares://AvaloniaAppTest/Controls/ImageButton.axaml"/>
</Application.Styles>

如果创建了许多样式文件，可以添加一个Styles(Avalonia)文件，这是一个axaml文件。将所有的样式文件使用StyleInclude添加到该文件中，然后将该文件添加到App.axaml中：

<!-- CustomControls.axaml -->
<Styles xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
    <!-- Add Styles Here -->
	<StyleInclude Source="avares://AvaloniaAppTest/Controls/ImageButton.axaml"/>
	<StyleInclude Source="avares://AvaloniaAppTest/Controls/ImageTextButton.axaml"/>
</Styles>

<!-- App.axaml -->
<Application.Styles>
    <FluentTheme />
	<StyleInclude Source="avares://AvaloniaAppTest/Controls/CustomControls.axaml"/>
</Application.Styles>

使用控件

在主窗口中使用控件：

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:AvaloniaAppTest.ViewModels"
		xmlns:cc="using:AvaloniaAppTest"
        x:Class="AvaloniaAppTest.Views.MainWindow"
        x:DataType="vm:MainWindowViewModel"
        Icon="/Assets/avalonia-logo.ico"
        Title="AvaloniaAppTest">

	<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
		<cc:ImageButton Source="avares://AvaloniaAppTest/Assets/csharp.png" Width="64"/>
	</StackPanel>
</Window>

运行程序，效果如下图所示：