少有人走的路

勇哥的工业自动化技术网站

Avalonia学习(六)ListBox演示

ListBox演示


image.png




MainWindow.axaml

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:_06_ListBox"
        x:Class="_06_ListBox.MainWindow"
          x:DataType="vm:MainWindowViewModel"
        Title="ListBox - 列表控件演示"
        Width="500"
        Height="450">
  <Window.DataContext>
    <vm:MainWindowViewModel/>
  </Window.DataContext>

  <Grid Margin="20" ColumnDefinitions="*,*">
    <StackPanel Grid.Column="0" Margin="10" Spacing="20">
      <TextBlock Text="简单列表" FontSize="16" FontWeight="Bold"/>
      <ListBox ItemsSource="{Binding Languages}"
               SelectedItem="{Binding SelectedLanguage}"
               Height="200"
               Width="180"/>
    </StackPanel>

    <StackPanel Grid.Column="1" Margin="10" Spacing="20">
      <TextBlock Text="颜色列表(自定义模板)" FontSize="16" FontWeight="Bold"/>
      <ListBox ItemsSource="{Binding Colors}"
               SelectedItem="{Binding SelectedColor}"
               Height="200"
               Width="180">
        <ListBox.ItemTemplate>
          <DataTemplate>
            <StackPanel Orientation="Horizontal" Spacing="10">
              <Border Width="30" Height="30"
                      Background="{Binding}"
                      CornerRadius="4"/>
              <TextBlock Text="{Binding}"
                         VerticalAlignment="Center"/>
            </StackPanel>
          </DataTemplate>
        </ListBox.ItemTemplate>
      </ListBox>
    </StackPanel>

    <StackPanel Grid.Column="0" Grid.ColumnSpan="2"
                VerticalAlignment="Bottom"
                Margin="10"
                Spacing="5">
      <TextBlock Text="{Binding StatusText}"
                 FontSize="14"
                 Foreground="#6200EE"
                 HorizontalAlignment="Center"/>
      <TextBlock Text="提示:在 ListBox 中选择项目,状态会随之更新"
                 FontSize="12"
                 Foreground="Gray"
                 HorizontalAlignment="Center"/>
    </StackPanel>
  </Grid>
</Window>



MainWindow.axaml.cs

using Avalonia.Controls;

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



MainWindowViewModel.cs

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace _06_ListBox
{
    public class MainWindowViewModel : INotifyPropertyChanged
    {
        public ObservableCollection<string> Languages { get; set; }
        public ObservableCollection<string> Colors { get; set; }

        private string _selectedLanguage;
        public string SelectedLanguage
        {
            get => _selectedLanguage;
            set
            {
                _selectedLanguage = value;
                OnPropertyChanged();
                UpdateStatus();
            }
        }

        private string _selectedColor;
        public string SelectedColor
        {
            get => _selectedColor;
            set
            {
                _selectedColor = value;
                OnPropertyChanged();
                UpdateStatus();
            }
        }

        private string _statusText;
        public string StatusText
        {
            get => _statusText;
            set
            {
                _statusText = value;
                OnPropertyChanged();
            }
        }

        public MainWindowViewModel()
        {
            Languages = new ObservableCollection<string>
            {
                "C#", "Java", "Python", "C++", "JavaScript", "Go", "Rust"
            };

            Colors = new ObservableCollection<string>
            {
                "Red", "Green", "Blue", "Yellow", "Aqua", "Pink", "Orange"
            };

            StatusText = "请选择一个选项";
        }

        private void UpdateStatus()
        {
            var lang = SelectedLanguage ?? "未选择";
            var color = SelectedColor ?? "未选择";
            StatusText = $"已选语言:{lang} | 已选颜色:{color}";
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}




效果:

act4.gif

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

«    2026年3月    »
1
2345678
9101112131415
16171819202122
23242526272829
3031
控制面板
您好,欢迎到访网站!
  查看权限
网站分类
搜索
最新留言
文章归档
网站收藏
友情链接

Powered By Z-BlogPHP 1.7.3

Copyright www.skcircle.com Rights Reserved.

鄂ICP备18008319号


站长QQ:496103864 微信:abc496103864