How to create datagrid combobox in WinUI 3

Question

I tried the docs provided but they do not work. I searched the internet but could not find anything. Please provide complete code if possible (Design + program)

Answer 1

You can do something like this:

Item.cs

public record Item(int Rank, string Mountain);

ViewModel.cs

public partial class ViewModel : ObservableObject
{
    [ObservableProperty]
    private ObservableCollection<Item> _items = new();

    [ObservableProperty]
    private List<string> _mountains = new()
    {
        "Mount Everest",
        "K2",
        "Kangchenjunga",
        "Lhotse",
        "Makalu",
    };

    public ViewModel()
    {
        Items.Add(new Item(Rank: 1, Mountain: "Mount Everest"));
        Items.Add(new Item(Rank: 2, Mountain: "K2"));
        Items.Add(new Item(Rank: 3, Mountain: "Kangchenjunga"));
        Items.Add(new Item(Rank: 4, Mountain: "Lhotse"));
        Items.Add(new Item(Rank: 5, Mountain: "Makalu"));
    }
}

MainPage.xaml.cs

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        this.Loaded += MainPage_Loaded;
    }

    public ViewModel ViewModel { get; } = new();

    private void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        // Set the ComboBox here.
        if (this.DataGridControl.Columns
            .FirstOrDefault(x => x.Tag?.Equals("Mountain") is true) is DataGridComboBoxColumn comboBoxColumn)
        {
            comboBoxColumn.ItemsSource = ViewModel.Mountains;
        }
    }
}

MainPage.xaml

<controls:DataGrid
    x:Name="DataGridControl"
    AutoGenerateColumns="False"
    ItemsSource="{x:Bind ViewModel.Items, Mode=OneWay}">
    <controls:DataGrid.Columns>
        <controls:DataGridTextColumn
            Binding="{Binding Rank}"
            Header="Rank" />
        <!-- Don't forget to set the Tag here. -->
        <controls:DataGridComboBoxColumn
            Binding="{Binding Mountain}"
            Header="Mountain"
            Tag="Mountain" />
    </controls:DataGrid.Columns>
</controls:DataGrid>