This page will help you get started using Xceed Toolkit for Maui.

Getting the Xceed Toolkit for Maui package

From your project in VisualStudio

From your project dependencies, open "Manage NuGet package". Then, find "Xceed.Maui.Toolkit.Plus" package; typing "Xceed Maui" in the search bar should display the package in the search results. Once you have found it, install it.

Using the Xceed Toolkit for Maui

When your project is referencing the valid Xceed Toolkit for .NET Maui dlls, you can use a Light or Dark UserAppTheme in your application. The interface will automatically adjust to the UserAppTheme in order to set the colors of the toolkit's controls.

<Application xmlns="http://schemas.microsoft.com/dotnet/2021.maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MauiApp11"
UserAppTheme="Dark"
x:Class="MauiApp11.App">

You can then set one of the 48 Accent colors, which will be applied to each control in the Toolkit.

This can be done through the UseXceedMauiToolkit() method. To do so, go in your MauiProgram class & add the following : Xceed.Maui.Toolkit.

Then, in the CreateMauiApp() method, add the ".UseXceedMauiToolkit()" to the builder:

var builder = MauiApp.CreateBuilder();
builder
  .UseMauiApp<App>()
  .UseXceedMauiToolkit( FluentDesignAccentColor.Blue )
  .ConfigureFonts( fonts =>
    {
      fonts.AddFont ( "OpenSans-Regular.ttf", "OpenSansRegular" );
      fonts.AddFont ( "OpenSans-Semibold.ttf", "OpenSansSemibold" );
    } );

Keep in mind that for this example, we are using Blue. However, we offer a total of 48 different accent colors, each with its own variations. To see the complete list, type AccentColor="" to access the enumeration.

Alternatively, add the FluentDesign ResourceDictionnary:

<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MauiApp11"
             xmlns:xctk="clr-namespace:Xceed.Maui.Toolkit;assembly=Xceed.Maui.Toolkit"
             UserAppTheme="Dark"
             x:Class="MauiApp11.App">
  <Application.Resources>
  <ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
      <xctk:FluentDesign AccentColor="Blue"/>
    </ResourceDictionary.MergedDictionaries">
  </ResourceDictionary>
</Application.Resources>

Integrating Xceed Toolkit for Maui controls

To integrate the controls, first add a namespace in the Mainpage.

• If you used the UseXceedMauiToolkit() method in the builder, use: xmlns:xctk=http://schemas.xceed.com/maui/xaml/toolkit
• If you used a ResourceDictionary FluentDesign, use: xmlns:xctk="clr-namespace:Xceed.Maui.Toolkit;assembly=Xceed.Maui.Toolkit"

Then, integrate the Xceed controls so that you can use & style them.

<VerticalStackLayout>
  <xctk:DoubleUpDown Value="25"/>
  <xctk:TextBox Text="ABC"/>
  <xctk:Expander/>
</VerticalStackLayout>

Custom Styling

Xceed Toolkit for Maui supports custom styling. Here is how to get started :

First, create your own style that targets the Toolkit's controls.

<Style TargetType="xctk:Button"
       BasedOn="{StaticResource FluentDesignButton}">
  <Setter Property="Background"
          Value="Red"/>
  <Setter Property="overrideDefaultVisualStates"
          Value="True"/>
</Style>

The BasedOn needs to be set to the name of our resource. Here's the list of names that you an use for other controls:

• FluentDesignBorder
• FluentDesignButton
• FluentDesignButtonSpinner
• FluentDesignCard
• FluentDesignRepeatButton
• FlientDesignCheckBox
• FluentDesignColorCanvas
• FluentDesignContentControl
• FluentDesignExpander
• FluentDesignFilePicker
• FluentDesignMaskedTextBox
• FluentDesignNumericUpDown
• FluentDesignRadioButton
• FluentDesignRepeatButton
• FluentDesignTextBox
• FluentDesignToggleButton
• FluentDesignToggleSwitch
• FluentDesignCalendar
• FluentDesignPopup
• FluentDesignDropDownButton
• FluentDesignAutoCompleteTextBox
• FluentDesignDateTimeUpDown
• FluentDesignCalculator
• FluentDesignComboBox
• FluentDesignTimePicker
• FluentDesignTimeUpDown
• FluentDesignDateUpDown
• FluentDesignDatePicker
• FluentDesignDateTimePicker