Windows Community Toolkit – cuteprogramming

Last month, I blogged about how we can create our own value converter to bind an enum to a ComboBox control in an UWP application. After reading the article, Riza Marhaban recommended to look into the Windows Community Toolkit which can do the same job in an easier manner.

About Windows Community Toolkit

The toolkit was first released in August 2016 with the name “UWP Community Toolkit” as an open-source project with a collection of helper functions, custom controls, and app services. The main goal of the project is to simplify the common developer tasks in UWP app development.

Two years after its first release, the UWP Community Toolkit was renamed to the Windows Community Toolkit with more helper functions and controls available. The new name is reflective of the increased focus and more inclusive of all Windows developers.

We can download the Windows Community Toolkit Sample App from Microsoft Store.

In March 2021, the 7th version of the toolkit was released with a whole new .NET Standard MVVM library, the Microsoft.Toolkit.Mvvm.

Today, in this article, we will look into how the helper function in the toolkit is able to help us in the task of binding an enum to a ComboBox control.

PROJECT GITHUB REPOSITORY

The complete source code of this project can be found at https://github.com/goh-chunlin/gcl-boilerplate.csharp/tree/master/universal-windows-platform/WTS.CommunityToolkit.EnumCombo.

EnumValuesExtension

There is an extension in the toolkit that can exactly help us in doing just that. The extension is called the EnumValuesExtension.

EnumValuesExtension returns a collection of values of a specific enum type. Hence, we can use it to easily bind a collection of all possible values from a given enum type to a ComboBox control or some other UI controls.

Model and ViewModel

We will use the same enum, MyColors, the one we use in our previous blog post.

public enum MyColors
{
    Red,
    Green,
    Blue,
    Orange,
    Pink,
    Black
}

We will still have the same ViewModel for our MainPage.xaml which will contains the ComboBox control.

public class MainViewModel : ViewModelBase
{
    private MyColors _selectedColor = MyColors.Black;

    public MyColors SelectedColor
    {
        get => _selectedColor;
        set
        {
            if (_selectedColor != value)
            {
                SetProperty(ref _selectedColor, value);
            }
        }
    }
}

View

Now in the MainPage.xaml which contains the ComboBox control, without using our own custom value converter, we can directly bind the enum above to our front-end view with the help of EnumValuesExtension, as shown below.

<Page
    x:Class="WTS.CommunityToolkit.EnumCombo.Views.MainPage"
    xmlns:enums="using:WTS.CommunityToolkit.EnumCombo.Core.Enums"
    xmlns:toolkitui="using:Microsoft.Toolkit.Uwp.UI"
    ...>
    ...
    <ComboBox
        ItemsSource="{toolkitui:EnumValues Type=enums:MyColors}"
        SelectedItem="{Binding SelectedColor, Mode=TwoWay}" />
    ...

</Page>

Conclusion

That’s all for the quickstart steps to bind an enum to a ComboBox control in an UWP app with the help of the Windows Community Toolkit.

If you’d like to further customise the values shown in the ComboBox, you could also use a value converter. I have made the source code available on GitHub. The code will have more features where the colour of text in a TextBlock will be based on the colour we pick from the ComboBox, as shown below.

Tag: Windows Community Toolkit

Bind an Enum to a ComboBox Control in UWP with Community Toolkit