ComboBoxEditor

Контрол ComboBoxEditor - это контрол, который отображает список элементов в своем всплывающем окне. Пользователь может выбрать один или несколько элементов одновременно в соответствии с режимом выбора контрола.

Основные функции контрола включают в себя:

• Отображает значения из списка строк, списка бизнес-объектов или тип-перечисления.
• Режимы выбора одного и нескольких элементов.
• Функция автозавершения.
• Редактирование текста в поле редактирования в режиме выбора одного элемента.
• Шаблоны элементов позволяют отображать элементы произвольным способом.
• Использование контрола в качестве встроенного редактора в контролах-контейнерах (например, TreeList, TreeView и PropertyGrid).

Источник объектов

Используйте свойство ComboBoxEditor.ItemsSource, чтобы указать список элементов, которые будут отображаться в всплывающем окне. Вы можете привязать редактор к списку строк, списку бизнес-объектов или к типу-перечислению.

Привязка к списку строк

Самый простой источник объектов - это список строк.

Пользователь может выбрать одно или несколько значений в соответствии с текущим режимом выбора (см. ниже). Если в поле редактирования включено редактирование текста (см. IsTextEditable), пользователь может ввести текст, который не соответствует ни одному элементу в всплывающем списке.

Пример - Как привязать к списку строк

В следующем примере ComboBoxEditor заполняется списком строк.

xmlns:mxe="using:Eremex.AvaloniaUI.Controls.Editors"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:local="clr-namespace:ComboBoxTestSample"

<mxe:ComboBoxEditor x:Name="myComboBox1">
    <mxe:ComboBoxEditor.ItemsSource>
        <local:MyItemList>
            <sys:String>Moscow</sys:String>
            <sys:String>Kazan</sys:String>
            <sys:String>Tver</sys:String>
        </local:MyItemList>
    </mxe:ComboBoxEditor.ItemsSource>
</mxe:ComboBoxEditor>

public class MyItemList : List<string>
{
}

Привязка к списку бизнес-объектов

Вы можете привязать ComboBoxEditor к списку бизнес-объектов. В этом случае дефолтное поведение контрола является следующим:

• Метод ToString бизнес-объекта задает дефолтное представление текста элементов.
• Когда вы выбираете элемент, значение редактора (ComboBoxEditor.EditorValue) устанавливается равным соответствующему бизнес-объекту.

Типичный бизнес-объект обладает множеством свойств. Вы можете указать, какие свойства бизнес-объекта предоставляют текст элемента для отображения и редактирования значений. Для этой цели используйте следующие элементы API:

• ComboBoxEditor.DisplayMember - Получает или задает имя свойства бизнес-объекта, которое определяет текст элемента для отображения.
• ComboBoxEditor.ValueMember - Получает или задает имя свойства бизнес-объекта, которое определяет значения элемента. Когда вы выбираете элемент, значение редактора (ComboBoxEditor.EditorValue) устанавливается равным значению свойства ValueMember элемента.

Пример - Как привязать к списку бизнес-объектов

Следующий пример привязывает ComboBoxEditor к списку бизнес-объектов Product. Свойство Product.ProductName определяет текст элемента для отображения. Свойство Product.ProductID определяет значения элементов.

xmlns:mxe="using:Eremex.AvaloniaUI.Controls.Editors"
xmlns:local="clr-namespace:ComboBoxTestSample"

<Window.DataContext>
    <local:MainViewModel/>
</Window.DataContext>

<mxe:ComboBoxEditor
    x:Name="myComboBox2"
    ItemsSource="{Binding Products}"
    DisplayMember="ProductName"
    ValueMember="ProductID"
    SelectionMode="Multiple"
/>

public MainViewModel()
{
    Products = new ObservableCollection<Product>();
    //...
}

public partial class Product :ObservableObject
{
    public Product(int productID, string productName, string category, int productPrice)
    {
        ProductID = productID;
        ProductName = productName;
        Category = category;
        ProductPrice = productPrice;
    }

    [ObservableProperty]
    public int productID;

    [ObservableProperty]
    public string productName;

    [ObservableProperty]
    public string category;

