Skip to main content Skip to footer

How to Add WPF UI Controls to Your Desktop Application

Windows Presentation Foundation (WPF) is a user interface framework for creating desktop applications. It has become the standard for developing Windows application user interfaces, as it provides the user with the ability to define views using the Extensible Application Markup Language (XAML). The inclusion of WPF in .NET Core by Microsoft has made WPF a more promising option for developing future Desktop applications.

This blog post will guide you on:

So, let's get started with creating a WPF application.

Ready to Get Started with ComponentOne? Download a 30 Day Free Trial Today!

Creating a WPF Application

The steps described in this section will require Visual Studio 2022, as we will be creating the application using .NET 6 framework. So, make sure you are working with Visual Studio 2022 to follow the steps smoothly.

  1. Open Visual Studio and select Create a new project. Type 'WPF' in the search box to minimize the displayed project templates. The screenshot below shows that the WPF search lists the WPF application templates for C# and VB languages. We will be choosing the C# variant to create the WPF application.

WPF UI

  1. The project creation is followed by project configuration providing the basic details like project name and location. In the final step of project configuration, the below screen is displayed to choose the desired .NET framework. Here, we choose .NET 6 framework to create the application.

WPF UI

  1. Once the project is created and configured, it loads the MainWindow.xaml file as depicted below. This file is the design form for the WPF Window MainWindow added by default to the newly created project. It is used to design the Window by defining the Window layout and adding controls as described in the steps ahead.

WPF UI

Adding WPF Controls from Toolbox

In this section, we will learn how to add the default Microsoft .NET WPF controls available in the toolbox to the WPF application. The screenshot below depicts some of the default controls available in the toolbox under All WPF Controls tab.

WPF UI

Design Window Layout

Before adding controls to the WPF Window, we must understand the various Layout controls available in WPF, which help with place and size controls. The default layout control provided in XAML is the <Grid> control. The Grid control lets you define rows and columns, like a table, and place controls within the bounds of a specific row and column combination.

You can have any number of child controls or other layout controls added to the Grid. A grid always has a single row and column declared. For details on other layout controls, refer to the following link.

For this blog, we will be working with the default Grid control with two rows. One row will display the control name we will be adding to the application, and the other row will contain the actual control. The described window layout can be configured by adding the following markup to XAML:

<Window x:Class="UIControlsDemo.MainWindow"  
        xmlns="[http://schemas.microsoft.com/winfx/2006/xaml/presentation](http://schemas.microsoft.com/winfx/2006/xaml/presentation)"  
        xmlns:x="[http://schemas.microsoft.com/winfx/2006/xaml](http://schemas.microsoft.com/winfx/2006/xaml)"  
        xmlns:d="[http://schemas.microsoft.com/expression/blend/2008](http://schemas.microsoft.com/expression/blend/2008)"  
        xmlns:mc="[http://schemas.openxmlformats.org/markup-compatibility/2006](http://schemas.openxmlformats.org/markup-compatibility/2006)"  
        xmlns:local="clr-namespace:UIControlsDemo"  
        mc:Ignorable="d"  
        Title="MainWindow" Height="800" Width="800" Loaded="Window_Loaded">  
    <Grid>  
        <Grid.RowDefinitions>  
            <RowDefinition Height="50"></RowDefinition>  
            <RowDefinition Height="400"></RowDefinition>  
        </Grid.RowDefinitions>        
    </Grid>  
</Window>

The screenshot below depicts the Window layout generated by adding the above defined XAML markup:

WPF UI

Add Controls from Toolbox

Now, let's quickly understand how to add controls to the Window layout. Adding controls to a WPF Window simply involves selecting the desired control from the toolbox and drag-drop it onto the expected location on the Window.

We will begin by adding the Label control in the first row of the Grid. As depicted below, the control has been selected, dragged from the toolbox, and dropped in the first row of the Grid. After the control has been dropped, it displays a list of basic properties to configure the control:

WPF UI

Once the Label control has been added, it is configured by setting the following properties in markup:

<Label Grid.Row="0" Content="MS Grid" FontSize="24" FontFamily="Arial" VerticalAlignment="Center" HorizontalAlignment="Center"></Label>

The screenshot below depicts the configured Label control:

WPF UI

Next, we add the DataGrid control in the second row of the Grid. By default, DataGrid control is added with a sample data source set using the ItemsSource property of DataGrid. We will replace the default code with the following code to configure DataGrid control:

<DataGrid Grid.Row="1" x:Name="MSGrid" Height="300px" Width="600"/>

This is how the Window layout looks after adding and configuring the DataGrid control:

WPF UI

