Avalonia创建自定义控件

  • Avalonia创建自定义控件已关闭评论
  • 30 次浏览
  • A+
所属分类:.NET技术
摘要

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

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> 

运行程序,效果如下图所示:
Avalonia创建自定义控件