    [ObservableProperty]
    public decimal productPrice;
}

Привязка к перечислению

ComboBoxEditor может отображать значения типа-перечисления в всплывающем окне.

Вспомогательный класс Eremex.AvaloniaUI.Controls.Common.EnumItemsSource облегчает привязку к перечислению. Его основные функции включают:

• Картинки для элементов перечисления в всплывающем окне. Примените атрибут Eremex.AvaloniaUI.Controls.Common.ImageAttribute к целевым элементам перечисления, чтобы указать картинки.
• Пользовательские отображаемые имена для элементов перечисления. Используйте атрибут System.ComponentModel.DataAnnotations.DisplayAttribute или пользовательский конвертер, чтобы изменить дефолтный отображаемый текст элемента.
• Всплывающие подсказки для элементов всплывающего окна. Всплывающая подсказка содержит описание целевого элемента, которое вы можете предоставить с помощью атрибута System.ComponentModel.DataAnnotations.DisplayAttribute или пользовательского конвертера.

Чтобы настроить привязку к типу-перечислению, используйте следующие свойства EnumItemsSource:

• EnumItemsSource.EnumType — Задает тип-перечисление, значения которого отображаются в ComboBoxEditor.
• EnumItemsSource.ShowImages — Указывает, следует ли отображать картинки для элементов перечисления в всплывающем окне. Вы можете предоставить картинки, используя атрибут Eremex.AvaloniaUI.Controls.Common.ImageAttribute.
• EnumItemsSource.ShowNames — Указывает, следует ли отображать текст элемента. Установите для ShowNames значение false, а для ShowImages значение true, чтобы отображать элементы перечисления с использованием картинок без текста.
• EnumItemsSource.ImageSize — Определяет размер отображения картинок, назначенных элементам перечисления.
• EnumItemsSource.NameToDisplayTextConverter — Позволяет назначить конвертер, который извлекает пользовательский текст для отображения для элементов перечисления.
• EnumItemsSource.NameToDescriptionConverter — Позволяет назначить конвертер, который извлекает описания элементов перечисления, которые отображаются в виде всплывающих подсказок, когда пользователь наводит курсор мыши на элементы всплывающего окна.

Пример - Как отобразить значения перечисления и использовать атрибуты для предоставления текста и картинок для элементов перечисления.

В следующем примере отображаются значения перечисления ProductCategoryEnum в ComboBoxEditor. Он использует класс EnumItemsSource для привязки данных.

Атрибуты System.ComponentModel.DataAnnotations.DisplayAttribute и Eremex.AvaloniaUI.Controls.Common.ImageAttribute определяют пользовательский текст для отображения, описания (всплывающие подсказки) и картинки для элементов перечисления.

xmlns:mxcom="clr-namespace:Eremex.AvaloniaUI.Controls.Common;assembly=Eremex.Avalonia.Controls"
xmlns:mxe="using:Eremex.AvaloniaUI.Controls.Editors"

<mxe:ComboBoxEditor Name="comboBoxEditorEnum"
					ItemsSource="{mxcom:EnumItemsSource EnumType=local:ProductCategoryEnum, ImageSize='16, 16', ShowImages=True, ShowNames=True}"
                    IsTextEditable="True"
                    AutoComplete="True"
					>
</mxe:ComboBoxEditor>

using Eremex.AvaloniaUI.Controls.Common;
using System.ComponentModel.DataAnnotations;

public enum ProductCategoryEnum
{
    // The images assigned to the enumeration values below are placed in the ComboBoxTestSample/Images folder.
    // They have their "Build Action" properties set to "AvaloniaResource".
    [Image($"avares://ComboBoxTestSample/Images/Products/DairyProducts.svg")]
    [Display(Name = "Dairy Products", Description = "Products made from milk")]
    DairyProducts,

    [Image($"avares://ComboBoxTestSample/Images/Products/Beverages.svg")]
    [Display(Description = "Edible drinks")]
    Beverages,

    [Image($"avares://ComboBoxTestSample/Images/Products/Condiments.svg")]
    [Display(Description = "Flavor Enhancers")]
    Condiments,

