Search code examples
comboboxdatagridwinui-3

How to create datagrid combobox in WinUI 3


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)

enter image description here


Solution

  • 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>