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>
使用控件
在主窗口中使用控件:文章来源:https://www.toymoban.com/news/detail-781983.html
<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>
运行程序,效果如下图所示:
文章来源地址https://www.toymoban.com/news/detail-781983.html
到了这里,关于Avalonia创建自定义控件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!