Get Started with ComponentOne WinUI Controls

The ComponentOne 2021 v2 release includes the beta version of our WinUI controls for developing state-of-the-art Windows desktop applications. ComponentOne WinUI Edition is a native UI library for Windows desktop applications based on the WinUI3 framework. With WinUI Edition you get:

• Powerful datagrid with superior cell customization and high-performance virtualization
• Essential calendar and layout controls that fill the gap and extend your application functionality
• Fluent designed desktop controls for building the latest Windows applications

ComponentOne WinUI controls support the WinUI in desktop platforms, which provides a great way to gradually migrate existing apps written in familiar technologies like MFC, WinForms, and WPF, allowing you to move these applications forward at your own pace.

Download Now!

How to Install ComponentOne WinUI Controls

Download and launch the C1ControlPanel (link above) and find the WinUI Edition (beta) tile. Choose the latest version from the drop-down and click Proceed to install the controls and samples.

This will install the samples to C:\Users\user\Documents\ComponentOne Samples\WinUI.

Additionally, installing any ComponentOne product will give you a local copy of the NuGet packages here: C:\Program Files (x86)\ComponentOne\Packages. You can choose to find the packages at that location, or you can use the public versions available at NuGet.org. Next, we'll look at how to add a C1 control to your WinUI in Desktop application.

How to Develop with ComponentOne WinUI Controls

You'll need Visual Studio 2019 version 16.10.0 or higher. You'll also need to install the Windows App SDK (also called Project Reunion), which will give you the WinUI project templates. You can download Project Reunion from the Extension Manager in Visual Studio.

Once you have the project templates installed, create a new WinUI in Desktop application or class library. This will create a Windows (Win32) application that uses XAML for defining your entire UI layer, while allowing you to continue fully supporting Windows capabilities.

Note that the ComponentOne WinUI controls do not support WinUI in UWP types of applications at this time.

The WinUI project template includes MSIX packaging, which includes a project template in your solution for side-loading the app in the Microsoft Store.

Right-click the main Application project and then select Manage NuGet Packages. This will allow us to add the ComponentOne controls to our project.

Select nuget.org as the package source, check the 'Include prerelease' checkbox (at the time of this publication, our WinUI controls are beta) and locate the packages that start with C1.WinUI.*.

Select the C1.WinUI.Grid package and click Install. This will add the FlexGrid package to your application.

Developing with ComponentOne WinUI controls is easy thanks to our intuitive API and XAML. You can fully declare controls in XAML, following MVVM best practices, or write code completely in C#. Unfortunately, there is no design-time for WinUI applications (at this time), so you'll need to add the control to the XAML page manually.

Open MainWindow.xaml, and add the following xml namespace reference for C1.WinUI.Grid and copy the following XAML to define the FlexGrid.

<Window
    x:Class="WinUIApp4.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUIApp4"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:c1="using:C1.WinUI.Grid"
    mc:Ignorable="d">

    <c1:FlexGrid x:Name="grid"/>
</Window>

Then open the MainWindow.xaml.cs, and copy the following C# code. This code just quickly creates a dummy list of objects to databind our FlexGrid to.

public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();

        ObservableCollection<DummyObject> dummyList = new ObservableCollection<DummyObject>();
        dummyList.Add(new DummyObject { Name = "Accordion", Number = 1 });
        dummyList.Add(new DummyObject { Name = "Calendar", Number = 2 });
        dummyList.Add(new DummyObject { Name = "FlexGrid", Number = 3 });

        grid.ItemsSource = dummyList;
    }

}

public class DummyObject
{
    public string Name { get; set; }
    public int Number { get; set; }
}

Now, we can run the application and see FlexGrid in action.

Of course, this is a very simple data set we can't do much with. To see more features for FlexGrid, check out the FlexGridExplorer sample that is installed in your documents folder. There are also samples for creating calendars and accordion layouts in your Windows applications.

ComponentOne WinUI Edition

The ComponentOne Calendar WinUI control provides touch-friendly date selection with built-in formatting and customizable templates. The Accordion control is a container control that displays a list of collapsible panels with animation. And FlexGrid, is a fast WinUI datagrid that provides tabular data editing, sorting, filtering, grouping, and advanced features like row details, full-text filtering, and data virtualization. Learn how to work with each of these controls in our online documentation.

The ComponentOne WinUI Edition will be officially released in November 2021. The set of controls will continue to expand and grow over time with more controls like charts, treeviews and input editors. The beta version of the libraries will not work after January 2022, so they should not be used in production. If you're looking for any specific feature or control for WinUI 3, let us know in the comments below.

Download Now!