Binding DataGrid to Data

Let's just quickly bind the DataGrid control to a valid DataSource to understand the default look and feel of the control.

Add Customer Class

Add a new class named Customer by adding the following code, which will be used to generate a datasource:

internal class Customer  
   {  
       //fields  
       int _id, _countryID;  
       string _first, _last;  
       double _weight;  
       bool _active;

       //data generators  
       static Random _rnd = new Random();  
       static string[] _firstNames = "Andy|Ben|Charlie|Dan|Ed|Fred|Gil|Herb|Jim|Elena|Stefan|Alaric|Gina".Split('|');  
       static string[] _lastNames = "Ambers|Bishop|Cole|Danson|Evers|Frommer|Salvatore|Spencer|Saltzman|Rodriguez".Split('|');  
       static string[] _countries = "China|India|United States|Japan|Myanmar".Split('|');

       public Customer()  
           : this(_rnd.Next())  
       {  
       }  
       public Customer(int id)  
       {  
           ID = id;  
           Active = false;  
           FirstName = GetString(_firstNames);  
           LastName = GetString(_lastNames);  
           CountryID = _rnd.Next() % _countries.Length;  
           Weight = 50 + _rnd.NextDouble() * 50;  
       }  
       //Object model         
       public int ID  
       {  
           get { return _id; }  
           set  
           {  
               if (value != _id)  
               {  
                   _id = value;  
                   RaisePropertyChanged("ID");  
               }  
           }  
       }  
       public bool Active  
       {  
           get { return _active; }  
           set  
           {  
               _active = value;  
               RaisePropertyChanged("Active");  
           }  
       }  
       public string Name  
       {  
           get { return string.Format("{0} {1}", FirstName, LastName); }  
       }  
       public string Country  
       {  
           get { return _countries[_countryID]; }  
       }  
       public int CountryID  
       {  
           get { return _countryID; }  
           set  
           {  
               if (value != _countryID && value > -1 && value < _countries.Length)  
               {  
                   _countryID = value;  
                   RaisePropertyChanged(null);  
               }  
           }  
       }  
       public string FirstName  
       {  
           get { return _first; }  
           set  
           {  
               if (value != _first)  
               {  
                   _first = value;  
                   RaisePropertyChanged(null);  
               }  
           }  
       }  
       public string LastName  
       {  
           get { return _last; }  
           set  
           {  
               if (value != _last)  
               {  
                   _last = value;  
                   RaisePropertyChanged(null);  
               }  
           }  
       }  
       public double Weight  
       {  
           get { return _weight; }  
           set  
           {  
               if (value != _weight)  
               {  
                   _weight = value;  
                   RaisePropertyChanged("Weight");  
               }  
           }  
       }  
       //  utilities  
       static string GetString(string[] arr)  
       {  
           return arr[_rnd.Next(arr.Length)];  
       }  
       static string GetName()  
       {  
           return string.Format("{0} {1}", GetString(_firstNames), GetString(_lastNames));  
       }  
       //  static list provider  
       public static ObservableCollection<Customer> GetCustomerList(int count)  
       {  
           var list = new ObservableCollection<Customer>();  
           for (int i = 0; i < count; i++)  
           {  
               list.Add(new Customer(i));  
           }  
           return list;  
       }

       // this interface allows bounds controls to react to changes in the data objects.  
       void RaisePropertyChanged(string propertyName)  
       {  
           OnPropertyChanged(new PropertyChangedEventArgs(propertyName));  
       }  
       public event PropertyChangedEventHandler PropertyChanged;  
       protected void OnPropertyChanged(PropertyChangedEventArgs e)  
       {  
           if (PropertyChanged != null)  
               PropertyChanged(this, e);  
       }  
   }

Bind data to DataGrid

The code below generates the datasource using the Customer class and binds it to the DataGrid control using the ItemsSource property:

private void Window_Loaded(object sender, RoutedEventArgs e)  
{  
   //Generate grid data  
   var gridData = Customer.GetCustomerList(12);  
   //Binding the grid with data  
   MSGrid.ItemsSource = gridData;  
}

The screenshot below depicts the DataGrid control after binding it to the Customer datasource:

WPF UI

Adding WPF Controls from NuGet

After understanding the working with default controls, we will now see how we can work with advanced controls provided by third-party vendors, which might be required if we want to create a feature-rich desktop application with complex requirements.

To work with the third-party controls, obviously, we need to have these controls added to the toolbox as the foremost step. This can be accomplished by accessing the NuGet Package Manage for an application via the Tools option in the Menu Bar. From the NuGet Package Manager menu, choose Manage NuGet Packages for Solution, which opens the Manage Packages window as depicted in the screenshot below.

