惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

大猫的无限游戏
大猫的无限游戏
H
Hackread – Cybersecurity News, Data Breaches, AI and More
博客园_首页
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
D
Docker
酷 壳 – CoolShell
酷 壳 – CoolShell
宝玉的分享
宝玉的分享
Martin Fowler
Martin Fowler
美团技术团队
量子位
M
MIT News - Artificial intelligence
Apple Machine Learning Research
Apple Machine Learning Research
阮一峰的网络日志
阮一峰的网络日志
博客园 - 叶小钗
博客园 - 三生石上(FineUI控件)
腾讯CDC
Hugging Face - Blog
Hugging Face - Blog
博客园 - 【当耐特】
小众软件
小众软件
博客园 - 司徒正美
罗磊的独立博客
云风的 BLOG
云风的 BLOG
B
Blog RSS Feed
博客园 - 聂微东

博客园 - 丹心石

数据字节位改变 锁定鼠标光标到指定屏幕 WPF 访问WebAPI Avalonia 避坑经验总结 Avalonia 窗口与配置 Avalonia 程序打包成Linux平台的运行程序 数据处理与转换 信号与槽 Qt 串口通信 Avalonia 设计时DataContext数据山下文和WPF设计时DataContext数据上下文 Avalonia Ursa 使用 Avalonia-消息对话框 Avalonia-样式 阿里图标库iconfont 在Avalonia 中的使用 Avalonia MVVM Avlonia 自定义控件 Sqlite EF For ConsoleCore Sqlite EF CodeFirst For WPF win10 环境变量不可编辑 WCF-双工通讯 MahMetro 框架学习 由于缺少调试目标“xxx”Visual Studio 无法开始调试。或者响应地设置outputpath和AssemblyName 属性 WPF 应用程序本地化-资源文件方式 FastReport 行高设置实现行高随内容自动变化
Avalonia-数据绑定
丹心石 · 2026-02-03 · via 博客园 - 丹心石

Avalonia 数据绑定

在Avalonia 中绑定数据和在WPF 中类似,但也有些区别,如果全按照wpf中的绑定方式,则会失败

1.在窗体AXAML中指定绑定数据类型,即数据上下文使用的类型。x:DataType="vm:MainViewModel",如果不指定则会报错。

另外,命令绑定只需要在视图模型中增加私有的方法,用[RelayCommand] 标记,则会默认生成对应的 方法名+Command 的ICommand 类型的方法共UI绑定使用

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:AvaMvvmDemo.ViewModels"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" 
		x:DataType="vm:MainViewModel"
        x:Class="AvaMvvmDemo.Views.MainWindow"
        Icon="/Assets/avalonia-logo.ico"
        Title="AvaMvvmDemo"
		Width="800" Height="600"
		>

	<Grid RowDefinitions="Auto,*" ShowGridLines="True">
		<StackPanel Orientation="Horizontal" Height="40">
			<TextBlock Text="{Binding Caption}" VerticalAlignment="Center"/>
			<Button Content="SayHello" Width="80" Height="35" Command="{Binding SayHelloCommand}" VerticalContentAlignment="Center" VerticalAlignment="Center" Background="AliceBlue" Margin="10 5"/>
	<!--绑定到其他控件 用#控件名.属性  来替代WPF中的ElementName-->
	<TextBlock VerticalAlignment="Center" Text="{Binding #tb1.Text}" Foreground="Red" Margin="10 0" />
		</StackPanel>
		<Grid Grid.Row="1" ColumnDefinitions="*,*,*" ShowGridLines="True">
			<ListBox x:Name="lb" ItemsSource="{Binding Products}">
				<ListBox.ItemTemplate>
					<DataTemplate>
						<Grid ColumnDefinitions="*,*,*,*">
						    <TextBlock Text="{Binding Id}" Grid.Column="0"/>
							<TextBlock Text="{Binding Name}" Grid.Column="1" />
							<TextBlock Text="{Binding Description}" Grid.Column="2" />
							<TextBlock Text="{Binding Price}" Grid.Column="3" />	   
						</Grid>
					</DataTemplate>
				</ListBox.ItemTemplate>
			</ListBox>
			
		</Grid>
	</Grid>

    

</Window>

Models

namespace AvaMvvmDemo.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public decimal Price { get; set; }  
    }
}

ViewModels

using AvaMvvmDemo.Models;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using System.Collections.ObjectModel;

namespace AvaMvvmDemo.ViewModels
{
    public partial class MainViewModel:ObservableObject
    {
        [ObservableProperty]
        private ObservableCollection<Product> _products=new ObservableCollection<Product>();
        public MainViewModel()
        {
            Products.Add(new Product { Id=1,Name="篮球",Description="体育用品",Price=125.0M});
            Products.Add(new Product { Id = 2,Name = "足球", Description = "体育用品", Price = 320.0M });
            Caption = "Test";
        }
        [ObservableProperty]
        private string _caption;
        [RelayCommand]
        private void SayHello()
        {
            Caption = "点击了SayHello";
        }

    }
}

效果
image