少有人走的路

数据绑定

App.axaml

注意如果没有写<FluentTheme/>，则这些Fluent控件将没有效果，比如滑块控件成了一个Lable控件，只显示文字了。

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="_05_DataBinding.App">
    <Application.Styles>
        <!-- 官方标准 Fluent 主题 -->
        <FluentTheme/>
    </Application.Styles>
</Application>

MainWindow.axaml

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:_05_DataBinding"
        x:Class="_05_DataBinding.MainWindow"
        x:DataType="vm:MainWindowViewModel"
        Title="Data Binding - 数据绑定演示"
        Width="450"
        Height="450">
  <Window.DataContext>
    <vm:MainWindowViewModel/>
  </Window.DataContext>

  <ScrollViewer>
    <StackPanel Margin="30" Spacing="20">

      <TextBlock Text="数据绑定示例" FontSize="20" FontWeight="Bold"/>

      <Border Background="#F5F5F5" Padding="15" CornerRadius="8">
        <StackPanel Spacing="15">
          <StackPanel Spacing="5">
            <TextBlock Text="单向绑定（TextBox -> TextBlock）"/>
            <TextBox Text="{Binding UserName}" Watermark="输入用户名"/>
            <TextBlock Text="{Binding UserName}" FontSize="16" Foreground="#6200EE"/>
          </StackPanel>

          <StackPanel Spacing="5">
            <TextBlock Text="数字绑定（NumericUpDown）"/>
            <NumericUpDown Value="{Binding Age}"
                           Minimum="0"
                           Maximum="150"
                           Increment="1"/>
            <TextBlock Text="{Binding Age, StringFormat='年龄：{0}岁'}"/>
          </StackPanel>

          <StackPanel Spacing="5">
            <TextBlock Text="滑块绑定（Slider）"/>
            <Slider Value="{Binding SliderValue}"
                    Minimum="0"
                    Maximum="100"/>
            <TextBlock Text="{Binding SliderValue, StringFormat='值：{0:F1}'}"/>
          </StackPanel>

          <StackPanel Spacing="5">
            <TextBlock Text="状态消息"/>
            <TextBlock Text="{Binding StatusMessage}"
                       Foreground="#4CAF50"
                       FontWeight="Bold"/>
          </StackPanel>
        </StackPanel>
      </Border>

    </StackPanel>
  </ScrollViewer>
</Window>

MainWindow.axaml.cs

using Avalonia.Controls;

namespace _05_DataBinding;

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }
}

MainWindowViewModel.cs

这里使用了微软的CommunityToolkit mvvm框架，以绑定属性。

using CommunityToolkit.Mvvm.ComponentModel;

namespace _05_DataBinding;

public partial class MainWindowViewModel : ObservableObject
{
    [ObservableProperty]
    private string _userName = "张三";

    [ObservableProperty]
    private int _age = 25;

    [ObservableProperty]
    private string _statusMessage = "准备就绪";

    [ObservableProperty]
    private double _sliderValue = 50;
}

效果：