    [Image($"avares://ComboBoxTestSample/Images/Products/Confections.svg")]
    [Display(Description = "Sweets")]
    Confections
}

Пример - Как отобразить значения перечисления и использовать пользовательские конвертеры для предоставления текста для элементов перечисления.

В следующем примере класс EnumItemsSource используется для отображения значений типа-перечисления в ComboBoxEditor. Объекты EnumItemsSource.NameToDisplayTextConverter и EnumItemsSource.NameToDescriptionConverter предоставляют пользовательский текст для отображения и описания (всплывающие подсказки) для элементов перечисления.

xmlns:mxe="using:Eremex.AvaloniaUI.Controls.Editors"
xmlns:mxcom="clr-namespace:Eremex.AvaloniaUI.Controls.Common;assembly=Eremex.Avalonia.Controls"
xmlns:local="clr-namespace:ComboBoxTestSample"

<mxe:ComboBoxEditor Name="comboBoxEditorEnumWithConverters"
					ItemsSource="{mxcom:EnumItemsSource EnumType=local:ProductCategoryEnum, ImageSize='16, 16', ShowImages=True, ShowNames=True, NameToDisplayTextConverter={local:EnumMemberNameToDisplayTextConverter}, NameToDescriptionConverter={local:EnumMemberNameToDescriptionConverter}}"
                    IsTextEditable="True"
                    AutoComplete="True"
					>
</mxe:ComboBoxEditor>

using Eremex.AvaloniaUI.Controls.Common;

public enum ProductCategoryEnum
{
    // The images assigned to the enumeration values below are placed in the ComboBoxTestSample/Images folder.
    // They have their "Build Action" properties set to "AvaloniaResource".
    [Image($"avares://ComboBoxTestSample/Images/Products/DairyProducts.svg")]
    DairyProducts,

    [Image($"avares://ComboBoxTestSample/Images/Products/Beverages.svg")]
    Beverages,

    [Image($"avares://ComboBoxTestSample/Images/Products/Condiments.svg")]
    Condiments,

    [Image($"avares://ComboBoxTestSample/Images/Products/Confections.svg")]
    Confections
}

public class EnumMemberNameToDisplayTextConverter : BaseEnumConverter
{
    protected override void PopulateDictionary()
    {
        TextValueDictionary.Add("ProductCategoryEnum_DairyProducts", "Dairy");
    }
}
public class EnumMemberNameToDescriptionConverter : BaseEnumConverter
{
    protected override void PopulateDictionary()
    {
        TextValueDictionary.Add("ProductCategoryEnum_DairyProducts", "Milk Products");
    }
}

public abstract class BaseEnumConverter : MarkupExtension, IValueConverter
{
    protected Dictionary<string, string> TextValueDictionary;

    public BaseEnumConverter()
    {
        TextValueDictionary = new Dictionary<string, string>();
        PopulateDictionary();
    }

    protected abstract void PopulateDictionary();

    public override object ProvideValue(IServiceProvider serviceProvider)
    {
        return this;
    }
    public object? Convert(object? value, Type targetType, object? parameter, System.Globalization.CultureInfo culture)
    {
        var type = value?.GetType();
        var memberName = value?.ToString();
        if (type == null || !type.IsEnum || string.IsNullOrEmpty(memberName))
            return null;
        return EnumMemberToString(type.Name, memberName);
    }
        
    protected virtual string EnumMemberToString(string enumName, string enumMemberName)
    {
        string fullMemberName = enumName + "_" + enumMemberName;
        if (TextValueDictionary.ContainsKey(fullMemberName))
            return TextValueDictionary[fullMemberName];
        else 
            return enumMemberName;
    }
        
    public object? ConvertBack(object? value, Type targetType, object? parameter, System.Globalization.CultureInfo culture)
    {
        return null;
    }
}

Режим выбора элемента

Свойство SelectionMode позволяет вам выбирать между режимами выбора одного или нескольких элементов.

Режим выбора одного элемента установлен по умолчанию. Если включено редактирование текста (см. IsTextEditable), можно указать значение редактирования (или текст в поле редактирования), которое не соответствует ни одному элементу в всплывающем списке.

