Avalonia与WPF开发时的差异总结

news2024/11/22 12:14:39

1.一个控件绑定到另外一个控件的属性

WPF:

 <TextBox Height="30" Width="100" x:Name="tb"></TextBox>
 <TextBlock Text="{Binding ElementName=tb,Path=Text}" ></TextBlock>

Avalonia:

<TextBox Height="30" Width="100" x:Name="tb"></TextBox>
<TextBlock Text="{Binding #tb.Text}" ></TextBlock>

当然Avalonia也可以采用WPF的的写法,参考文档

2.列表控件中的元素绑定到ViewModel的DataContext

要实现的效果如下:点击删除操作,能移除元素
在这里插入图片描述
WPF的写法不用介绍了吧。

Avalonia的写法如下:
前端代码:

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:vm="clr-namespace:Avalonia_Test.ViewModels"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="Avalonia_Test.Views.MainView"
             x:DataType="vm:MainViewModel">
  <Design.DataContext>
    <!-- This only sets the DataContext for the previewer in an IDE,
         to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
    <vm:MainViewModel />
  </Design.DataContext>
  <UserControl.Styles>
  </UserControl.Styles>
 <StackPanel >
     <DataGrid Name="DG" ItemsSource="{Binding Models}" IsReadOnly="True" AutoGenerateColumns="False">
         <DataGrid.Columns>
             <DataGridTextColumn Header="姓名" Binding="{Binding Name}"></DataGridTextColumn>
             <DataGridTextColumn Header="年龄" Binding="{Binding Age}"></DataGridTextColumn>
             <DataGridTemplateColumn Header="操作" Width="*">
                 <DataGridTemplateColumn.CellTemplate>
                     <DataTemplate>
                         <HyperlinkButton Content="删除" Command="{Binding #DG.((vm:MainViewModel)DataContext).DeleteCmd}" 
                                          CommandParameter="{Binding}"></HyperlinkButton>
                     </DataTemplate>
                 </DataGridTemplateColumn.CellTemplate>
             </DataGridTemplateColumn>
         </DataGrid.Columns>
     </DataGrid>
     
 </StackPanel>
     
  
</UserControl>

后端代码:

public partial class MainViewModel : ViewModelBase
{
    public MainViewModel()
    {
        DeleteCmd = new RelayCommand<DataGridModel>(Delete);
    }

    private void Delete(DataGridModel? obj)
    {
        if (this.Models.Contains(obj))
        {
            this.Models.Remove(obj);
        }
    }

    [ObservableProperty] private string _greeting = "Welcome to Avalonia!";
    public ObservableCollection<DataGridModel> Models { get; } = new ObservableCollection<DataGridModel>()
    {
        new DataGridModel(){Name = "tony1",Age = 10},
        new DataGridModel(){Name = "tony2",Age = 20},
        new DataGridModel(){Name = "tony3",Age = 30},
        new DataGridModel(){Name = "tony4",Age = 40},
    };

    public RelayCommand<DataGridModel> DeleteCmd { get; }
}

其中关键的一句<HyperlinkButton Content="删除" Command="{Binding #DG.((vm:MainViewModel)DataContext).DeleteCmd}" CommandParameter="{Binding}">
将命令绑定到ViewModel的DeleteCmd。

属性触发器

WPF中使用Trigger,Avalonia中使用伪类或者样式选择器

例如实现一个CheckBox勾选时,前景色为红色。

WPF的实现方式:

<Window.Resources>
    <Style TargetType="CheckBox" BasedOn="{StaticResource {x:Type CheckBox}}">
        <Style.Triggers>
            <Trigger Property="IsChecked" Value="True">
                <Setter Property="Foreground" Value="Red"></Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<Grid>
    <CheckBox Height="30" Width="100" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">Test Test</CheckBox>
</Grid>

最后效果:
在这里插入图片描述
Avalonia的实现方式:

<Window.Styles>
   <Style Selector="CheckBox[IsChecked=True]">
        <Setter Property="Foreground" Value="Red"></Setter>
    </Style>
</Window.Styles>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
    <CheckBox Height="30" Width="100">Test Test</CheckBox>
</Grid>

最后实现的效果:
在这里插入图片描述

数据触发器

WPF有专门的数据触发器
Avalonia没有,那么要实现数据触发功能怎么办呢?
据我现在所知,只能使用转换器

样式

Avalonia样式介绍:https://docs.avaloniaui.net/zh-Hans/docs/get-started/wpf/styling

归纳起来就是:

  • WPF的样式作用于同一个控件是相互覆盖的,无论属性设置值是否相同。
    例如,有两个样式,style1设置按钮背景色红色,style2设置前景色为绿色。当style1和style2都作用与一个按钮时,只会出现后作用的样式生效,后来作用的样式会清除之前的样式。

