I’m still trying to learn .Net Maui and I want to use the equivalent of a combobox. I found this on YouTube https://www.youtube.com/watch?v=gnKkUtBK23A that shows one way of making a combobox using Expander. The video was probably made for dotnet 6 and I’m using dotnet 8 so I have had to make some changes. I’m also using VS 17.10.4 on Windows 11. The basic idea is to have a list of items in an Expander. When the Expander is clicked, the list displays. Then, when an item is clicked, the item is supposed to show in the header and the list closes. This can then be repeated any number of times. My code works in so far as the item click is detected (message displays he selected item in DebugView) but the header label doesn’t update and the list remains open. I’ve checked my code but I still can’t work out why the bindings aren’t working. Here is my code:
MauiProgram.cs
using CommunityToolkit.Maui;
using Microsoft.Extensions.Logging;
namespace Combox
{
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.UseMauiCommunityToolkit()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
});
#if DEBUG
builder.Logging.AddDebug();
#endif
return builder.Build();
}
}
}
MainViewModel.cs
using System.Collections.ObjectModel;
using System.Diagnostics;
using System.Windows.Input;
namespace Combox.ViewModels
{
public partial class MainViewModel : BindableObject
{
string _selectedText = "Select the item";
public string SelectedText
{
get { return _selectedText; }
private set { _selectedText = value; }
}
bool _isOpened;
public bool IsOpened
{
get { return _isOpened; }
private set { _isOpened = value; }
}
ObservableCollection<string>? _dataList;
public ObservableCollection<string>? DataList
{
get { return _dataList; }
private set { _dataList = value; }
}
public ICommand SelectionCommand { private set; get; }
public MainViewModel()
{
DataList = new ObservableCollection<string>()!;
DataList.Add("Item1");
DataList.Add("Item2");
DataList.Add("Item3");
DataList.Add("Item4");
DataList.Add("Item5");
SelectionCommand = new Command(
execute: () =>
{
IsOpened = false;
Debug.Write($"SelectedText {SelectedText}");
RefreshCanExecute();
},
canExecute: () =>
{
return !IsOpened;
});
}
void RefreshCanExecute()
{
((Command)SelectionCommand).ChangeCanExecute();
}
}
}
MainPage.xaml
<?xml version = "1.0" encoding = "UTF-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
xmlns:local="clr-namespace:Combox.ViewModels"
x:Class="Combox.MainPage"
x:Name="mainView">
<ContentPage.BindingContext>
<local:MainViewModel />
</ContentPage.BindingContext>
<ScrollView>
<VerticalStackLayout
Padding="30,0"
Spacing="25">
<Image
Source="dotnet_bot.png"
HeightRequest="185"
Aspect="AspectFit"
SemanticProperties.Description="dot net bot in a race car number eight" />
<Label
Text="Hello, World!"
Style="{StaticResource Headline}"
SemanticProperties.HeadingLevel="Level1" />
<Label
Text="Welcome to
.NET Multi-platform App UI"
Style="{StaticResource SubHeadline}"
SemanticProperties.HeadingLevel="Level2"
SemanticProperties.Description="Welcome to dot net Multi platform App U I" />
<toolkit:Expander IsExpanded="{Binding IsOpened}" HeightRequest="190">
<toolkit:Expander.Header>
<HorizontalStackLayout MaximumHeightRequest="42" Padding="10">
<Label HorizontalOptions="Start" Text="{Binding SelectedText}" />
<Label Text="▼" HorizontalOptions="EndAndExpand" VerticalOptions="Center" />
</HorizontalStackLayout>
</toolkit:Expander.Header>
<CollectionView ItemsSource="{Binding DataList}" HeightRequest="190" SelectionMode="Single"
SelectedItem="{Binding SelectedText}"
SelectionChangedCommand="{Binding SelectionCommand}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Label Text="{Binding}">
</Label>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</toolkit:Expander>
<Button
x:Name="CounterBtn"
Text="Click me"
SemanticProperties.Hint="Counts the number of times you click"
Clicked="OnCounterClicked"
HorizontalOptions="Fill" />
</VerticalStackLayout>
</ScrollView>
</ContentPage>