Установите для свойства SelectionMode значение ItemSelectionMode.Multiple, чтобы включить множественный выбор элемента. В режиме множественного выбора редактор отображает флажки перед каждым элементом в всплывающем списке. Пользователь может переключать эти флажки, чтобы добавлять и удалять элементы в выборку или из нее. Редактирование текста отключено в поле редактирования в режиме множественного выбора.

Получение и установка выбранного элемента(ов)

Свойство SelectedItem позволяет вам выбирать и извлекать выбранный элемент в режиме одиночного выбора. Свойство возвращает значение null, если ни один элемент не выбран.

Свойство SelectedItems определяет список (объект IList), который содержит выбранные элементы в режиме множественного выбора. Свойство возвращает пустой список, если ни один элемент не выбран.

Note

Свойства SelectedItem и SelectedItems синхронизированы способом, описанным ниже.

В режиме одиночного выбора свойство SelectedItems определяет список, содержащий один элемент – выбранный элемент (значение свойства SelectedItem). Свойство возвращает пустой список, если ни один элемент не выбран.

В режиме множественного выбора свойство SelectedItem определяет первый выбранный элемент (первый элемент списка SelectedItems). Свойство возвращает значение null, если ни один элемент не выбран.

Пример - Как выбрать элементы

Следующий код выбирает элементы в ComboBoxEditor, которые работают в режимах одиночного и множественного выбора.

// Select an item in single selection mode
var itemSource1 = myComboBox1.ItemsSource as MyItemList;
if(itemSource1 != null) 
    myComboBox1.SelectedItem = itemSource1[0];

// Select items in multi-select mode
var itemSource2 = myComboBox2.ItemsSource as ObservableCollection<Product>;
if (itemSource2 != null)
    myComboBox2.SelectedItems = new List<Product>() { itemSource2[0], itemSource2[1] };

Элемент "(Выбрать все)" в режиме множественного выбора

В режиме множественного выбора редактор отображает предопределенный флажок (Select All) в верхней части всплывающего окна. Этот флажок позволяет пользователю выбирать/отменять выбор всех элементов. Чтобы скрыть флажок (Select All), установите для свойства ComboBoxEditor.ShowPredefinedSelectItem значение false.

Элемент '(None)' в режиме одиночного выбора

В режиме одиночного выбора вы можете установить для свойства ComboBoxEditor.ShowPredefinedSelectItem значение true, чтобы отобразить предопределенный элемент (None) в всплывающем окне. Элемент (None) устанавливает значение редактора в null и, таким образом, очищает выделение.

Значение редактора

Когда пользователь вводит текст, выбирает элемент в поле редактирования с помощью функции автозаполнения или выбирает элемент в всплывающем окне, редактор изменяет его значение редактирования (значение свойства EditorValue).

Как правило, значение редактирования совпадает со значением свойства SelectedItem (в режиме одиночного выбора) или свойства SelectedItems (в режиме множественного выбора), за исключением случаев, описанных в этом разделе.

Значение редактирования зависит от режима выбора элемента. В режиме выбора одного элемента значением редактирования является одно значение, в то время как в режиме выбора нескольких элементов значением редактирования является объект IList, который определяет список значений.

Свойства EditorValue и SelectedItem/SelectedItems не синхронизированы в следующих случаях:

• ComboBoxEditor привязан к списку строк, и текст, указанный в поле редактирования, не соответствует ни одному элементу в всплывающем окне. В этом случае свойство SelectedItem возвращает значение null, в то время как свойство EditorValue определяет текст, отображаемый в поле редактирования.

  СОВЕТ

  Включите опцию ComboBoxEditor.IsTextEditable, чтобы разрешить пользователю редактировать текст в поле редактирования.

Пример - Как установить значение редактора, когда ComboBox привязан к списку строк

В следующем примере задается значение редактирования для ComboBoxEditor, привязанного к списку строк.