WPF的覆盖效果如下:

<Window.Resources>
    <Style TargetType="CheckBox">
        <Setter Property="Foreground" Value="Red"></Setter>
    </Style>
</Window.Resources>
<Grid>
    <CheckBox Height="30" Width="100" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Content="Test Test">
        <CheckBox.Style>
            <Style TargetType="CheckBox">
                <Setter Property="Background" Value="Blue"></Setter>
            </Style>
        </CheckBox.Style>
    </CheckBox>
</Grid>

在这里插入图片描述
只是背景色变蓝,而前景色不变。
当然可以使用BasedOn来实现样式继承

  • Avalonia的样式Style是相互叠加的,ControlTheme是相互覆盖的。

Avalonia样式的叠加效果如下:

<Window.Styles>
   <Style Selector="CheckBox">
        <Setter Property="Foreground" Value="Red"></Setter>
    </Style>
    <Style Selector="CheckBox">
        <Setter Property="Background" Value="Blue"></Setter>
    </Style>
</Window.Styles>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
    <CheckBox Height="30" Width="100">Test Test</CheckBox>
</Grid>

在这里插入图片描述
结合以上案例及文档,大概得出如下结论:
Avalonia的ControlTheme与WPF的Style相似。
Avalnia增加Style配合Selector使样式设置更为灵活

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2082765.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

梯度下降法求解线性回归

文章目录 线性回归损失函数平均绝对误差&#xff08;MAE&#xff09;均方误差&#xff08;MSE&#xff09; 最小二乘法最小二乘法代数推导最小二乘法矩阵推导 线性回归 Python 实现线性回归 scikit-learn 实现 梯度下降法梯度下降法的原理 梯度下降法求解线性回归 线性回归 线…

Java SpringBoot实战:如何构建学生档案管理系统实现信息管理

✍✍计算机毕业编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java、…

【ocr识别003】动物检疫合格证明单据OCR识别应用案例(已更新)

