The Windows Community Toolkit is a collection of helper functions, custom controls, and app services. It simplifies and demonstrates common developer patterns when building experiences for Windows 10.
This tutorial will walk through adding and implementing the DataGrid control but the steps can be followed for any of the Uno ported Windows Community Toolkit controls.
Tip
The complete source code that goes along with this guide is available in the unoplatform/Uno.Samples GitHub repository - Uno Windows Community Toolkit Sample
- Visual Studio 2019 16.3 or later
- Universal Windows Platform workload installed
- Mobile Development with .NET (Xamarin) workload installed
- ASP.NET and web workload installed
- Uno Platform Extension installed
-
.NET Core SDK
- .NET Core 3.1 SDK (version 3.1.8 (SDK 3.1.402) or later)
- .NET Core 5.0 SDK (version 5.0 (SDK 5.0.100) or later)
Use
dotnet --version
from the terminal to get the version installed.
- Visual Studio for Mac 8.8
- Xcode 10.0 or higher
- An Apple ID
- .NET Core SDK
- .NET Core 3.1 SDK (version 3.1.8 (SDK 3.1.402) or later)
- .NET Core 5.0 SDK (version 5.0 (SDK 5.0.100) or later)
- GTK+3 for running the Skia/GTK projects
- Rider Version 2020.2+
- Rider Xamarin Android Support Plugin (you may install it directly from Rider)
Tip
For a step-by-step guide to installing the prerequisites for your preferred IDE and environment, consult the Get Started guide.
Uno has ported the Windows Community Toolkit for use in Uno applications to allow for use on Windows, Android, iOS, macOS, and WebAssembly.
The following packages are available:
- Uno.Microsoft.Toolkit
- Uno.Microsoft.Toolkit.Parsers
- Uno.Microsoft.Toolkit.Services
- Uno.Microsoft.Toolkit.UWP
- Uno.Microsoft.Toolkit.Uwp.Notifications
- Uno.Microsoft.Toolkit.Uwp.Services
- Uno.Microsoft.Toolkit.Uwp.UI.Controls.DataGrid
- Uno.Microsoft.Toolkit.Uwp.UI
- Uno.Microsoft.Toolkit.Uwp.UI.Animations
- Uno.Microsoft.Toolkit.Uwp.UI.Controls
- Uno.Microsoft.Toolkit.Uwp.UI.Controls.Graph
- Uno.Microsoft.Toolkit.Uwp.Connectivity
These package ids are for Uno (ie non-Windows) projects. For UWP and WinUI 3 projects, you should use the equivalent package ids published by Microsoft (Microsoft.Toolkit
, Microsoft.Toolkit.Parsers
etc).
Note: Be aware of which versions of Uno.UI are compatible with the Nuget package of each control.
If using version 3.0.0
or higher of Uno.UI
, use version 6.1.0
or higher of DataGrid
Nuget package.
Note: For UWP and WinUI 3 projects, you should use the packages published by Microsoft that are not prefixed with Uno.*
.
-
Add a reference to the UWP UI Controls
In XAML:
xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
In C#:
using Microsoft.Toolkit.Uwp;
This control will create an easily organized grid that will allow you to create flexible columns and rows.
-
Begin by adding the control using the syntax below. Change the
x:Name
to the name of your DataGrid.
<controls:DataGrid x:Name="dataGrid"></controls:DataGrid>
-
Add columns. Similar to how you would configure columns for a XAML
Grid
layout, you can add column definitions within yourDataGrid
control:<controls:DataGrid.Columns> <controls:DataGridTextColumn Header="Rank"/> <controls:DataGridComboBoxColumn Header="Mountain"/> </controls:DataGrid.Columns>
This will create two columns that can be adjusted by the user.
Alternatively, you can use the
AutoGenerateColumns
attribute on yourDataGrid
control if you do not know how many columns your data will require.<controls:DataGrid x:Name="dataGrid" AutoGenerateColumns="True" />
-
Format your rows in the same way as your columns or use a
DataTemplate
added as an attribute on theDataGrid
control:<controls:DataGrid x:Name="dataGrid" RowDetailsTemplate="{StaticResource RowDetailsTemplate}">
-
Data can be added with data binding. First, add your
ItemsSource
as a property of yourDataGrid
control.<controls:DataGrid x:Name="dataGrid" ItemsSource="{x:Bind MyViewModel.Customers}" />
Then, set the binding on each column:
<controls:DataGrid.Columns> <controls:DataGridTextColumn Header="Rank" Binding="{Binding Rank}" Tag="Rank" /> <controls:DataGridTextColumn Header="Mountain" Binding="{Binding Mountain}" Tag="Mountain" /> </controls:DataGrid.Columns>
The Uno Platform build of the Windows Community toolkit is not needed when running on UWP, which is why you'll need to make some small changes to the project.
Adding the Uno version of the community toolkit to a Uno Platform cross-targeted library can cause build errors like this one:
Controls\TextBox\Themes\Generic.xaml : Xaml Internal Error error WMC9999:
Type universe cannot resolve assembly: Uno.UI, Version=255.255.255.255,
Culture=neutral, PublicKeyToken=null.
To fix this, instead of adding the Uno version of the toolkit like the code below:
<ItemGroup>
<PackageReference Include="Uno.Microsoft.Toolkit.Uwp.UI.Controls" Version="7.0.0" />
</ItemGroup>
Add a conditional reference:
<ItemGroup Condition="'$(TargetFramework)' == 'uap10.0.18362'">
<PackageReference Include="Microsoft.Toolkit.Uwp.UI.Controls" Version="7.0.0" />
</ItemGroup>
<ItemGroup Condition="'$(TargetFramework)' != 'uap10.0.18362'">
<PackageReference Include="Uno.Microsoft.Toolkit.Uwp.UI.Controls" Version="7.0.0" />
</ItemGroup>
You may need to replace uap10.0.18362
with the version defined in the TargetFrameworks
node at the top of the csproj file.
A working sample complete with data is available on GitHub: Uno Windows Community Toolkit Sample
[!includegetting-help]