xmlns:mxe="using:Eremex.AvaloniaUI.Controls.Editors"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:local="clr-namespace:ComboBoxTestSample"

  <mxe:ComboBoxEditor x:Name="myComboBox1">
      <mxe:ComboBoxEditor.ItemsSource>
          <local:MyItemList>
              <sys:String>Moscow</sys:String>
              <sys:String>Kazan</sys:String>
              <sys:String>Tver</sys:String>
          </local:MyItemList>
      </mxe:ComboBoxEditor.ItemsSource>
  </mxe:ComboBoxEditor>
  ```

  ``` csharp

  myComboBox1.EditorValue = "Moscow";
  //The SelectedItem property will return "Moscow" as well.

  myComboBox1.EditorValue = "Rostov";
  //The SelectedItem property will return `null`, since the edit value does not match any item in the bound list.

  //...
  public class MyItemList : List<string>
  {
  }
  ```

- A ComboBoxEditor is bound to a list of business objects, and the `ValueMember` property is set. The `ValueMember` property specifies the name of the business object's property that supplies item values. When you select an item(s), the `SelectedItem/SelectedItems` property contains the selected object(s), while the `EditorValue` property specifies the selected objects' value (values).


<a id="example---how-to-select-an-item-when-comboboxeditor-is-bound-to-a-business-object-list"></a>

### Example - How to select an item when ComboBoxEditor is bound to a business object list

In the following example, a ComboBoxEditor is bound to a list of _Product_ objects in multi-select mode. The `ValueMember` property refers to the _Product.ProductID_ member.
Thus, product IDs serve as item values. When a user selects items, the `EditorValue` property is set to a list that contains correponding product IDs. The example uses the `EditorValue` property to select items in code.


``` xml
xmlns:mxe="using:Eremex.AvaloniaUI.Controls.Editors"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:local="clr-namespace:ComboBoxTestSample"

<mxe:ComboBoxEditor
    x:Name="myComboBox2"
    ItemsSource="{Binding Products}"
    DisplayMember="ProductName"
    ValueMember="ProductID"
    SelectionMode="Multiple"
/>

// Select items by their product IDs:
var itemSource2 = myComboBox2.ItemsSource as ObservableCollection<Product>;
if(itemSource2 != null) 
    myComboBox2.EditorValue = new List<int>() { itemSource2[3].ProductID, itemSource2[5].ProductID };
//The SelectedItems property will return a list that contains two Product objects (itemSource2[3] and itemSource2[5]).

//...
public partial class Product :ObservableObject
{
    public Product(int productID, string productName, string category, int productPrice)
    {
        ProductID = productID;
        ProductName = productName;
        Category = category;
        ProductPrice = productPrice;
    }

    [ObservableProperty]
    public int productID;

    [ObservableProperty]
    public string productName;

    [ObservableProperty]
    public string category;

    [ObservableProperty]
    public decimal productPrice;
}

Шаблоны элементов

ComboBoxEditor отображает каждый элемент в всплывающем списке, используя по умолчанию текст элемента для отображения. Методом ToString для элементов задается дефолтный отображаемый текст элемента. Когда редактор привязан к списку бизнес-объектов, вы можете использовать свойство DisplayMember, чтобы указать свойство, предоставляющее отображаемый текст элемента.

Вы можете использовать свойство ItemTemplate для назначения шаблона данных, который представляет элементы в всплывающем окне произвольным способом. Например, шаблон данных поможет вам отображать картинки для элементов, как показано в примере ниже.

Включите опцию ComboBoxEditor.ApplyItemTemplateToEditBox, чтобы применить указанный шаблон элемента (свойство ItemTemplate) к полю редактирования. Это свойство не действует, если включено редактирование текста (для опции IsTextEditable установлено значение true).

Пример - Как отобразить картинки для элементов ComboBox с помощью DataTemplate

В следующем примере свойство ItemTemplate используется для указания шаблона данных, который отображает картинки для элементов ComboBox в всплывающем списке.

ComboBoxEditor привязан к списку, в котором хранятся объекты Product. Объект Product содержит свойство Category, которое определяет категорию продукта (напитки, приправы, морепродукты или другие продукты).