1.欢迎点赞、关注、批评、指正,互三走起来,小手动起来! 2.了解、学习OCR相关技术知识领域,结合日常的场景进行测试、总结。如本文的实践:以动物检疫合格证明单据识别为例,探索OCR文本推理应用示例场景。 3.有其他场景问题,欢迎留言或加微沟通。 文章目录 1.简要介绍2.`O…

【Qt窗口】—— 状态栏

目录 1.1 状态栏的创建 1.2 在状态栏中显示实时消息 1.3 在状态栏中显示永久消息 状态栏是应用程序中输出简要信息的区域。⼀般位于主窗口的最底部&#xff0c;⼀个窗⼝中最多只能有⼀个状态栏。在Qt中&#xff0c;状态栏是通过QStatusBar类来实现的。在状态栏中可以显示的消…

Navicat Premium 自定义字体大小

常用编程软件自定义字体大全首页 文章目录 前言具体操作1. 打开工具对话框2. 设置编辑器字体大小3. 设置查询表格字体大小 前言 Navicat Premium 自定义字体大小&#xff0c;统一设置为 Cascadia Code SemiBold &#xff0c;大小为 12 具体操作 【工具】>【选项】>【编…

内网渗透小知识

下载proxychains这个工具 在下面这里进行代理配置 然后再里面添加内网端口。在设置浏览器的代理&#xff0c;就可以通过内网访问内网资源 然后在浏览器中设置&#xff0c;设置socks后可以访问很多。 如果映射http的话只可以访问一个 然后如果在内网扫描不了IP的话使用上面的代…

AGI系列(8)零门槛信息抓取利器打造,免费自动化抓取推特上的热点内容

应该大家都或多或少的听说过 X/Twitter。它可不只是个普通的社交平台&#xff01;它还是个信息宝库&#xff0c;里面有各种有趣的内容&#xff0c;比如&#xff1a;想知道最新热点&#xff1f;想和全世界的人聊天&#xff1f;Twitter都能搞定&#xff01;它的搜索功能特别厉害&…

测试职场经验 | 缺陷如何分类

说到bug&#xff0c;大家可能更多的认为是错误&#xff0c;有问题的地方&#xff0c;但是它的原意是”臭虫”,是不是有了新的发现&#xff01;而真正找出电脑程序中第一个bug的女程序员&#xff0c;来自于计算机软件第一夫人&#xff1a;Grace Hopper&#xff0c;一次”意外”的…

取模+背包

前言&#xff1a;一开始我想错了&#xff0c;一开始我想的是直接统计每一项模完后的和&#xff0c;我们只要能够取到一半&#xff0c;那么就有解&#xff0c;但是时间复杂度太大了 我们做推导 x y s u m x y sum xysum x − y k ∗ n x - y k * n x−yk∗n 那么我们可…

pikachu靶场通关攻略(XSS)(1~10关)

反射型xss(get) 步骤一&#xff0c;我们先打开网站&#xff08;第一关&#xff09; 步骤二&#xff0c;首先来到第一关我们先随便输入一个数字1&#xff0c;下边显示谁是1&#xff0c;我不在乎! 步骤三&#xff0c;输入代码&#xff1a;<script>alert(1)</script>…

Codeforces Round 966 (Div. 3) A~F

A.Primary Task&#xff08;模拟&#xff09; 题意&#xff1a; 德米特里在黑板上写下了 t t t个整数&#xff0c;这很好。他肯定自己丢失了其中一个重要的整数 n n n&#xff0c;这就不好了。 整数 n n n的形式是 10 10 10 ^ x x x( x ≥ 2 x\ge 2 x≥2)&#xff0c;其中符…

数字签名:信息安全的新屏障

随着互联网的普及和信息技术的发展&#xff0c;信息安全问题日益凸显。数字签名作为一种重要的信息安全技术&#xff0c;为电子数据传输提供了有效保障。本文将介绍数字签名的基本原理、应用场景及其在保障信息安全方面的作用。 一、数字签名概述 数字签名是一种基于公钥密码…

深度学习基础—卷积运算

1.1.卷积运算法则 在计算机视觉领域&#xff0c;卷积运算撑起了半边天&#xff0c;因此在学习计算机视觉前&#xff0c;首先来了解一下卷积运算是如何运算的。 假设正在进行边缘检测&#xff0c;垂直边缘检测会把图片中接近垂直的边缘提取出来&#xff0c;即人的侧边、栏杆等。…

组合式API-reactive和ref函数,computed计算属性,watch函数

一.reactive&#xff08;&#xff09;接收一个对象类型的数据&#xff0c;返回一个响应式的对象&#xff1a; <script setup> import {reactive} from vue const state reactive({count:100 }) const setCount () > {state.count } </script> <template>…

MySql【数据查询语言DQL】

DQL[非常重要] DQL 主要指查询语句,有查询单表数据,也有查多表数据表,单表查询 基本查询 条件查询 模糊查询 排序查询 聚合查询 去重查询 分组查询 限制查询 1、 数据准备 将发的stu.sql导入到MySql中 2、 基本查询 select 字段1,字段2,... from 表名; 查询返回的是一张…

吉利银河L6 第二年保险 出险对保费的影响

出险情况 出险一次 自己责任 自己修车走车损,1000多元; 给对方修车走交强险,1000多元. 导致保费上涨1100左右. 车损,三者等项目都上涨 注意:如果出险流程没走完(不会导致第二年报价上涨),恰好可以买第二年保险(保险到期前一个月),如果你买了,这次出险没给你加钱,会在第二年给…

远程控制电脑的软件有哪些?精选4个小妙招分享!

远程控制电脑的软件多种多样&#xff0c;它们各自具有不同的特点和优势。 以下是精选的四种远程控制软件及其使用小妙招&#xff0c;供您参考&#xff1a; 1.安企神 软件特点&#xff1a; 远程控制&#xff1a; 实时桌面控制&#xff1a;能够实时查看和控制远程计算机的桌面…

[译] RAGFlow 使用说明

本文翻译整理自&#xff1a;https://ragflow.io/docs/dev/ 本文档更多是 RAGFlow 系统操作内容&#xff0c;虽然不难/深刻&#xff0c;但有些细节没有注意&#xff0c;在搭建和使用的时候就容易出各类问题。所以读完这个文档是有必要的。 文章目录 快速启动一、先决条件二、启…

插入排序:直接插入排序、希尔排序详细说明

插入排序 基本思想&#xff1a;直接插入排序是⼀种简单的插入排序法&#xff0c;其基本思想是&#xff1a;把待排序的记录按其关键码值的大小逐个插入到⼀个已经排好序的有序序列中&#xff0c;直到所有的记录插入完为止&#xff0c;得到⼀个新的有序序列。 在玩扑克牌整理手中…

【操作系统】实验:指示灯开关控制

目录 一、实验目的 二、实验内容 三、实验步骤 四、记录与处理 五、思考 六、成果文件提取链接 一、实验目的 学习51单片机通用I/O口的基本输入/输出功能&#xff0c;掌握汇编程序编程与仿真设计方法。 二、实验内容 &#xff08;1&#xff09;创建一个包含80C51固件&am…