Add Syncfusion® UWP Controls

4 Aug 20268 minutes to read

The Syncfusion® UWP controls can be added in a Visual Studio project by using either of the following ways,

  • Through Designer
  • Through XAML
  • Through Code-Behind
  • Through Project Templates
  • Through NuGet Packages

Through Designer

Syncfusion® UI for UWP are added automatically to the Visual Studio Toolbox during installation. The following steps help to add the required Essential® UWP control through drag and drop from Toolbox. For example: SfTextBoxExt.

  1. Create a Universal Windows Platform project in Visual Studio.

  2. Find SfTextBoxExt by typing the text “SfTextBoxExt” in the search box.

Search SfTextBoxExt

  1. Drag SfTextBoxExt and drop it in the designer.

Drag SfTextBoxExt in to Designer

Through XAML

The following steps help to add a required Essential® UWP control through XAML code, for example: SfTextBoxExt.

  1. Create a Universal Windows Platform project in Visual Studio and refer the following assemblies.
  • Syncfusion.SfInput.UWP.dll
  • Syncfusion.SfShared.UWP.dll
  1. Include XML namespace for the above assemblies in MainPage.xaml.
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      xmlns:input="using:Syncfusion.UI.Xaml.Controls.Input">
  1. Now, add the SfTextBoxExt control with a required optimal name, using the included namespace.
<input:SfTextBoxExt x:Name="sftextboxExt"/>

Through Code-Behind

Syncfusion® UI for UWP can be added at runtime using C# / VB. The following steps help to add a required Essential® UWP control through code. For example: SfTextBoxExt.

  1. Create a Universal Windows Platform project in Visual Studio and refer to the following assemblies.
  • Syncfusion.SfInput.UWP.dll
  • Syncfusion.SfShared.UWP.dll
  1. Include the namespace for SfTextBoxExt in MainPage.xaml.cs.
using Syncfusion.UI.Xaml.Controls.Input;
Imports Syncfusion.UI.Xaml.Controls.Input
  1. Create an instance of SfTextBoxExt using its namespace and set the required properties.
Syncfusion.UI.Xaml.Controls.Input.SfTextBoxExt textBoxExt1 = new Syncfusion.UI.Xaml.Controls.Input.SfTextBoxExt();

      textBoxExt1.Height = 20;

      textBoxExt1.Width = 120;

      textBoxExt1.Margin = new Thickness(10, 10, 10, 10);

      textBoxExt1.VerticalAlignment = VerticalAlignment.Center;

      textBoxExt1.HorizontalAlignment = HorizontalAlignment.Center;
Dim textBoxExt1 As New Syncfusion.UI.Xaml.Controls.Input.SfTextBoxExt()

      textBoxExt1.Height = 20

      textBoxExt1.Width = 120

      textBoxExt1.Margin = New Thickness(10, 10, 10, 10)

      textBoxExt1.VerticalAlignment = VerticalAlignment.Center

      textBoxExt1.HorizontalAlignment = HorizontalAlignment.Center
  1. Add the created instance to MainPage.
this.Content = textBoxExt1;
Me.Content = textBoxExt1

NOTE

Syncfusion® controls for UWP package can be added (available under Universal Windows Platform => Extensions tab in Add reference dialog) in the cases of using most of the controls from Syncfusion® toolkit.

Through Project Templates

Syncfusion® provides the Visual Studio Project Templates for the Syncfusion® UWP platform to create Syncfusion® UWP Applications.

IMPORTANT

The Syncfusion® UWP project templates are available from Essential Studio® v15.3.0.26.

Create Syncfusion® UWP Application

The following steps direct you to create the Syncfusion UWP Application through the Visual Studio Project Template.

  1. To create a Syncfusion® UWP project, choose New Project-> Syncfusion->Universal Windows->Syncfusion Universal Windows Application from Visual Studio.

    Create Syncfusion UWP project

  2. Name the Project and choose the destination location if required, then click OK.

  3. Then Project Configuration Wizard appears. Choose the options to configure the Syncfusion® UWP Application by using the following Project Configuration dialog.

    Project configurations:

    Language: Select the language, either Visual C# or Visual Basic.

    Reference Type: Select the reference type of UWP Project, either Assemblies or SDK.

    Target Version: Choose the Target Version of the UWP platform that your project is targeting. This sets the TargetPlatformVersion setting in your project file.

    Minimum Version: Choose the Minimum Version of the UWP platform that your project can work with. This sets the TargetPlatformMinVersion setting in your project file.

    Template Type: Select the template type of UWP Project, either Blank or Hamburger Menu or Hamburger Menu (MVVM).

    Components: Choose the required Syncfusion® components to configure.

    Configure Syncfusion UWP project

    NOTE

    If SDK is chosen as the reference type, then all the Syncfusion® UWP controls will be added. So, you don’t need to select any components.

  4. Once you click the Create button, the Syncfusion® UWP Application is created.

  5. Once the Project Configuration Wizard is done, the Syncfusion® UWP Application is created with required SDK/references and pages.

    UWP Application Created with required SDK and References

  6. Then, a Syncfusion® licensing registration required message box will be shown as follows, if you installed the trial setup or NuGet packages since Syncfusion® introduced the licensing system from 2018 Volume 2 (v16.2.0.41) Essential Studio® release. Please navigate to the help topic which is shown in the licensing message box to generate and register the Syncfusion® license key to your project. Refer to this blog post for understanding the licensing changes introduced in Essential Studio®.

    Syncfusion Licensing Message Box

Through NuGet Packages

Syncfusion® UI for UWP controls are added automatically to the specific Visual Studio UWP application Toolbox during Syncfusion® NuGet package installation. Please refer to the below topic to configure and install the Syncfusion® UWP NuGet packages in UWP application from Visual Studio.

Configuring Syncfusion NuGet packages in Visual Studio

After installing the required Syncfusion® UWP NuGet packages in your application, you can utilize the Syncfusion® UWP controls in the following ways.

  • Through Designer
  • Through XAML
  • Through Code-Behind

  1. Syncfusion® UI for UWP controls are added automatically to the specific Visual Studio UWP application Toolbox during Syncfusion® NuGet package installation. You can add a required Syncfusion® UWP control through drag and drop from the Toolbox. When the Toolbox is configured from the Syncfusion® UWP NuGet package, controls will be listed under the “Syncfusion® controls for UWP” category. For example: SfColorPicker

    Add Colorpicker from ToolBox

    UWP Colorpicker Control

    NOTE

    Toolbox configuration by installing UWP NuGet packages support available from v15.4.0.17.

  2. The following steps help to add a required Essential® UWP control through XAML code, for example: SfColorPicker

a. Include the namespace for Syncfusion.SfColorPickers.UWP assembly from Syncfusion.SfColorPickers.UWP NuGet package in MainPage.xaml.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      xmlns:media="using:Syncfusion.UI.Xaml.Controls.Media">

b. Now, add the SfColorPicker control with a required optimal name using the included namespace.

<media:SfColorPicker x:Name="colorPicker"/>
  1. The following steps help to add a required Essential® UWP control through code, for example: SfColorPicker

a. Include the namespace for Syncfusion.SfColorPickers.UWP assembly in MainPage.xaml.cs

using Syncfusion.UI.Xaml.Controls.Media;
Imports Syncfusion.UI.Xaml.Controls.Media

b. Now, add the SfColorPicker control with a required optimal name.

SfColorPicker colorPicker = new SfColorPicker();
Dim colorPicker As New SfColorPicker()

c. Add the created instance to the MainPage.

this.Content = colorPicker;
Me.Content = colorPicker