Предполагается, что проект хранит SVG-картинки для категорий товаров в папке "ComboBoxTestSample/Images/Products". Картинки имеют следующие названия: "Beverages.svg", "Condiments.svg", "Seafood.svg" и "Produce.svg", и они помечены флагом "AvaloniaResource".

Созданный шаблон данных элемента отображает название продукта и картинку, соответствующую категории продукта.

xmlns:mxe="using:Eremex.AvaloniaUI.Controls.Editors"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:local="clr-namespace:ComboBoxTestSample"

<Window.DataContext>
    <local:MainViewModel/>
</Window.DataContext>
<Window.Resources>
    <local:NameToSvgConverter x:Key="NameToSvgConverter"/>
    <DataTemplate x:Key="ProductItemTemplate">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Image Width="16" Height="16" Source="{Binding Path=Category, Converter={StaticResource NameToSvgConverter}}"/>
            <TextBlock VerticalAlignment="Center" Grid.Column="1" Margin="6,0,0,0" Text="{Binding Path=ProductName}"/>
        </Grid>
    </DataTemplate>
</Window.Resources>


<mxe:ComboBoxEditor
    x:Name="myComboBox2"
    ItemsSource="{Binding Products}"
    DisplayMember="ProductName"
    ValueMember="ProductID"
    SelectionMode="Multiple"
    ItemTemplate="{StaticResource ProductItemTemplate}"
/>

using Avalonia.Svg.Skia;

public partial class MainViewModel : ViewModelBase
{
    [ObservableProperty]
    public ObservableCollection<Product> products;

    public MainViewModel()
    {
        Products = new ObservableCollection<Product>();
        Products.Add(new Product(0, "Chai", "Beverages", 200));
        Products.Add(new Product(1, "Chang", "Beverages", 100));
        Products.Add(new Product(2, "Aniseed Syrup", "Condiments", 150));
        Products.Add(new Product(3, "Ikura", "Seafood", 500));
        Products.Add(new Product(4, "Konbu", "Seafood", 390));
        Products.Add(new Product(5, "Tofu", "Produce", 430));
    }
}

public partial class Product :ObservableObject
{
    public Product(int productID, string productName, string category, int productPrice)
    {
        ProductID = productID;
        ProductName = productName;
        Category = category;
        ProductPrice = productPrice;
    }

    [ObservableProperty]
    public int productID;

    [ObservableProperty]
    public string productName;

    [ObservableProperty]
    public string category;

    [ObservableProperty]
    public decimal productPrice;
}

public class NameToSvgConverter : MarkupExtension, IValueConverter
{
    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
    {
        if(value == null) 
            return null;
        string name = value.ToString();

        return SvgImageExtension.ProvideValue($"avares://ComboBoxTestSample/Images/Products/{name}.svg", null!, null!);
    }

    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }

    public override object ProvideValue(IServiceProvider serviceProvider)
    {
        return this;
    }
}

Добавление пользовательских кнопок

ComboBoxEditor является потомком контрола ButtonEditor. Таким образом, вы можете добавить пользовательские кнопки в поле редактирования рядом с кнопкой всплывающего окна по умолчанию. Используйте коллекцию ComboBoxEditor.Buttons для добавления пользовательских кнопок.

Пример - Как добавить пользовательские кнопки

В следующем примере в ComboBoxEditor добавляются обычная кнопка и кнопка-переключатель для проверки. Редактор привязан к перечислению ProductCategoryEnum с использованием вспомогательного класса EnumItemsSource.

Первая кнопка является обычной (ее свойству ButtonKind присвоено значение Simple). Щелчок по этой кнопке вызывает команду ResetValue, которая устанавливает значение редактора в значение по умолчанию (первый элемент связанного типа-перечисления).

Вторая кнопка - это переключающая кнопка (ее свойству ButtonKind присвоено значение Toggle). Нажатие на эту кнопку переключает значение свойства редактора IsTextEditable. Конвертер LockedStateToSvgNameConverter присваивает картинке "locked.svg" или "unlocked.svg" картинку кнопки в соответствии с состоянием нажатия кнопки. Эти картинки хранятся в папке ComboBoxTestSample/Images и помечены флагом "AvaloniaResource".

