C# Avalonia 19- DataBinding- ComboBoxSelectionBox

ComboBoxSelectionBox.axaml代码

<Window 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"
        Height="300" Width="450"
        xmlns:local="using:AvaloniaUI.Demos.Book._19.StoreDatabase"
        x:Class="AvaloniaUI.ComboBoxSelectionBox"
        Title="ComboBoxSelectionBox">
    
    <Window.Resources>
        <local:ImagePathToBitmapConverter x:Key="ImagePathConverter"/>
    </Window.Resources>
    
    <StackPanel Margin="5">
        <ComboBox Margin="5"
          x:Name="lstProducts"
          HorizontalAlignment="Stretch"
          IsEditable="{Binding #chkIsEditable.IsChecked}"
          TextSearch.TextBinding="{Binding #txtTextSearchPath.Text}">
            <ComboBox.Styles>
                <!-- 去掉默认 Padding -->
                <Style Selector="ComboBoxItem">
                    <Setter Property="Padding" Value="0" />
                </Style>

                <!-- 选中项背景 -->
                <Style Selector="ComboBoxItem:selected Border">
                    <Setter Property="Background" Value="DarkRed" />
                </Style>

                <!-- 鼠标悬停背景（对应 IsHighlighted） -->
                <Style Selector="ComboBoxItem:pointerover Border">
                    <Setter Property="Background" Value="LightSalmon" />
                </Style>
            </ComboBox.Styles>

            <ComboBox.ItemTemplate>
                <DataTemplate x:DataType="local:Product">
                    <Grid Margin="0" Background="White">
                        <Border Margin="5"
                                BorderThickness="1"
                                BorderBrush="SteelBlue"
                                CornerRadius="4">
                            <Grid Margin="3"
                                  RowDefinitions="auto,auto"
                                  ColumnDefinitions="*,auto">
                                <TextBlock FontWeight="Bold"
                                           Text="{Binding ModelNumber}" />
                                <TextBlock Grid.Row="1"
                                           Text="{Binding ModelName}" />
                                <Image Grid.Column="1"
                                       Grid.RowSpan="2"
                                       Width="50"
                                       Source="{Binding ProductImagePath, Converter={StaticResource ImagePathConverter}}" />
                            </Grid>
                        </Border>
                    </Grid>
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>

        <!-- 选项 -->
        <CheckBox x:Name="chkIsEditable"
                  Margin="5"
                  Content="IsEditable" />
        
        <!-- TextSearch.TextBinding 的输入 -->
        <StackPanel Margin="5" Orientation="Horizontal">
            <TextBlock VerticalAlignment="Center"
                       Text="TextSearch.TextPath / TextBinding: " />
            <TextBox x:Name="txtTextSearchPath" Width="150" Watermark="ModelNumber..."/>
        </StackPanel>
    </StackPanel>
</Window>

ComboBoxSelectionBox.axaml.cs代码

using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.Primitives;
using Avalonia.Data;
using Avalonia.Reactive;
using AvaloniaUI.Demos.Book._19.StoreDatabase;

namespace AvaloniaUI;

public partial class ComboBoxSelectionBox : Window
{
    private StoreDb1 db = new StoreDb1();
    public ComboBoxSelectionBox()
    {
        InitializeComponent();
        lstProducts.ItemsSource = db.GetProducts();
        lstProducts.SelectedIndex = 0;
    }
}

运行效果