To load the specific packages, you will need to type in the package name in the Search panel found under the Browse tab. Selecting the appropriate package in the left panel, you can install it in the project using the Install option available in the right panel of the window.

In this blog, we will be working with ComponentOneWPF controls, and in comparison to the DataGrid control, we will showcase FlexGrid control from the ComponentOne WPF Edition. Hence, the screenshot below depicts the installation of C1.WPF.Grid Nuget package.

WPF UI

As soon as the C1.WPF.Grid package is installed, the following controls start appearing in the Toolbox under the C1 WPF Controls tab. It consists of many controls, including the FlexGrid control, as the FlexGrid control has several features dependent on the other controls in the suite.

WPF UI

Once the controls have been added to the toolbox, they can be accessed and similarly added to the Window form as we were adding the default controls, i.e. using the drag and drop from toolbox.

Working with ComponentOne FlexGrid

This section briefly describes how to work with the FlexGrid control in a WPF application. For details, you may refer to FlexGrid Quickstart.

To begin with, we add a new WPF Window to the project named FlexGridWindow, to showcase the FlexGrid control as depicted below:

WPF UI

Following the same design approach as described for MS DataGrid, we will design the Window layout and add Label and FlexGrid controls to Window using the following markup:

<Window  
        xmlns="[http://schemas.microsoft.com/winfx/2006/xaml/presentation](http://schemas.microsoft.com/winfx/2006/xaml/presentation)"  
        xmlns:x="[http://schemas.microsoft.com/winfx/2006/xaml](http://schemas.microsoft.com/winfx/2006/xaml)"  
        xmlns:d="[http://schemas.microsoft.com/expression/blend/2008](http://schemas.microsoft.com/expression/blend/2008)"  
        xmlns:mc="[http://schemas.openxmlformats.org/markup-compatibility/2006](http://schemas.openxmlformats.org/markup-compatibility/2006)"  
        xmlns:local="clr-namespace:UIControlsDemo"  
        xmlns:c1="[http://schemas.componentone.com/winfx/2006/xaml](http://schemas.componentone.com/winfx/2006/xaml)" x:Class="UIControlsDemo.FlexGridWindow"  
        mc:Ignorable="d"  
        Title="FlexGridWindow" Height="450" Width="800" Loaded="Window_Loaded">  
    <Grid>  
        <Grid.RowDefinitions>  
            <RowDefinition Height="50"/>  
            <RowDefinition Height="*"/>  
        </Grid.RowDefinitions>  
        <Label Grid.Row="0" Content="C1 FlexGrid" FontSize="24" FontFamily="Arial" HorizontalAlignment="Center" VerticalAlignment="Center"/>  
        <c1:FlexGrid x:Name="C1Flexgrid" Grid.Row="1" Grid.Column="1" Height="500px" VerticalAlignment="Center" HorizontalAlignment="Center"></c1:FlexGrid>  
    </Grid>  
</Window>

The only difference here is the addition of a reference 'c1' for referring to C1 controls. This is how the window looks after adding the above markup:

WPF UI

In this last step, we bind the FlexGrid control to the same datasource we used for MS DataGrid binding using the ItemsSource property of FlexGrid class:

private void Window_Loaded(object sender, RoutedEventArgs e)  
{  
   //Generate grid data  
   var gridData = Customer.GetCustomerList(12);  
   //Binding the grid with data  
   C1Flexgrid.ItemsSource = gridData;  
}

Now, let's quickly update the StartupUri property in App.xaml file to load the FlexGridWindow as the default window upon project execution. Executing the project, you can observe the following display for FlexGrid control:

WPF UI

The image showcases FlexGrid displaying the data in a well-formatted presentation, having a more user-friendly user interface with sufficient row height, font settings, and data aligned to left or right depending on the datatype. This is the default look and feel of the control, which is quite appealing compared to the MS DataGrid view.

In addition, FlexGrid by default provides support for sorting, filtering, and Auto-sizing columns using a menu available on clicking the header, as depicted in the GIF below:

WPF UI

Apart from this basic look and feel, FlexGrid is feature-rich control, providing many features, including Grouping, Row Details Template, freezing, exporting, etc. You may refer to FlexGrid demos and documentation to explore all the available features.

Download the sample, implementing MS DataGrid and FlexGrid using the steps described in this blog.

Get access to the ComponentOne FlexGrid and other WPF samples by installing WPF Edition.

Ready to Get Started with ComponentOne? Download a 30 Day Free Trial Today!

Tags:

comments powered by Disqus