Avalonia创建自定义控件

这篇具有很好参考价值的文章主要介绍了Avalonia创建自定义控件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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创建自定义控件文章来源地址https://www.toymoban.com/news/detail-781983.html

到了这里,关于Avalonia创建自定义控件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • pyqt中有connect用法的控件

    在PyQt中,以下控件可以使用connect方法进行信号与槽的连接: QPushButton:连接点击按钮的信号clicked QAction:连接菜单项或工具栏按钮的信号triggered QComboBox:连接选择项发生改变的信号currentIndexChanged QLineEdit:连接文本内容改变的信号textChanged QRadioButton:连接单选按钮状态切换

    2024年02月16日
    浏览(28)
  • 创建Avalonia 模板项目-基础

    Avalonia是一个跨平台的.NET框架,用于构建漂亮、现代的图形用户界面(GUI)。使用Avalonia,您可以从单个代码库创建适用于Windows、macOS、 Linux、iOS、Android和Web Assembly的原生应用程序。 本文部分内容来自官方文档地址:官方文档 Avalonia兼容所有支持.NET Standard 2.0的平台。您可以

    2024年02月11日
    浏览(43)
  • Avalonia的自定义用户组件

    Avalonia中的自定义用户控件 Avalonia是一个跨平台的.NET UI框架,它允许开发者使用C#和XAML来构建丰富的桌面应用程序。 自定义用户控件(UserControl)是Avalonia中一种重要的组件,它允许我们将多个控件组合成一个可重用的单元。 本文将介绍如何在Avalonia中定义和使用自定义用户

    2024年04月08日
    浏览(43)
  • 如何在Avalonia11中设置自定义字体

    由于avalonia默认的中文字体显示的效果不太理想,我们需要下载一些自定义的字体,来优化UI的显示效果。avalonia的官方文档地址。 对我在项目中运用的自定义字体操作做一个记录和分享,希望对大家有帮助。对应的代码都在基于Avalonia的GPT的AI会话项目用应用。采用的是最新

    2024年02月15日
    浏览(60)
  • SpringBoot中有几种定义Bean的方式?

    注意:@ControllerAdvice相当于对于Controller的切面,可以绑定PropertyEditor。 (类似于AOP,但是底层不是AOP实现。) 注意:@Configuration 主要标识一个Bean是一个配置Bean,利用这个Bean可以对Spring进行配置,比如扫描路径、定义其他的Bean。 这是我们其他所有方法的底层实现。 MyApplic

    2024年02月02日
    浏览(39)
  • 洛伦兹力的定义是什么?洛伦兹力在生活中有哪些应用?

    问题描述: 洛伦兹力的定义是什么?洛伦兹力在生活中有哪些应用? 问题解答: 洛伦兹力(Lorentz force)是指在带电粒子运动时所受到的电磁力。它是由 电荷在磁场中运动时与磁场相互作用而产生的力。洛伦兹力的数学表达式如下: F=q(E+v×B) 其中: F 是洛伦兹力; q 是电荷

    2024年01月19日
    浏览(49)
  • .NET / C# 开发 Ubuntu Desktop 跨平台图形界面桌面程序 Avalonia - Visual Studio 安装/创建/运行指南 (一)

    Avalonia 是一个开源的跨平台应用程序框架,用于构建桌面应用程序。它使用 C# 和 XAML 进行开发,可以在 Windows、macOS、iOS、Android 及 Linux 等多个平台上运行。Avalonia 项目地址:https://github.com/AvaloniaUI/Avalonia 本文快速介绍如何入门使用 Avalonia 编写和执行 Ubuntu Desktop 图形界面桌面

    2024年02月01日
    浏览(71)
  • 解决element的select组件创建新的选项可多选且opitions数据源中有数据的情况下,回车不能自动选中创建的问题

    最近开发项目使用element-plus库内的select组件,其中有提供一个创建新的选项的用法,但是发现一些小问题,在此记录 “element-plus”: “^2.3.9”, “vue”: “^3.3.4”, 1、在options数据源中无数据的时候,在输入框中输入要创建的选项,ele会自动帮我们选中第一条,然后回车后会自

    2024年02月11日
    浏览(30)
  • 【练习】条件变量:创建三个线程 id号为ABC,三个线程循环打印自己的ID号,运行顺序为 ABCABC

    题目: 创建三个线程 id号为ABC,三个线程循环打印自己的ID号,运行顺序为 ABCABC...... 要求使用条件变量 运行结果:死循环输出ABCn

    2024年02月14日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包