xmlns:mxe="using:Eremex.AvaloniaUI.Controls.Editors"
xmlns:mxcom="clr-namespace:Eremex.AvaloniaUI.Controls.Common;assembly=Eremex.Avalonia.Controls"
xmlns:local="clr-namespace:ComboBoxTestSample"

<mxe:ComboBoxEditor Name="comboBoxEditorEnum"
					ItemsSource="{mxcom:EnumItemsSource EnumType=local:ProductCategoryEnum, ImageSize='16, 16', ShowImages=True, ShowNames=True}"
                    IsTextEditable="True"
                    AutoComplete="True"
					>
    <mxe:ComboBoxEditor.Buttons>
        <mxe:ButtonSettings ButtonKind="Simple" 
                            Glyph="{SvgImage 'avares://ComboBoxTestSample/Images/square_dot_icon.svg'}"
                            Command="{Binding ResetValueCommand}" 
                            CommandParameter="{Binding #comboBoxEditorEnum}">
        </mxe:ButtonSettings>
        <mxe:ButtonSettings ButtonKind="Toggle" 
                            Glyph="{Binding $self.IsChecked, Converter={local:LockedStateToSvgNameConverter}}" 
                            IsChecked="{Binding !$parent.IsTextEditable}"
                            >
        </mxe:ButtonSettings>
    </mxe:ComboBoxEditor.Buttons>
</mxe:ComboBoxEditor>

using CommunityToolkit.Mvvm.Input;
using Eremex.AvaloniaUI.Controls.Editors;
using Avalonia.Svg.Skia;

public partial class MainViewModel : ViewModelBase
{
    // Sets the editor's value to the first element.
    [RelayCommand]
    void ResetValue(ComboBoxEditor editor)
    {
        // Get the first item in the ComboBoxEditor's bound list.
        var enumerator = editor.ItemsSource.GetEnumerator();
        enumerator.MoveNext();
        object firstItem = enumerator.Current;
        // When the ComboBoxEditor is bound to an EnumItemsSource, the editor's items are EnumMemberInfo objects.
        EnumMemberInfo mInfo = firstItem as EnumMemberInfo;
        if (mInfo != null)
            editor.EditorValue = mInfo.Id;
    }
}

public class LockedStateToSvgNameConverter : MarkupExtension, IValueConverter
{
    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
    {
        if (value == null)
            return null;
        bool isLocked = (bool)value;
        string lockedState = isLocked ? "locked" : "unlocked";

        if (isLocked)
            lockedState = "locked";

        return SvgImageExtension.ProvideValue($"avares://ComboBoxTestSample/Images/{lockedState}.svg", null!, null!);
    }

    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }

    public override object ProvideValue(IServiceProvider serviceProvider)
    {
        return this;
    }
}

public enum ProductCategoryEnum
{
    [Image($"avares://ComboBoxTestSample/Images/Products/DairyProducts.svg")]
    [Display(Name = "Dairy Products", Description = "Products made from milk")]
    DairyProducts,

    [Image($"avares://ComboBoxTestSample/Images/Products/Beverages.svg")]
    [Display(Description = "Edible drinks")]
    Beverages,

    [Image($"avares://ComboBoxTestSample/Images/Products/Condiments.svg")]
    [Display(Description = "Flavor Enhancers")]
    Condiments,

    [Image($"avares://ComboBoxTestSample/Images/Products/Confections.svg")]
    [Display(Description = "Sweets")]
    Confections
}

Автозавершение текста

Установите для опции AutoComplete значение true, чтобы включить автоматическое заполнение текста. Эта функция автоматически дополняет текст, введенный пользователями, если он соответствует какому-либо элементу в всплывающем списке.

ComboBoxEditor не поддерживает автозавершение текста в следующих случаях:

• Редактирование текста отключено (свойству IsTextEditable присвоено значение false).
• Используется режим выбора нескольких элементов (свойству SelectionMode присвоено значение Multiple).

^* Эта страница была создана автоматически с помощью сервиса машинного перевода Яндекс Переводчик.