Telerik Blogs | Desktop | WPF

How to Migrate Your WPF Components to .NET MAUI

2025-05-21T10:23:02Z

When you’re ready to expand your trusty WPF desktop app to multiple platforms, .NET MAUI is an appealing choice. Here’s what that would look like with a DataGrid component as an example.

As you might have a long-standing, well-proven desktop application built with WPF that’s delivering a great user experience, you might have already planned to go beyond desktop and covering on all platforms. To align with the business goals and new objectives, your organization may be considering further adjustment to its business model. Consequently, you might be tasked with identifying how to adapt and support new capabilities to effectively reach a broader audience.

Born as an evolution of Xamarin and with desktop features throughout, the .NET MAUI platform came from Microsoft as a solid choice for migrating apps, enabling developers to create consistent experience across devices. With operating systems from a single project, .NET MAUI is positioned as a solid choice for building applications that run cross-platform, offering a cost-effective solution compared to maintaining separate native platform apps.

In this blog, I will provide some informed insights and discuss potential challenges posed by current limitations of the framework. Choosing the right UI toolkit to facilitate the process would bring another perspective. As an example, we can take advantage of the robust Progress Telerik UI for .NET MAUI library that helps to reduce development time and facilitates the creation of modern-looking, enterprise-ready applications with built-in performance optimizations.

So, the key question seems to be: What does it take to migrate a WPF app to .NET MAUI? To migrate the application to run not only on Windows desktop, but also natively on Android and iOS, .NET MAUI enables consistent experience across devices and operating systems, rendering it the ultimate solution in the case of applications that needs actual cross-platforming. A logical step would be to seek a cost-effective solution compared to maintaining separate native platform apps.

Explore the Case of Migrating a WPF One-Grid App

Let’s take a simple WPF app with a grid, bound to any data source and convert it to a Telerik .NET MAUI DataGrid. To get familiar with the initial steps on setting up the project, be sure to review the basic concepts already discussed in the other blog on Considerations When Porting a WPF App to .NET MAUI.

DataGrid API & Definitions

The DataGrid offers an extensive set of built-in features like Search as You Type, Load on Demand, plus the standard Filtering, Grouping, Selection, Scrolling, Sorting and Editing options.

Similar to its Telerik UI for WPF DataGrid cousin, the .NET MAUI version can autogenerate typed columns based on the types of the underlying data. Alternatively, you can manually define the needed columns, as various column types and properties are exposed for direct configuration. Columns Reordering is also supported.
To get started, you might find useful to refer to and compare the full Telerik UI for .NET MAUI DataGrid API to the Telerik UI for WPF GridView API (and similarly to all listed namespaces).

In addition to the standard ways to populate data, the .NET MAUI DataGrid supports binding to any type that implements the standard IDynamicMetaObjectProvider DLR interface, such as DynamicObject and ExpandObject. See more on .NET MAUI DataGrid - Dynamic Data.

Style the DataGrid and Its Elements

As an example, below is an illustration of how to define a DataGrid with a column and specify a custom CellContentStyle (CellStyle in WPF):

WPF Code

<telerik:RadGridView  ItemsSource="{Binding Clubs}"  AutoGenerateColumns="False"  
    DataContext="{StaticResource ViewModel}"  >  
    <telerik:RadGridView.Columns>  
        <telerik:GridViewDataColumn DataMemberBinding="{Binding Name}" Header="Club Name"> 
<telerik: GridViewDataColumn .CellStyle> 
<Setter Property="VerticalContentAlignment" Value="Top"/>  
                      <Setter Property="Background" Value="#ffcc00"/> 
telerik: GridViewDataColumn .CellStyle> 
    telerik:RadGridView.Columns>  
telerik:RadGridView>

.NET MAUI Code

<telerik:RadDataGrid  ItemsSource="{Binding Clubs}" AutoGenerateColumns="False"> 
    <telerik:RadDataGrid.BindingContext> 
        <local:ViewModel /> 
    telerik:RadDataGrid.BindingContext> 
    <telerik:RadDataGrid.Columns> 
        <telerik:DataGridTextColumn PropertyName="Name"  
                                    HeaderText="Name"> 
            <telerik:DataGridTextColumn.CellContentStyle> 
                <Style TargetType="telerik:DataGridTextCellAppearance"> 
"VerticalTextAlignment Value="Top"/> 
                      "BackgroundColor" Value="#ffcc00"/> 
"TextMargin" Value="2" /> 
        "TextColor" Value="#000000" /> 
        "HoverTextColor" Value="#198679" /> 
        "SelectedTextColor" Value="#00796B" /> 
                Style> 
            telerik:DataGridTextColumn.CellContentStyle> 
        telerik:DataGridTextColumn>

The .NET MAUI DataGrid column styling mechanism allows customizing the look and feel by exposing HeaderStyle, FooterStyle, CellDecorationStyle, CellEditorStyle and CellContentStyle. For example:

<telerik:DataGridTextColumn.FooterStyle> 
    <Style TargetType="telerik:DataGridColumnFooterAppearance"> 
        "TextColor" Value="#FFFFFF" /> 
        "BackgroundColor" Value="#00796B" /> 
    Style> 
telerik:DataGridTextColumn.FooterStyle>

Then, through the CellContentStyleSelector, you could conditionally configure text alignment settings (e.g., TextMargin, HorizontalTextAlignment,VerticalTextAlignment), font options (e.g., FontAttributes, FontFamily, FontSize) and the TextColor property.

Similar to our Telerik UI for WPF GridView control, the .NET MAUI DataGrid component exposes a conditional styling feature, including GroupHeaderStyleSelector and GroupFooterStyleSelector (GroupRowStyleSelector and GroupFooterRowStyleSelector in WPF). Keep in mind that ShowGroupFooters should be explicitly set to visualize the respective elements.

.NET MAUI Code

<telerik:RadDataGrid AutoGenerateColumns="False" 
                     GroupHeaderStyleSelector="{StaticResource MyGroupSelector}" 
                     ShowGroupFooters=”True”> 
    <telerik:RadDataGrid.Columns> 
        <telerik:DataGridTextColumn PropertyName="Capital" 
               CellContentStyleSelector="{StaticResource MyCellContentStyleSelector}">  
    telerik:RadDataGrid.Columns> 
telerik:RadDataGrid>

WPF Code

<telerik:RadGridView AutoGenerateColumns="False" 
                       GroupRowStyleSelector="{StaticResource MyGroupSelector}" 
 ShowGroupFooters=”True”> 
    <telerik:RadGridView.Columns> 
        <telerik: GridViewDataColumn PropertyName="Capital" 
               CellStyleSelector="{StaticResource MyCellContentStyleSelector}">  
    telerik:RadGridView.Columns> 
telerik:RadGridView>

Further details are covered in the associated documentation article: .NET MAUI DataGrid Documentation - Style Selectors.

For actual settings and considerations, let’s take an example involving the display of Date values. While in WPF you need to manually specify a DatePicker editor, Telerik UI for .NET MAUI offers a nice ready-to-configure DateColumn built-in implementation, featuring a RadDatePicker control for value selection in edit mode.

.NET MAUI XAML

<telerik:DataGridDateColumn PropertyName="Established" HeaderText="Date Established" 
                           CellContentFormat="{}{0: ddd-d-MMM-yyyy}"> 
telerik:DataGridDateColumn>

While the CellContentFormat uses the format string provided by the framework by default, you could add custom options as explained in the Standard Date and Time Formatting and Custom Date and Time Formatting articles. And you can find more on how to utilize the Telerik .NET MAUI localization and globalization features here.

Theming Challenges & Support Resources

One key challenge in this migration is verifying that any existing WPF visuals will be rendered in the same, if not better, way in your .NET MAUI app across different platforms. It is worth mentioning the component suite adds value not only through controls but also by utilizing icons, scaffolding and other rich styling options, including a platform theme with light and dark variants. These resources can provide more details:

Telerik UI for .NET MAUI comes with a built-in theme that controls the visual appearance of the components, including colors, borders, backgrounds, size, layout, position and font size. The theme also offers multiple color variations to choose from. The next image shows an example of the basic differences and similarities between the Purple and Purple Dark swatch (variation) when applied to AutoComplete control.

Like the WPF suite, you have control over customizing the styles of specific controls or collections of controls, and you can modify the control-specific theme resources.

Exploring different theming options, you can get an idea on how the bound column would look like with the Telerik Turquoise Dark configured:

The Telerik .NET MAUI ControlsSamples App offers a convenient way to compare the built-in theme swatches. Just go to the Theming example of each of the various components and use the Change Theme button to switch between the theme swatches.

The ProgressTelerik channel on YouTube offers more video resources on Mastering the DataGrid.

Built-in Page Templates

To further enhance productivity, the Telerik UI for .NET MAUI Visual Studio extension lets you scaffold an app page (screen). This allows you to quickly add predefined pages and define control parameters through the UI. To display a scaffolded screen in your app, simply specify the page’s namespace and set the screen directly inside the xaml file.

Working with Documents

The built-in RichTextEditor and PDFViewer can display documents directly. Another benefit provided when using a library such as Telerik UI for .NET MAUI is the additional tooling such as the Telerik Document Processing Libraries that facilitate associated tasks such as required manipulation of the most used flow, fixed and spreadsheet document formats for .NET applications without relying on third party software (MS Office, Adobe Acrobat).

Migrating and modernizing existing applications to keep up with new business directives and to satisfy the complex demands of today’s bring-your-own-device (BYOD) environment is a challenging task that involves extensive investigation and careful planning.

Partnering with a reliable, knowledgeable technology partner such as Progress Telerik can make the task easier and simplify this process by providing a single source for UI tooling, developer-centric documentation and practical demo resources. We prioritize our customers’ user experience and security, building our products are on a strong foundation to better safeguard their data and operations. Plus, our enterprise-level support expedites the development of secure, compliant as well as accessible applications.

Explore the full Telerik DevCraft suite, which includes Telerik UI for WPF and UI for .NET MAUI.

Try Now

Considerations When Porting a WPF App to .NET MAUI

2024-11-06T09:15:00Z

See how WPF and .NET MAUI compare and what to be aware of if you’re going to migrate to .NET MAUI.

When starting a new application, a development team needs to carefully consider which framework is best suited to the project’s overall requirements.

While they share some similarities, frameworks differ significantly in terms of architecture, platform support, UI development paradigms, etc. As an example, Microsoft’s .NET Framework offers WPF targeted to Windows Desktop development or a more flexible option in .NET MAUI that enables developing a single project targeting a wide range of mobile and desktop devices with the added benefit of sharing code with web apps and services.

This matter must be well addressed and investigated before proceeding with implementation.

For a deeper review of how to make a better decision based on the business perspective and the background and learning curve in mind, see our blog post on WPF or .NET MAUI—How to Choose.

The Why: True Cross-Platform App | macOS Support

.NET MAUI, the multi-platform app UI for .NET, builds on top of the cross-platform layer for you, and in addition it provides cross-platform access to APIs directly in those native platforms. It allows the developer to use the architectural pattern of preference (MVU, MVVM or none) and this can simplify the UI development process.

Once you’ve made the decision on how to proceed, there are certain things to preface before you get started with actual migrating.

First, you should analyze your existing WPF project and look at all the dependencies. That includes class libraries and third-party control libraries that you are using. If those libraries are from Progress Telerik, then you surely are familiar with our way of distribution.

Topics to consider when modernizing an app from WPF to .NET MAUI include:

Starting Out: Create Fresh .NET MAUI App Project | Move Assets Over

To make sure you have a running .NET MAUI application, follow the step-by-step guidance on building your first cross-platform app on Windows. Further details on the system requirements and available settings are listed in the Microsoft .NET MAUI documentation.

Then, to proceed with using our third-party libraries, make sure to check the different Telerik UI for .NET MAUI Installation Approaches and explore the Available Product Files and Assemblies as well. Installing Telerik UI for .NET MAUI with NuGet would work both for Windows and macOS machines. Alternatively, you could download an .msi installer for Windows or a .pkg for macOS.

Benefiting from the Telerik .NET MAUI App and Telerik .NET MAUI Blank App project templates, you can quickly create an application that is pre-configured to use Telerik UI for .NET MAUI.

Understand Differences: Layouts | Multi-windows | .NET APIs | Deployments

While WPF is designed for dynamic, visual appealing desktop applications targeting Windows, the base layouts in .NET MAUI are slightly different from WPF, but most perform the same functions you are already familiar with in WPF.

In both cases the layouts are built using XAML and custom controls or layouts can be developed using C#.

For example, instead of a StackPanel in WPF, you use a StackLayout in .NET MAUI. I would suggest you take a look at the .NET MAUI documentation before porting the code directly: Layouts - .NET MAUI | Microsoft Learn.

.NET MAUI is excellent for building cross-platform applications that run on almost any platform as the MAUI layouts also use XAML and C#, but they are more optimized for multi-device compatibility, automatically adapting to various screen sizes and orientations.

While WPF natively supports managing multiple windows as a straightforward task, .NET MAUI allows creating multiple windows only on platforms that support it, and the concept of multi-windows is limited on mobile platforms that might be constrained by platform-specific behaviors.

.NET MAUI has a good integration with the .NET ecosystem. It includes platform-specific APIs through dependency injection and handlers, allowing developers to access native APIs for the various platforms within a shared codebase. Further, handlers can be customized to amplify the appearance and behavior of a cross-platform control beyond the customization that’s possible through the control’s API. Since WPF covers Windows-only, it can take full advantage of all the Windows OS-specific APIs without worrying about cross-platform limitations—those can be still adjusted.

As it comes to deployment, WPF apps rely on Windows-specific technologies that can’t run on other platforms without virtual environments. The apps are typically distributed as .exe files.

.NET MAUI apps can be deployed using app stores or via direct installers, or as unpacked exe. Blazor Hybrid apps are also supported, allowing a combination of web-based and native UI technologies.

XAML Differences: Namespaces | UI Differences

Why XAML? To separate user interface definition from code and allow you to port UI to different environments (Windows desktop, Windows store, iOS, etc.).

Both frameworks use XAML for defining the user interface and styling which allows the creation of rich, declarative UI.

On top of that, .NET MAUI supports more unified XAML syntax across platforms and offers a native look and feel with Windows 11 styling by default. Plus, to support a concise and platform-agnostic way to create UI components, .NET MAUI introduces a fluent API “MAUI markup.”

More on XAML in .NET MAUI vs. XAML in WPF/WinUI:

Some control names are different while the same types of controls exist.
Some property names are different while used to set the same action.
XAML works well with the Model-View-ViewModel (MVVM) pattern.
Markup extensions are supported enhancing the flexibility.
Mimics with greater visual clarity the parent-child hierarchy.

While XAML isn’t mandatory for a .NET MAUI app, it’s the preferred method for UI development due to its conciseness and robust tooling support. Additionally, Telerik UI for .NET MAUI suggests theming support and other features are upcoming, as listed on the official roadmap.

.NET MAUI pages would have a similar structure to WPF windows or user controls. For example, this is how a sample view with the respective XAML namespaces would look like for a .NET MAUI project:

__

The third namespace above defines the Telerik toolkit. This is how a similar code would look like in a WPF project:

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:telerik=[http://schemas.telerik.com/2008/xaml/presentation](http://schemas.telerik.com/2008/xaml/presentation) … />

Interactivity: Mouse Pointers | Event Handling I Commands

WPF provides deep integration with the mouse as the primary input device, providing rich support for capturing and manipulating mouse input that empowers flexible event handling.

In .NET MAUI, this ability is more generalized, as touch and gesture handling take precedence on mobile platforms.

.NET MAUI must abstract away the differences between platforms where event handling would be more straightforward but less flexible.

As a result, WPF offers advanced and specialized system for handling mouse events, whereas .NET MAUI abstracts input handling to work across multiple platforms, with less focus on mouse input and more focus on general input methods like touch and gestures. For instance, in .NET MAUI mouse events (MouseEnter, MouseLeave) are mostly relevant to desktop platforms, whereas touch events (Tapped, Swiped) are more relevant to mobile.

Both WPF and .NET MAUI follow a similar model for basic event handling, but there are differences in syntax and available events due to platform-specific considerations.

Let’s see a simple example with a Button in WPF:


<Button Content="Click Me" Click="Button_Click"/>
private void Button_Click(object sender, RoutedEventArgs e)
{
  MessageBox.Show("Button Clicked!");
}

The same code in .NET MAUI would look like:

<Button Text="Click Me" Clicked="Button_Clicked"/>
private void Button_Clicked(object sender, EventArgs e)
{
  DisplayAlert("Alert", "Button Clicked!", "OK");
}

It is worth mentioning that WPF uses the RoutedEventArgs class, which supports WPF’s routed events, while .NET MAUI generally uses the standard EventArgs class for basic events that are handled directly at the source but provides platform-specific event arguments for more advanced scenarios.

In .NET MAUI, commanding is also available, and it’s very similar to WPF. For example, you can use ICommand with a binding in XAML.

public ICommand MyCommand { get; }
public MyViewModel()
{
  MyCommand = new Command(ExecuteMyCommand);
}

Further, the framework supports all the modern .NET features such as hot reload, data binding and MVU (Model-View-Update) architecture, which allows for better code reuse across platforms.

Reuse Resources: Shared Images | XAML Styles + Templates

Reusing resources between WPF and .NET MAUI involves sharing common components or other resources while maintaining flexibility for platform-specific details. To share those efficiently, you can create a common XAML resource dictionary that both can reference (for styles, brushes, colors, templates, converters and other visual resources).

Even though WPF and .NET MAUI use different mechanisms to handle assets and images, you can organize shared images to be referenced when needed.

Naturally, the controls on .NET MAUI are automatically reacting with the accessibility settings changed by the end user to assure dynamic font sizes. Further, you can also use ControlTemplates and DataTemplates to retain the same UI flexibility as WPF.

For more information about using images, check out the topic on Add images to a .NET MAUI app project.

For advanced scenarios, you can explore the Telerik ImageEditor control for MAUI and the respective Telerik ImageEditor for WPF.

Reuse Business Logic: Isolate C# Code as Libraries | Dependencies

Reusing code from a WPF app can be a good strategy when migrating and it largely depends on how well-separated your business logic is from the UI. It would be easier if you’ve followed a clean separation of concerns (the MVVM pattern).

For example, you may use interfaces to decouple platform specific implementation. We could consider the code into the following main categories:

Business Logic: Domain logic that handles operations based on your app’s rules.
Data Access: Code that interacts with the database or file system.
Services: APIs, third-party integrations, etc.
Models: Data transfer objects (DTOs) or view models.

Then, so that the class library is compatible with both WPF and .NET MAUI, you have to move your core logic to a new class library and make sure to remove or abstract any dependencies on UI components.

If you need to target an older .NET Framework version of WPF, then you can consider refactoring the business logic into .NET Standard; otherwise, use .NET 6/7/8/9 so your code will run on both WPF and .NET MAUI. The goal would be to structure your code to separate the domain logic from the UI so that it can be shared across different platforms. This means to also refactor any code that directly interacts with WPF-specific namespaces (e.g., System.Windows.Controls, System.Windows.Media, etc.).

For a reference, the following topic describes all controls dependencies for Telerik UI for WPF.

For a detailed explanation of using the MVVM pattern in .NET MAUI, refer to Model-View-ViewModel (MVVM) in Enterprise Application Patterns using .NET MAUI.

Updated Ecosystem: Windows vs .NET MAUI Toolkits | Cross-Platform NuGets

While the Windows toolkit extends the Windows ecosystem with additional controls, helpers and extensions, the .NET MAUI Community Toolkit is specifically designed for cross-platform applications and provides a set of utilities, extensions and UI components intended to work seamlessly across all platforms supported with minimal platform-specific adjustments.

To start using .NET MAUI, you should install Microsoft.Maui.Controls (corresponding to Systems.Windows.Controls for WPF). There are various other packages available, for example CommunityToolkit.Mvvm provides support for MVVM pattern and simplifies the command implementation with attributes, the Microsoft.Maui.Graphics package contains a collection of graphics and drawing APIs.

In case you are migrating from Xamarin.Forms, you should check the Microsoft.Maui.Controls.Compatibility package that contains a collection of APIs and views.

Once you’ve set up the base, the Telerik UI for .NET MAUI Toolbox extension can facilitate adding our third-party controls to your .NET MAUI application.

Updated Telerik UI: WPF vs .NET MAUI | Differences in Namespaces

As a vendor of components, we do follow the naming standards set by Microsoft. Although WPF and .NET MAUI development has a lot in common, there are differences in the namespaces because WPF is a Windows-specific framework introduced years ago, whereas MAUI is newly designed to best serve cross-platform development.

Starting with the core UI namespaces, System.Windows in WPF would correspond to Microsoft.Maui. For a full list, you can refer to the .NET MAUI API reference version 8.

To look at specific namespaces of the Telerik library, Telerik.Windows.Controls in WPF corresponds to Telerik.Maui.Controls. Following the pattern, you can extend it to Telerik.Windows.Controls.Data - Telerik UI for WPF that maps to Telerik.Maui.Controls.Data - Telerik UI for .NET MAUI.

As it follows naturally, Telerik.Windows.Data in WPF would correspond to Telerik.Maui.Data. You can explore the entire API reference section that contains a list and descriptions of all publicly available classes, methods and properties of the Telerik UI for .NET MAUI.

There may be some naming differences—for example Class NotifyPropertyChangedBase - Telerik UI for .NET MAUI corresponds to Class ViewModelBase - Telerik UI for WPF.

You can use Telerik UI for .NET MAUI on Windows and macOS. Depending on the operation system you are using and on the preferred way to work with the product, the suite can be installed in the following ways:

Installing Telerik UI for .NET MAUI with NuGet would work for both Windows and MacOS machines.

The Telerik.UI.for.Maui NuGet package supports the latest .NET, and automatically restores the required packages depending on the .NET version you are using in your project.

Although there is not a one-to-one API mapping from Telerik UI for WPF to Telerik UI for .NET MAUI, the controls share similar APIs with slight changes because of the differences between the frameworks.

Summary

Both WPF and .NET MAUI frameworks offer a lot of possibilities to achieve a good-looking UI that can be easily customized to meet business expectations.

You can find further examples on how to reuse code in the Styling and Customization section in the blog on WPF or .NET MAUI—How to Choose.

A great workshop to check out is the one on Modernization Through Migration. Plus, Progress Telerik UI for .NET MAUI offers a comprehensive getting started video curriculum available to both active trial users and active license holders in Virtual Classroom.

Make sure to also go through other practical details on how to Transform a WPF App to Cross-Platform with .NET MAUI.

Don’t forget you can try both UI for WPF and UI for .NET MAUI in the Telerik DevCraft suite. It comes with a free 30-day trial.

Try Now

WPF or .NET MAUI—How to Choose

2024-04-25T07:34:55Z

Creating a desktop application and need to decide between the long-time reliable WPF and the up-and-coming cross-platform .NET MAUI? This post will help you explore the features that matter.

What technology to use is a question that should be considered before starting any new application. It’s even more relevant nowadays when starting a new desktop app, as .NET offers several solutions for a .NET developer to create such. In this post, we will focus on WPF and .NET MAUI and how to choose between them.

We will consider the following criteria:

Targeted OS
Future plans for the application
Developer background
Customization ability
AI capabilities
Deployment options
State of the framework

Targeted OS

This is perhaps the first thing to consider when you have to make such a decision, as it is one of the major differences between the two frameworks.

Windows Presentation Foundation (WPF) is a UI framework for Windows-based desktop applications. While WPF is a Windows-only framework, .NET Multi-platform App UI (.NET MAUI) is designed to be cross-platform and target Windows, macOS and mobile devices working with iOS and Android.

So if you need to target both macOS and Windows for your desktop app and reach more end users, .NET MAUI gives you this.

On the other hand, if you want to target Windows only, WPF is designed exactly for this job. WPF is also the choice if you need to target versions of Windows older than Windows 10.

Future Plans for the Application

If your answer to the previous question is yes, your current goal is Windows only—stop and think again about future plans. Take into consideration whether the business need will push you to add a mobile version soon.

In this case, .NET MAUI is a viable solution as it wins here with source code reusability. Developers can reuse code and easily update apps across different platforms.

Background

When creating a new desktop application and choosing the right toolset and framework, it is important to have the background and learning curve in mind.

If you are familiar with WinForms or have experience with web development and do not have experience with any XAML technology, .NET MAUI may seem more attainable for you with the abilities of CSS, dependency injection and others. On the other side, .NET MAUI does not offer Visual Studio Designer, typical for other .NET frameworks like WinForms, ASP.NET or WPF.

If you are familiar with WinUI or Xamarin, note that the XAML language is almost the same for .NET MAUI and learning it will be straightforward. .NET MAUI XAML is actually the 2009 XAML Specification.

However, if your experience is with Silverlight XAML, which follows 2006 XAML Specification, you will have no issue with WPF, but you will meet some differences with .NET MAUI. I have listed several of these differences in another .NET MAUI vs. WPF post.

Styling and Customization Ability

A good-looking UI is very important for any application, right?

The good news is that both frameworks offer a lot of possibilities to achieve this, such as Implicit, Explicit,Global Styling and Theming.

The image above illustrates how a style can be applied to change the default look of a button in both frameworks. (Find the code for any of the platforms in the specific section.)

WPF

One major difference between the two frameworks is the default look on Windows. While WPF is expired from older versions of Windows OS, .NET MAUI UI creates a WinUI app when targeting Windows. This means that your .NET MAUI app will provide the same user experience on Windows as Windows 11 fluent apps.

Of course, both can be customized. My personal vote here goes for WPF as I find the approach of customization simpler—you rely on XAML. On the other hand, .NET MAUI offers several approaches. This is powerful but may add an additional layer of complexity.

WPF MVVM patterns offer clear separation between the UI (the View), the application logic (the ViewModel) and the root data (the Model).

On top of that, Progress Telerik UI for WPF also offers more than 20 ready-to-use themes that you can use directly or personalize with Telerik Color Generator.

Another important thing to notice is that WPF offers Visual Studio drag-drop designer, while such is not available for .NET MAUI.

.NET MAUI

.NET MAUI UI offers a native look and feel by default—Windows 11 styling on Windows. The UI can be also customized in several ways:

Using XAML
Using CSS, although it’s not possible to fully style a .NET MAUI app using CSS; however, XAML styles can be used to supplement CSS
Using Handlers (read more here: Xamarin Renderers to .NET MAUI Handlers)

The XAML code to style a button, for example, looks like this:

One more thing to notice is the Dark and Light support and the skinning mechanism that the platform offers. Telerik UI for .NET MAUI also has theming support on their roadmap.

AI Capabilities

Both platforms, as part of .NET family, can have integration with ML.NET when AI features like image recognition, text classification and others are needed.

Telerik UI also offers Conversational UI and is planning a AI Prompt component for both platforms to give one more tool to .NET devs for building modern apps.

Deployment Options

WPF

WPF has multiple deployment options, including:

XCopy deployment.
Windows Installer deployment to produce exe, msi or msix. You can also deploy the application on the Microsoft Store once you package it as MSIX.
ClickOnce deployment, which enables web-style application deployment for non-web applications. (Learn more.)

.NET MAUI

.NET MAUI apps are configured through a single-project system for managing features across platforms, including settings for deployment per platform. For Windows, we can rely on two options—an MSIX app package (known as a packaged app) or creating an executable file (known as an unpackaged app).

State of the Framework

WPF

Microsoft developed WPF in 2006 and it remains an essential part of the .NET Framework. So it is very mature and has a lot of resources, articles and courses available.

Tooling is also complete with Hot Reload support, VS Designer, Microsoft UI Automation support and a rich UI toolbox.

The Telerik UI suite also adds 160+ components that save time when you need complex UI, like Scheduling, DataGrid or Charts. You can find a full list of components here.

Microsoft and Telerik are still adding functionality to keep WPF up to date with the latest .NET capabilities. One of the interesting things in Microsoft’s roadmap is Windows 11 theming, while Telerik UI will add new components like an AI prompt.

.NET MAUI

.NET MAUI is a 3-year-old framework and the desktop features are still being developed. However, they are one of the main goals of Microsoft as well as improving the tooling. See more details in the .NET MAUI roadmap here.

Some of the .NET MAUI desktop capabilities added recently are:

Multi-windows support
Context Menu
Tooltip
Menu
Pointer gestures

On top of that, Telerik UI for .NET MAUI is also another tool that you can rely on to build powerful desktop applications with 60+ components, AI and theming capabilities planned.

Conclusion

It is great that nowadays .NET developers have more than one stable solution for building desktop applications. If you have already made your choice, you can share it in the comments.

And no matter what your choice, Telerik UI DevCraft is here to support you with both Telerik UI for WPF and Telerik UI for .NET MAUI including all kinds of desktop components, a free trial, tons of resources, demos and forums where you can discuss any technology challenges you may have.

Try DevCraft

Easier Date Range Selection in Your WPF Apps with the RadDateRangePicker

2024-03-05T08:48:04Z

The RadDateRangePicker revolutionizes date selection in WPF apps. Offering a sleek interface for effortlessly choosing start and end dates, it eliminates date juggling, enhances customization for a personalized look, and communicates easily through events.

Let’s be real—when it comes to picking dates in your WPF app, the classic RadDatePicker from Progress Telerik UI for WPF has been holding down the fort. But if you’re ready to take your date selection game to the next level, it’s time to meet its cooler cousin—the RadDateRangePicker.

Here’s why it’s the superhero your app deserves:

One Picker, Double the Fun:
RadDateRangePicker is like having two RadDatePickers in one. Selecting a range is as easy as pie—just pick a start date and an end date, all in one sleek interface.
No More Date Juggling:
Ever struggled with end dates that come before start dates? RadDateRangePicker has got your back. It’s smart enough to prevent those head-scratching moments and keeps your date ranges in check.
Lookin’ Good, Feelin’ Good:
Customize the look and feel to match your app’s vibe. Play around with the colors, fonts and styles to give it your own unique touch. Your users will appreciate the personalized touch.

Setting the Stage

Begin by preparing your project and adding references to these assemblies:

Telerik.Windows.Controls
Telerik.Windows.Controls.Input

Now, let’s shine the spotlight on RadDateRangePicker. Simply integrate it into your XAML like this:

Need to set a specific date range? No problem:

Razzle-Dazzle: Custom Ranges

Predefined date spans add flair. Customize or discard them using CustomRangesLoadingEventArgs. Check this snippet:

private void RadDateRangePicker_CustomRangesLoading(object sender, CustomRangesLoadingEventArgs e)
{
    // Add a new custom range
    var newRange = new CustomRange("Last 14 days")
    {
        StartDate = DateTime.Today.AddDays(-14),
        EndDate = DateTime.Today
    };
    e.CustomRanges.Add(newRange);
}

Cultural Customization Toolkit

Switching cultures and languages is a breeze:

this.dateRangePicker.Culture = new System.Globalization.CultureInfo("de-DE");

Customize Your Week

Change the game by tweaking the first day of the week, setting week rules and even blacking out dates:

var weekends = new ObservableCollection();
var daysInMonth = DateTime.DaysInMonth(DateTime.Today.Year, DateTime.Today.Month);
var startDate = new DateTime(DateTime.Today.Year, DateTime.Today.Month, 1);
for (int i = 0; i < daysInMonth; i++)
{
    var currentDate = startDate.AddDays(i);
    if (currentDate.DayOfWeek == DayOfWeek.Saturday || currentDate.DayOfWeek == DayOfWeek.Sunday)
    {
        weekends.Add(currentDate);
    }
}
this.dateRangePicker.BlackoutDates = weekends;

Dress to Impress: Appearance Tweaks

Experiment with the look and feel:

Defining what appears when no dates are selected.
Deciding whether to keep or remove the clear button.
Controlling the visibility of the top bar and header.
Choosing whether the custom ranges panel should be visible.

Furthermore, choose one of our themes from the WPF Themes Suite to elevate the visual appeal of your RadDateRangePicker. Feel like experimenting with different looks? Go ahead and play around with colors using our ColorThemeGenerator.

If you have further question or just want more information, swing by our documentation. We’ve got the extra insights to help you out.

And there you have it! RadDateRangePicker is now your trusted date range companion. Dive in, enjoy the process and let date-handling be the highlight of your coding adventure!✨

Feedback Welcome

We value your thoughts and insights. It’s time for feedback, and we’re all ears! Whether you have suggestions, questions or just want to share your experience, we’re here for it. Your feedback helps us improve and tailor our offerings to meet your needs better. Let’s make things even better together—drop us a line and let your voice be heard! ️✨

And if you haven’t given it a shot yet, don’t wait another minute to try out the latest:

Try Telerik UI for WPF

Create Scalable Line-of-Business and Enterprise WPF Applications with Telerik UI

2023-12-21T15:52:03Z

WPF is often used for high-performance business applications with complex data needs. Telerik UI for WPF offers 160+ components, themes and line-of-business app examples to make it even better.

When seeking reliable and established technology for the swift development of high-performance business applications, WPF consistently emerges as the right choice. No matter how much data you are dealing with, with Progress Telerik UI for WPF, interactive UI does not come at the cost of performance or flexibility.

Crafted to fulfill the most demanding needs, Telerik UI for WPF makes sure you get the finest in terms of variety, scope and design so you can create practical applications that leave a lasting impression on both end users and executives.

Building Blocks

In addition to the traditional, ultimate GridView control that is well equipped to adapt to any scenario or user preference, we also develop and support a range of various components to ensure smooth implementation of business scenarios across manufacturing, finance, banking, healthcare, retail, automotive and other industries.

The Telerik WPF GridView is designed for optimal performance and dealing with huge datasets. In such complex cases, there are considerations to keep in mind when dealing with extensive data. Тhere are tweaks that can be applied to achieve top-tier performance, and these adjustments typically fall into the categories of reducing the UI complexity or reducing the amount of data being processed at a time.

Aiming at providing the best performance at large scale, we’ve introduced a VirtualGrid as an alternative. In the GIF below, you can see an example of scrolling through more than a trillion cells in the VirtualGrid (a million millions!).

Combining the VirtualGrid with the charting capabilities (make sure to check the blog on how to Reach New Peaks in Your Data Storytelling with the WPF RadChartView Histogram), with the RadSpreadsheet, with the Scheduling options, with the powerful practical capabilities of the RadPivot—it can serve and benefit every business case.

Professional visualizations and good performance are vital when it comes to creating quality applications. Those remain a top priority, consistently ranking as one of the most significant concerns for both developers and managers. As you may expect, nowadays users have a strong dislike for slow and laggy applications and would prefer to use apps that meet modern performance standards.

To provide even better user experience, you can further explore the touch support built in with Telerik UI for WPF and also consider using a busy indicator. Plus, we offer excellent integration with the RadDataPager to work with any large collections of data.

If your data involves complex structures with multiple levels of measures and dimensions with multiple layers of nesting, and you need row and column totals, then RadPivotGrid is at your disposal. This specialized component is built for the purpose of aggregation of extensive datasets in a tabular format and empowers users to dynamically add or remove measures and dimensions as required on the fly. The RadPivotGrid also offers powerful sorting and filtering capabilities.

Sample Business Applications

There are several applications we provide (including the source code) for you to get a better idea of complex applications combining the most popular components like RadGridView, RadChartView, RadScheduleView, RadMap, RadComboBox, etc.

CRM Application

The powerful Customer Relationship Management (CRM) Application showcases an attractive UI and real-time responsiveness while dealing with extensive sets of data. The application facilitates the convenient visualization of contacts, opportunities and activities that are integral to the daily operations of sales teams.

Outlook Inspired App

The Outlook Inspired App is a functional Outlook-inspired sample application that mimics the look, feel and behavior of Microsoft Outlook, combining both the email and calendar functionalities. The sample app covers one of the most common application scenarios WPF developers face.

Sales Manager Dashboard

The Sales Manager Dashboard uses modern UI theming and real-time customization to ensure end-user value for any sales team. It utilizes the charting, RadProgressBar and RadGridView to get the sales breakdown across products, countries and financial periods.

Executive Dashboard

The Executive Dashboard app allows users to follow sales trends across products, countries and quarters. Represent data in a convenient and user-friendly manner, enhanced with modern UI theming and the ability for real-time customization.

Our MSIX installer will automatically install any missing dependencies. Then you will be able to run it locally.

Visual Studio Templates

To simplify the initial setup process and getting started experience, the Project Configuration Wizard offers several pre-built Visual Studio Templates. With just a few clicks, you can now begin creating Windows inspired applications.

Currently, you have the option to choose from the following Visual Studio templates:

The controls can be directly dragged/dropped from the Visual Studio Toolbox. To enable this under .NET, you will need to install Telerik UI for WPF NuGet Packages (check details).

Additionally, the Telerik UI controls introduce customized design-time support as using smart tags, design-time selection and also the standard control properties changing through the Visual Studio Designer.

Theming and Color Theme Generator

The UI for WPF suite comes with a variety of predefined themes to directly apply to your application. Some of the themes have a ThemePalette, allowing for different color variations to expand this variety even more.

For instance, the Material Theme comes with built-in elements that provide interaction feedback, with easy-to-customize colors and Material design drop shadows with beautiful and smooth transitions between the states.

The Windows 11 theme comes with built-in Light and Dark color variations, Mica and Acrylic effects, switching variations based on the default OS app mode, an option to use the OS accent color and a lot more.

We offer the Color Theme Generator—a tool for interactive theme palette customization with live preview. You can try different shades and tints and blend them as you wish. And when you’re finished with the design experiment, you can export the outcome.

The Theme Generator enables you to tweak theme colors and immediately see the results. To make it easier to choose the right colors for your application, the tool provides a few predefined palettes for each of the themes. It can also be used to easily create custom palette settings.

You can obtain the Color Theme Generator application from the WPF Color Theme Generator page. Before choosing what theme to apply, you might find it useful to familiarize yourself with the themes concept.

To get an idea of the default appearance of a specific control in a certain theme, please view its corresponding “Theming” demo in the WPF Controls Examples application.

Feature Demos & Developer Examples

You can download the official demos application, which showcases a variety of use cases highlighting the main features of each component. The full source code of the examples is also available for download in the Telerik UI for WPF download page under Your Account.

We wanted to provide developers with further practical examples of various popular use cases, so you can discover additional demos for the majority of the controls in the Telerik XAML SDK repository. The examples illustrate many specific scenarios that might be helpful to get started.

Why not also check the SDK Samples Browser that provides a more convenient approach to exploring and executing the provided examples?

Wrap-up

Ensuring a positive user experience is of great significance to us, and we are continually striving for introducing enhancements. A core design principle we adhere to is making the appearance more personalized.

For even better customer experience for your clients, it is critical to maintain a responsive interface, so it is worth spending some time exploring the right features and following the best practices to configure performance optimization.

Level up Your UI with the New Telerik RadSvgImage Control for WPF

2023-11-09T08:17:02Z

The RadSvgImage component in Telerik UI for WPF empowers developers to seamlessly integrate vector-based graphics into their apps. Take a closer look!

In the much-anticipated R3 2023 release, Progress Telerik introduced the groundbreaking RadSvgImage control in UI for WPF. This innovative addition empowers developers to integrate vector-based graphics into their applications, elevating user experiences to a whole new level.

With the ability to scale images without sacrificing quality, the RadSvgImage control revolutionizes UI development in WPF. It’s particularly invaluable for crafting high DPI applications, prioritizing user satisfaction. The cornerstone of this advancement lies in Scalable Vector Graphics (SVG), an XML-based format that allows graphics to adapt seamlessly to all DPI settings.

Getting Started with RadSvgImage

Adding RadSvgImage to your project is a piece of cake! Just include a reference to the Telerik.Windows.Controls assembly, and you’re all set. It’s that simple! Displaying an SVG image as a standalone component is a breeze, as you can set the UriSource property like so:

Keep in mind that RadSvgImage does not have a default size. If it’s placed in a panel that measures it with Infinity (e.g., in a StackPanel), you’ll need to specify a size for the SVG image to display properly. ️

Want to spice things up? You can also roll with RadSvgImage as a markup extension, instead of setting it up as a separate component:

Customizing Fill Colors

Check it out! You can totally swap out the fill color of your SVG image by tweaking the OverrideColor property:

Animations Made Easy

The RadSvgImage control has built-in animation support, allowing you to bring your SVG images to life. To apply an animation, utilize the animate, animateMotion and animateTransform elements inside the SVG’s XML.

Applying Brushes to Elements

If you’ve ever wanted to fill up your SVG images with a splash of color, you’re in luck. All you need to do is dive into the CustomBrushes property. This little gem allows you to easily apply different hues to elements within your SVGs. It’s like giving your graphics a personal touch! Just a heads up, the CustomBrushes property is a Dictionary, which basically means it’s a nifty tool for handling color variations.

Let’s dive into an example, shall we?

Say you have your SVG file ready. You can think of it as your canvas, waiting to come to life. Here’s a snippet:

Now, you’ll want to create a custom Dictionary collection to define your colors.

public class CustomDictionary : Dictionary { }

It’s time to load up your custom Dictionary with some vibrant choices. Check this out:

And finally, let’s bring it all together. Attach your RadSvgImage to the custom Dictionary using the CustomBrushes property. Watch your SVG image pop with personality!

Voila! Your RadSvgImage is now rocking custom colors and ready to shine. ✨

A Visual Comparison: SVG vs. PNG

The example below with RadGridView features two GridViewImageColumns, one using an SVG image and the other a PNG image. The difference is striking. While the PNG images are a little bit blurry, the SVG column retains its crisp clarity.

Conclusion

In summary, RadSvgImage control offers a versatile and powerful solution for seamlessly integrating high-quality vector graphics into your applications. Its flexibility, coupled with features like customizable colors and built-in animation support, opens up a world of possibilities for creating stunning user interfaces. In case you need more information about it, be sure to check the documentation, too.

Be sure to visit our newly rebranded WPF demos for a deeper dive into the capabilities of RadControls, including a lot of examples showcasing the potential of SVG and other controls. Explore a wide range of scenarios and discover how RadControls can revolutionize your application development. From SVG integration to a host of other powerful features, these demos provide an invaluable resource for unlocking the full potential of your projects. Head over now and experience the future of UI development firsthand!

Check Out the Demos

Also, don’t miss out on the Color Theme Generator. It’s a fantastic tool that allows you to preview all controls with different themes and colors, giving you a quick and easy way to find the perfect look for your application.

Try it out today and elevate your application’s visual experience!

Elevate Your Application’s Visual Experience with Compact Mode in the WPF Windows 11 Theme

2023-08-03T07:41:06Z

With the recent R2 2023 release, we are excited to announce a game-changing addition to our Windows 11 theme that will elevate your user experience—the new high-density (or Compact) layout option.

Themes are instrumental in enhancing the overall user experience, breathing life into the user interface, and reflecting your product’s branding and style.

Last year, after we launched the Windows 11 theme for Progress Telerik UI for WPF, we heard from many of you who were looking for a sleeker and more compact design. Instead of creating an entirely new theme, we decided to optimize the use of existing resources by utilizing all the colors from the current theme. And let me tell you, the result is truly impressive.

In this blog post, I will introduce to you the Windows11ThemeSizeHelper, a revolutionary way for the Windows 11 theme that empowers you to take your WPF application to new heights of visual appeal and customization.

Understanding the Windows11ThemeSizeHelper

Let’s dive into the world of the Windows11ThemeSizeHelper. This powerful and innovative helper is specifically designed for our Windows 11 theme. Its primary function is to switch between two distinct layouts using the IsInCompactMode property. By leveraging this property, the helper combines various resources, adapting the sizes to provide larger dimensions tailored for Windows 11 Standard, and effortlessly transitioning to more compact dimensions for Windows 11 Compact.

Easy Implementation

Integrating themes into your applications can be challenging for the developers sometimes. That’s why we’ve made it our mission to create a streamlined and straightforward process. With just one line of code, you’ll be able to apply Windows 11 Compact Mode and witness an instant transformation in the look and feel of your entire application:

Windows11ThemeSizeHelper.Helper.IsInCompactMode = true;

Customizing the Dimensions

But wait, there’s more! I thought it would be nice of me to also show you a way of customizing the dimensions of the Windows 11 theme. Let’s consider a practical example where we create two StackPanels—one using the Standard Windows11 layout and another where we’ll modify specific resources within the StackPanel scope. The possibilities for customization are truly endless!

And voilà! Feast your eyes on the result:

Finding the Resources Values

Now, you might be wondering where to find the desired resource values. Look no further! Simply navigate to the Windows11ThemeSizeHelper class in the Telerik.Windows.Controls.dll assembly. In this file, you’ll discover the resource names corresponding to the Windows 11 Standard and Compact themes.

Alternatively, you can download the resource files from the PaletteResourcesExtractor SDK example.

Don’t miss out! Head over to our online documentation, where you can find everything you need to know about the captivating Windows 11 theme.

Revitalize Your App’s Appearance

Check out our awesome Color Theme Generator! It’s a super cool tool that lets you play around with different colors and customize your theme palette in real time. You can try out all sorts of shades, mix and match them however you like, and see the changes instantly. And the best part? Once you’re done experimenting and creating the perfect look, you can simply export it and make it yours. It’s your chance to unleash your creativity and make your theme truly unique.

Conclusion

The Windows 11 Compact mode holds out an entire world of opportunities to modernize your WPF applications. It simplifies the process of integrating visually captivating themes, offers customization options to align with your branding, and saves development time.

Try out the latest version of Telerik UI for WPF to see what I am talking about!

Try Now

Once you do, you will not need to thank me! Just enjoy it and keep elevating the look and feel of your application, engaging the end users with stunning visuals, and leaving a lasting impression.

And don’t forget to stay tuned for more exciting updates and features as we continue to enhance your WPF development journey.

Happy theming!

What to Know When Porting a WPF App to .NET MAUI Blazor Hybrid

2023-06-14T14:37:02Z

Your WPF app can gain more users if you make it cross-platform, but what’s the best way to do that—with .NET MAUI or Blazor Hybrid? Here are the steps involved if the results show Blazor Hybrid.

In the previous .NET MAUI vs. WPF post, we had a look at our choices that Microsoft gives us to transform a WPF app to cross-platform. We talked about the most important differences between WPF and .NET MAUI.

Today we will review another interesting topic—how we can transform our WPF app to a cross-platform app using Hybrid Blazor apps.

You can take this simple test to choose the best technology stack for your needs:

So if your result for this little quiz leads you to Blazor Hybrid, this is the post for you!

What situations might that be?

The first case is for using such an approach is if we want our app to have a unified UI, to write the code at once but we need all desktop features, like file access system, camera settings, etc.
Another situation is when we already ported our code to .NET MAUI, but we need a component that Blazor ecosystem has to offer, such as Telerik Pivot or Telerik ScheduleView, for example, or another of the powerful components from Telerik UI for Blazor.

Scenario 1

Unified UI

The best choice here is to create a new Hybrid Blazor app using Microsoft VS Templates.

With .NET 7, you can choose between WPF Hybrid Blazor or .NET MAUI Blazor, and which one to choose depends which OS you need to target.

In this series, we are focused on the cross-platform experience, so .NET MAUI Hybrid Blazor app is our choice.

Visual Studio directly creates a Blazor app wrapped in the .NET MAUI project structure.

Scenario 2

We have a great MAUI/WPF app but we need a component that only the Blazor ecosystem has to offer.

For example, if you need to use Scheduling functionality in .NET MAUI, then you can look into the rich Telerik UI for Blazor suite.

In this case, our .NET MAUI app is already created and we need to follow the steps below to add the Blazor part or you can again create a blank MAUI Hybrid app and copy the needed files from there.

1. Add the Razor SDK, Microsoft.NET.Sdk.Razor to your project by editing its first line of the CSPROJ project file:

2. Add the root Razor component for the app to the project ака Main.razor page:

A razor component is a page containing the UI for your needs. It is the place to write your code when working with Blazor.

3. Add your Razor components to project folders named Pages and Shared.

For example, the code that I will use to add the Scheduler is placed in the Pages folder:

@Page "/"
@Using Telerik.Blazor.Components.Scheduler.Models;
 
    
        
        
        
        
        
    

 
@code {
    IEnumerable Appointments = new List();
    public DateTime StartDate { get; set; } = new DateTime(2021, 6, 21);
    public SchedulerView CurrView { get; set; } = SchedulerView.Week;
 
    //the time portions are important
    public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0);
    public DateTime DayEnd { get; set; } = new DateTime(2000, 1, 1, 20, 0, 0);
    public DateTime WorkDayStart { get; set; } = new DateTime(2000, 1, 1, 9, 0, 0);
    public DateTime WorkDayEnd { get; set; } = new DateTime(2000, 1, 1, 17, 0, 0);
 
    protected override void OnInitialized()
    {
        LoadData();
    }
    private void LoadData()
    {
       Appointments = appointmentService.GetAppointments();
    }
}

4. Add your static web assets to a project folder named wwwroot (things like favicon, fonts, etc.).

5. Add any optional _Imports.razor files to your project. This means list here the additional libraries that you will use.

Here, to use Telerik UI for Blazor, the following code should be added:

@using Telerik.Blazor
@using Telerik.Blazor.Components
@using Telerik.FontIcons
@using Telerik.SvgIcons

6. Modify the CreateMauiApp method of your MauiProgram class to register the BlazorWebView control for use in your app.

To do this, on the IServiceCollection object, call the AddMauiBlazorWebView method to add component web view services to the services collection:

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

        builder.Services.AddMauiBlazorWebView();
#if DEBUG
        builder.Services.AddMauiBlazorWebViewDeveloperTools();
#endif
        // Register any app services on the IServiceCollection object
        // e.g. builder.Services.AddSingleton();

        return builder.Build();
    }
}

And when the BlazorWebView is added and your .NET MAUI app becomes a .NET MAUI Blazor Hybrid app, it is time to add Telerik ScheduleView. The steps to do that are:

Add Telerik libraries by following the link: Download Telerik UI for Blazor
Add the Telerik client assets by adding these two lines in the tag of wwroot/index.html:

<link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" />
<script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js" defer>script>

Include @using statements in the _imports.razor file:

@using Telerik.Blazor
@using Telerik.Blazor.Components
@using Telerik.FontIcons
@using Telerik.SvgIcons

Add the TelerikRootComponent in Main.razor page:


    
        
            
            
        
        
            
                Sorry, there's nothing at this address.

// register the Telerik services  
builder.Services.AddTelerikBlazor();

And then if you followed all of the steps above, you should be able to see Telerik UI as part of your .NET MAUI project. The .NET MAUI project in my case contains also a .NET MAUI ListView on the left, and the BlazorWebView on the right:


<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MauiHybridBlazor"
             x:Class="MauiHybridBlazor.MainPage"
             BackgroundColor="{DynamicResource PageBackgroundColor}">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="10"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
      
        Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="300" />
            <ColumnDefinition Width="*" />
        Grid.ColumnDefinitions>
        <ProgressBar
            x:Name="isRefreshingControl"
        />
 
        <ListView 
            x:Name="itemListControl"
            Grid.Row="1"
            Margin="10"  
        >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <HorizontalStackLayout   HorizontalOptions="Center"  VerticalOptions="Center" >
                            <CheckBox Margin="1"    Color="Black"  />
                            <Label Text="{Binding}" VerticalOptions="Center"/>
                        HorizontalStackLayout>
                    ViewCell>
 
                DataTemplate>
            ListView.ItemTemplate>
        ListView>

    …........
        <BlazorWebView  Grid.Column="1" Grid.RowSpan="3" x:Name="blazorWebView" HostPage="wwwroot/index.html">
            <BlazorWebView.RootComponents>
                <RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
            BlazorWebView.RootComponents>
        BlazorWebView>
    Grid>
ContentPage>

Conclusion

The .NET world is more powerful than ever and now you can choose between mobile, web and desktop .NET frameworks and mix them to implement the best solution for your users.

Whatever your choice is, you are also covered with Telerik UI and Telerik DevCraft, with more than 1,000 additional UI components, templates, themes and a lot of resources so you can improve your development time and deliver a great UI at the same time. Download it now and share your experience with us.

If you want to learn more about Blazor with .NET MAUI, check out the new free ebook: Blazor Hybrid and Web in One Solution by our Principal Developer Advocate and Microsoft MVP Ed Charbeneau and visit the new Blazor Hybrid page.

Transform a WPF App to Cross-Platform with .NET MAUI

2023-06-08T14:13:01Z

Your WPF app can gain more users if you make it cross-platform, but what’s the best way to do that—with .NET MAUI or Blazor Hybrid? Take a quick test, and learn the steps involved if the results show .NET MAUI.

If you have a great WPF app, perhaps your main target users are those using Windows OS. However, the usage of Android, iOS and macOS devices continues to increase and they are now a very important part of our ecosystem.

For reference, we can take a look at the data in Wikipedia: Usage share of operating systems - Wikipedia.

Until recently, to reach all these users was not easy—you would write four different apps if you needed to rely on a native look and feel for the user experience or to choose the web stack and access the users via browsers. Let’s be honest, all of these options required learning different technologies and going outside the .NET world.

But now, the .NET family is so big and we can use it to extend and modernize our desktop application to reach the sky (or, in other words, Linux, iOS, macOS and Android ).

How? Let’s take a look at the most modern children in the family—.NET MAUI and .NET Blazor. Both are a great choice to consider when thinking how to bring our desktop app to new territories.

Which One to Use?

Please take this simple test and choose the technology stack for your needs:

So, if the result led you to using .NET MAUI, keep reading to the end of this post. If the results led you to using a Blazor Hybrid app, this is a great option too and we will look into it in the next post.

.NET MAUI XAML vs. WPF XAML

.NET MAUI is a cross-platform XAML-based technology, so if you have a strong WPF experience, you will have a quick learning process, but still prepare to meet some differences.

XAML is a great invention and I personally like it a lot. However, still there is no XAML standard, which makes things complicated when we are talking about unification and migration.

With .NET MAUI, we can reuse our XAML and C# skillset and bring our Windows desktop app to more devices by moving it piece by piece.

.NET MAUI XAML is actually the 2009 XAML Specification, the same as another member of .NET family—WinUI. So if you are already familiar with WinUI, you are familiar with big part of MAUI XAML. However, if your experience is with Silverlight/WPF XAML, which follows 2006 XAML Specification, you will meet some differences. I listed below the most interesting to start with:

Using Text

Here the well-known Label still exists, but not the TextBox component. In .NET MAUI, we use Entry for short text and the Editor component for multiple lines. Progress Telerik UI for .NET MAUI’s RadEntry is also a great component when we are talking about text with some features that you may need, such as built-in Validation.

Foreground is also replaced with the TextColor property.

Using Borders

While in WPF, we have built-in properties of the FrameworkElement objects Buttons, Labels, TextBox, etc. to use the BorderThickness, CornerRadius. In .NET MAUI, we have to use a container control that draws a border, background or both around another control. Here we can use the .NET MAUI Border component, where we need to use its StokeShape property to define the shape and corner radius or Telerik Border component which exposes directly the well-known properties for a WPF dev—CornerRadius and BorderThickness.

Height/Width vs. RequestHeight/RequestWidth

In WPF we can rely on Height and Width properties of the FrameWorkElement class, while in .NET MAUI the framework offers us HeightRequest and WidthRequest instead, which are properties of the VisualElement class. These properties will call the GetSizeRequest, which will in turn modify the final size the element receives during a layout cycle.

Layouts

The base layouts in .NET MAUI are also different from WPF and I suggest you take a look at the .NET MAUI documentation before porting the code directly: Layouts - .NET MAUI | Microsoft Learn.

Note that every .NET Multi-platform App UI control that derives from View (this includes views and layouts) has HorizontalOptions and VerticalOptions properties, of type LayoutOptions, and these are your new best friends when positioning the elements.

For example, use it to position a Label inside a StackPanel:

<HorizontalStackLayout  HorizontalOptions="Center"  
  Margin="0, 20, 0, 20">  
    <Label  Text="Searching... "  
    FontSize="16"  
    TextColor="#8E8E93"/>
HorizontalStackLayout/>

I am listing here the common alternatives of the most used layouts from WPF:

WPF	.NET MAUI
Canvas	X
DockPanel	Telerik DockLayout: .NET MAUI DockLayout Documentation - Overview - Telerik UI for .NET MAUI
Grid	Grid – some properties are different
StackPanel	StackPanel, VerticalStackPanel, HorizontalStackPanel
VirtualizingPanel	X – not a direct alternative for now
WrapPanel	FlexLayout/ Telerik WrapLayout: .NET MAUI WrapLayout Documentation - RadWrapLayout Overview - Telerik UI for .NET MAUI

The ScrollViewer component is also not available, but you can rely on ScrollView to achieve scrolling functionality. Read more about its API in the documentation: ScrollView - .NET MAUI | Microsoft Learn.

Using Windows

.NET MAUI is a successor of the mobile Xamarin framework where windows are not very used. That is why, by default, the base class of the XAML pages is not Window, but ContentPage. ContentPages are used to achieve the navigation in a .NET MAUI app, so the root window of the app uses them to change its content. So when you migrate WPF pages, change the base class to ContentPage.

Also, there are some “tricky” moments when we want to manipulate the window. For example, to change its size. Here is simple code for how to do that in App.xaml:

public partial class App : Application
{
    const int WindowWidth = 450;
    const int WindowHeight = 800;
 
    public App()
    {
        InitializeComponent();
 
        Microsoft.Maui.Handlers.WindowHandler.Mapper.AppendToMapping(nameof(IWindow), (handler, view) =>
        {
#if WINDOWS
                handler.PlatformView.Activate();
 
                IntPtr windowHandle = WinRT.Interop.WindowNative.GetWindowHandle(handler.PlatformView);
                AppWindow appWindow = AppWindow.GetFromWindowId(Win32Interop.GetWindowIdFromWindow(windowHandle));
 
                appWindow.Resize(new SizeInt32(WindowWidth, WindowHeight));
#endif
        });
        MainPage = new AppShell();
}
}

Another way is to override the App’s CreateWindow method, but only with versions .NET 7 and above.

protected override Window CreateWindow(IActivationState activationState)  
      {  
        var window = base.CreateWindow(activationState);  
        window.MinimumHeight = 600; // set minimal window height  
        window.MinimumWidth = 800; // set minimal window width  
        return window;  
      }

With .NET 7, we can use multi windows. This can be achieved by creating a Window object and opening it using the OpenWindow method on the Application object.

Window secondWindow = new Window(new MyPage());  
Application.Current.OpenWindow(secondWindow);

Note that multi-window support works on Android and Windows without additional configuration. However, additional configuration is required on iPadOS and Mac Catalyst. Read more about how to set it up in the Microsoft documentation here: .NET MAUI windows - .NET MAUI | Microsoft Learn.

Events

The naming convention for events is also a little bit different. But basically adding “ed” to the existing WPF events should do the trick.

Example: Button.Click is now Button.Clicked.

Another interesting thing to point out are the key-events. They are not exposed directly. However, most of the UI components have their events that fire when the focus is lost or the text is changed, and you can subscribe to them to do your job.

For example, you can subscribe to Completed event which is fired when Enter is read into the Entry:

MyEntry.Completed += MyEntry_Completed;  
  
private void MyEntry_Completed(object sender, EventArgs e)  
{  
  /// your code here  
}

Another way is to access the native windows component and attach the event:

To do that, you can obtain the UIElement on which the key-press events should be detected from Handler.PlatformView. And then you can hook up the native events.

var handler = mauiView.Handler;
  
UIElement? nativeView = handler?.PlatformView as UIElement;  
if (nativeView != null)  
{  
  nativeView.KeyDown += this.PlatformView_KeyDown;  
  nativeView.KeyUp += this.PlatformView_KeyUp;  
  nativeView.PreviewKeyDown += this.PlatformView_PreviewKeyDown;  
}

Images & Resources

This is one of the great features of .NET MAUI—a common shared folder where you can put the images, use the MAUIImage build action and directly access them in the code without worrying about where exactly they are:

For example, if you place add.png to the image folder, you can access it from a button by its short name:

Customization

Another important thing that you should know is how to customize UI or behavior per platform. You can use two major approaches:

Write platform-specific code and use the #if directives in C#:

#if ANDROID  using Android.Content;
using Android.Views;
  using Android.Runtime;
#elif IOS  using UIKit;
  #endif

For more information, see.NET MAUI invoking platform code - .NET MAUI | Microsoft Learn.

Or the OnPlatform property in XAML:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  x:Class="...">
  <ContentPage.Padding>
    <OnPlatform x:TypeArguments="Thickness">
      <On Platform="iOS, Android"  Value="10, 20, 20, 10" />
    OnPlatform>
  ContentPage.Padding>
ContentPage>

For more information, see OnPlatform Markup Extension.

Use the new mechanism in .NET MAUI—handlers. For handlers, you can read more in one of our previous posts.

Accessibility

Another very important topic for modern apps is accessibility. In WPF, we have a lot of tools to achieve that. One of them is the AutomationPeer class. In .NET MAUI, we will use semantic properties to make our app accessible. Read more about semantic properties here: Build accessible apps with semantic properties - .NET MAUI | Microsoft Learn.

Conclusion

Migration of a WPF application is not a trivial task, but it is worth it as .NET MAUI gives us a lot of possibilities and supported platforms.

The framework is rich with resources and functionality, but if you are missing something no matter whether it is a resource or a component, Telerik is here to help. Browse the Telerik UI for .NET MAUI documentation and download Telerik UI for .NET MAUI to boost your development process.

And if our small test above showed you that Hybrid Blazor app is better for your need—check out the next post: What to Know When Porting a WPF App to .NET MAUI Blazor Hybrid.

What’s New in R2 2023 with Telerik Desktop and Mobile Components

2023-06-07T13:49:37Z

Get ready for the latest update on our Progress Telerik products for mobile and desktop as we unveil the highly anticipated R2 2023 release.

We are thrilled to share the exciting features and improvements that await you in R2 2023 from our Progress Telerik mobile and desktop UI component libraries. So, sit back, relax and keep reading to stay in the loop!

Telerik UI for .NET MAUI

Prepare for an exhilarating update in R2 2023 as Telerik UI for .NET MAUI unveils a series of exciting enhancements. I am thrilled to introduce six brand-new controls: Calendar, PDF Viewer, Chat, SlideView, RichTextEditor and TreeView, each designed to empower your app development journey. In addition, we have taken steps to refine and enrich our powerful DataGrid control, unlocking even more possibilities. Let’s have a sneak peek at the most interesting stuff we have for you in this release.

Calendar

The new addition to the UI for .NET MAUI family is the Calendar component. It allows you to select single or multiple dates by navigating easily between decades, years and months. The control is culture-aware by providing globalization support. It also provides support for scrolling and navigation, blackout dates and much more.

Here is a list of the main features of the control:

Different display modes: Calendar features year, month, decade and century display modes.
Date Ranges: Restrict the visible/selectable dates in the Calendar by utilizing MinDate and MaxDate properties.
Different selection modes: The component provides different types of selection—Single, Multiple, Range or disabling the selection.
Buttons for navigation in the current view: You can easily navigate in the current view by using the buttons in the calendar header.
Hide the names of the display days in month view.
Format the header text for the corresponding view.
Templates support: For customizing the days, months, years and decades in the corresponding views.
Commands support: For navigating in the current view or between the views.
Styling API: You can style the Calendar border, header border and text, navigation buttons and the content of the corresponding view.

For more information on getting started with the Telerik UI for .NET MAUI Calendar control, visit the documentation.

PDF Viewer Component

One of the highly requested components for our UI for .NET MAUI suite was the PDF viewer. I am happy to share that it is now available with our latest release. This component empowers the users of your application to directly open and view PDF documents within their mobile or desktop app, eliminating the need for any external software installation or switching between different applications. You can visualize PDF documents that include images, shapes, different colors, ordered and bulleted lists and more.

Here are some of the key features to look for:

Various document source options: You can load the PDF document from a stream, from a file added as an embedded resource or a file located on the device, etc.
Zooming functionality: The component provides an option for zooming in and zooming out the content of the document.
Commands support: The PDF Viewer component offers support for a variety of commands, such as ZoomIn, ZoomOut, NavigateTo (NextPage, PreviousPage, Page) and FitToWidth.
Single page and Continuous Scrolling support: You can choose between two layout modes that allow the document to be scrolled in the viewer.
Flexible styling API: You can easily style the toolbar per your requirements.

For more information on getting started with the PDF Viewer control, visit the documentation.

Chat Component (Conversational UI)

The Chat control in Telerik UI for .NET MAUI empowers you to build contemporary chat experiences in your .NET MAUI apps. It smoothly integrates with popular chatbot frameworks and effortlessly facilitates peer-to-peer conversations.

The component offers a diverse range of customizable message formats like cards, pickers and suggestions. It also enables you to effortlessly replace forms with an instinctive conversational UI. You can modify messages and cards to include text, images and other elements or incorporate details such as message timestamps, sender/recipient names, avatars and much more.

For more information on getting started with the Telerik UI for .NET MAUI Chat control, visit the documentation.

SlideView Component

The new SlideView component provides a visually appealing and interactive way to present information or showcase visual content. Whether your goal is to create an image gallery or improve navigation within your .NET MAUI application, the SlideView component offers a comprehensive set of features and customizable options to fulfill your requirements.

Here are some of the key features to look for:

Item Template: Allows you to present the data in the views in the most suitable way for your scenario.
Control Template support: You can change the appearance of the SlideView component through a Control Template.
Customizable indicators and slide buttons: The SlideView allows you to customize the appearance of the indicators and slide buttons.
Commands support
UI virtualization

For more information on getting started with the Telerik UI for .NET MAUI SlideView control, visit the documentation.

Rich Text Editor Component

The Telerik UI for .NET MAUI RichTextEditor control empowers users to generate rich textual content using a comprehensive array of tools. These tools simplify the creation, editing and formatting of text, paragraphs, lists, hyperlinks and various other elements.

The Telerik UI for .NET MAUI RichTextEditor control comes with a multitude of editing capabilities, including:

Text formatting, such as bold, italic, underline and strikethrough
Font manipulations, such as size, family and color
Text selection
Hyperlink manipulations such as creating, editing and removing hyperlinks
Read-only state that does not allow text editing
Copy/Paste/Undo/Redo editing actions

It also has an integrated ToolBar, which effortlessly connects to the commonly used commands provided by the control.

For more information on getting started, visit the Telerik UI for .NET MAUI RichTextEditor control documentation.

TreeView

The new TreeView component in UI for .NET MAUI allows you to visually represent hierarchical data in a collapsible and expandable tree structure. It provides users with an intuitive way to navigate and explore complex information, such as folder structures, organizational charts or category hierarchies.

Here are some of the key features to look for:

Hierarchical navigation
Expand/Collapse items
Commands support
CheckBox support
UI virtualization
Single and multiple selection modes
Empty template support
Flexible styling API

For more information on getting started, visit the Telerik UI for .NET MAUI TreeView control documentation.

DataGrid Empty Template Support

The Telerik UI for .NET MAUI DataGrid control introduces the Empty Template functionality. This feature enables you to inform your end users when the control has no data to display.

DataGrid DataTable support

You can bind your .NET MAUI DataGrid to a DataTable and have access to all the cool features. You can add, remove, select, edit item(s) and update DataGrid’s ItemsSource. You can also perform commands and operations like filtering, sorting, grouping and selection.

.NET 6 & .NET 8 Support

As you may be aware, Microsoft officially discontinued .NET 6 support for .NET MAUI back in May. We are announcing that our plans align with this change, and we will be ending our support for .NET MAUI in .NET 6 in November—this should give you extra time to get off .NET 6 and onto .NET 7/8.

This transition marks an exciting milestone as we prepare to welcome the arrival of .NET 8, which will bring a host of new features and enhancements. Rest assured that during this period, we are actively working to ensure a seamless transition and guarantee an official and robust support system for .NET 8, which we will be ready to launch alongside its official release.

Check out the Detailed Release Notes

To get an overview of all the latest components, features and improvements we’ve made, check out the release notes for the product: Telerik UI for .NET MAUI (Release Notes).

Telerik UI for WPF

RadSlideView and RadPipsPager components

RadSlideView is a flexible navigation control that allows you to slide between different views, thus providing an interactive navigation. With it, you can build a gallery display to show your images and content efficiently.

RadPipsPager lets the user navigate a linearly paginated collection using glyphs also known as pips.

The two controls work seamlessly with one another to enhance the navigation experience in your applications.

They also share some of their main features:

Navigation: The controls allow you to navigate through the data either in a loop or from end to end.
Orientation: They can be oriented vertically or horizontally.
Customizing navigation buttons: The navigation buttons can be easily customized.

You can find more information about the new components in their respective documentation sections:

Windows 11 Compact Theme

Get ready to elevate your app’s aesthetics and create a masterpiece with the most innovative addition to the R2 2023 Release—a new, high-density (or compact) layout option for the Windows 11 theme. Designed for information rich UI and similar specialized scenarios, this new theme mode brings a stunning and sleek look to your WPF apps.

While functionality and behavior have not changed and remain consistent across the two size and density options, the default heights and offsets have been updated for all controls to support both density options.

For more information on getting started with our latest theme, visit the Telerik UI for WPF theme documentation.

RadDocking: Move Panes Between Multiple Docking Instances

No more moving pane restrictions between docking instances. Users can now create a group of dockings in which moving and docking panes are not limited, no matter if dockings are nested or side by side. This enables powerful UI rearrangement abilities in applications with multiple dockings in a single view.

For more information on getting started with this powerful feature, visit the Telerik UI for WPF RadDocking documentation.

SyntaxEditor: Search UI Enhancements

To better cover well-known scenarios in text or code editing from VisualStudio or NotePad++, we added more search options in the search panel. MatchCase, MatchWholeWord and Regex settings will give your users the powerful search experience they expect.

RadPivotGrid LocalDataSourceProvider Hierarchies

The LocalDataSourceProvider now allows you to display nested properties of the objects in its ItemsSource in a hierarchy similar to how DateTime properties are visualized in the RadPivotFieldList.

Nested properties can be utilized to create a report in the same manner as non-nested ones.

You can enable this functionality by setting the new EnableHierarchy property of the LocalDataSourceProvider to True. Then you will be able to provide a nested property path as the PropertyName of a group description.

To see this in action, check out the PivotFieldList demo in the WPF Examples application.

Here is also a list of other popular features we updated for you in this release:

TreeView: Ability to perform selection on mouse up
GridView: ExactMatch functionality in search-as-you-type feature
PropertyGrid: Allow searching for property fields that are not expanded initially

Support for .NET 8 Preview

We are excited to announce that we are extending our support to include the preview versions of .NET 8. While .NET 8 is still in the preview phase, we understand the eagerness to explore its capabilities. We have thoroughly tested our components and have made sure they are compatible with the latest preview releases.

Telerik UI for WinForms

The R2 2023 release comes with a brand-new Heat Map control, a dark Visual Studio 2022 theme, modernized Scheduler appointments, LineNumbering in the RichTextEditor and a ton of other improvements.

Heat Map

RadHeatMap is here to help you visualize numeric data in a meaningful and straightforward way. It uses a two-dimensional layout with indicative colors to represent data. Each entity is represented by a colored rectangle and the applied color maps to the magnitude of its numeric value. At a glimpse, you can spot trends and easily compare different data items.

The component comes with many features like intuitive API, databinding, unbound mode, different colorizers, labels, selection, tooltips and screentips, and custom painting.

For more information on getting started with the HeatMap control, visit the WinForms HeatMap documentation.

Visual Studio 2022 Dark Theme

Yet another member of our family of dark themes is coming. We are expanding this collection because we know that many of you are fans of the dark side. As its name suggests, the theme is inspired by Visual Studio 2022 and its dark mode.

For more information on getting started with our latest theme, visit the Telerik UI for WinForms themes documentation.

Scheduler Appointment Styles

We’ve always strived to create modern components and designs. It was about time for the RadScheduler look to completely change. New appointment styles are coming to RadScheduler—they are fresh, bold and modern. The styles vary from one theme to another, matching its general look and feel.

Line Numbering in RichTextEditor

RadRichTextEditor has a new handy feature—line numbers. The numbers are displayed at the beginning of each line and, if needed, can work independently in different paragraphs, sections or pages. They are quite popular in legal documents, scripts or medical records.

For more information on getting started with this powerful feature, visit the WinForms Line Numbering in RichTextEditor documentation.

Support for .NET 8 Preview

.NET 8 is still in preview but it’s getting increasingly stable. We’ve also played with this new runtime and so far, could not isolate issues with the components. If you are adventurous enough or want to experiment, Telerik UI for WinForms has you covered.

Other Improvements

Besides the highlights above, the 2023 R2 release comes with plenty of other enhancements. I will name just a few that will improve your Telerik UI for WinForms experience:

Major performance gains in our Visual Studio extensions. Now we are using new APIs allowing us to offload the UI thread. This is an ongoing effort, so expect more in this regard with our next releases.
We’ve decided to update our distribution with assemblies that are digitally signed. So, if you need those, now you can download them straight from your Telerik account.
Many fixes and improvements related to importing, printing and copying documents inside the RadRichTextEditor control.

Telerik UI for WinUI

New TimeBar Component

RadTimeBar is a time-bound DataVisualization control. Its chief purpose is to allow lightweight scrolling and navigation through large periods of time. Additionally, the control exposes intuitive API which allows for both declarative and programmatic manipulation of the control.

The component provides the following features:

Intervals: The control allows you to define the available intervals that will be visualized when you zoom in/out on the control.
Selection: A time interval can be easily selected via the mouse or by setting a couple of properties of the control.
Special slots: This feature can be used to highlight different time intervals in the control.
Custom intervals and formats: The intervals can be customized by implementing a couple of interfaces. This way you can modify the intervals and the date-time formats used to define the appearance of the periods.
Localization: As all controls in the suite, the RadTimeBar supports several languages. The strings that are localized are the date labels (month, week, etc.).

For more information on getting started, visit the Telerik UI for WinUI TimeBar control documentation.

Telerik UI for Xamarin

In the R2 2023 release, our main focus revolved around Telerik UI for .NET MAUI. However, we are delighted to share that we fulfilled one of the most highly requested features for our Xamarin’s DataGrid component.

Xamarin DataGrid Enchantment: Empty Template Support

This powerful addition allows you to effectively communicate with end-users when the DataGrid control contains no data to display. By utilizing the Empty Template feature, you can provide informative and visually appealing messages (or even images!), enhancing the user experience and ensuring clarity.

Telerik Document Processing Libraries

With the highly anticipated R2 2023 release, we are thrilled to present a plethora of enhancements that span the entire suite. Let’s dive into the highlights of the Telerik Document Processing Libraries, where exciting improvements await:

In the latest update, the PDF Processing library introduces a valuable addition: an image compression setting. This setting empowers you to define the desired compression level when exporting images. You now have the flexibility to choose between Default, None and FlateDecode compression options, ensuring optimal output quality.

Moreover, we are pleased to announce a new default implementation for the ImageUtils’ JpegImageConverter and ImagePropertiesResolver, leveraging the powerful capabilities of the SkiaSharp library.

New SpreadStreamProcessing Improvements: Support for Importing Rich Text as Plain Text

Now, you have the ability to import rich text and seamlessly extract it as plain text, eliminating any formatting elements. This enhancement simplifies your data processing workflows, allowing you to focus solely on the textual content. Say goodbye to complex formatting concerns and embrace the ease of extracting and working with plain text using the SpreadStreamProcessing library.

Document Processing Libraries: Fixes and Quality Improvements

In the R2 2023 release, the Document Processing team prioritized an extensive range of bug fixes, aiming to deliver a higher level of quality for the library and enhance overall performance. There were 20+ bug fixes in the PDF Processing library alone.

Join Us for Release Webinar (and More)

Progress Telerik .NET Web, Desktop & Mobile Products R2 2023 Release Webinar | June 8

Discover all updates across Telerik UI for Blazor, UI for ASP.NET Core, UI for ASP.NET MVC, UI for ASP.NET AJAX, UI for WPF, UI for WinForms, UI for WinUI, UI for .NET MAUI and UI for Xamarin and ThemeBuilder.

Save Your Seat

Join Us on Twitch

Join the  Livestream Release Party on release day, June 7, 11 a.m. – 12:30 p.m. ET to hear the release news and hang out with dev friends.

The live webinars and Twitch sessions are a great opportunity for you to ask questions before and during the webinars. We’ll be waiting to hear from you on Twitter—just use the #heyTelerik and #heyKendoUI hashtags. Another great option is the live chat during our release session on CodeItLive, our Twitch channel.

Reach New Peaks in Your Data Storytelling with the WPF ChartView Histogram

2023-04-19T14:21:00Z

We are going to talk about data visualization where you can clearly see where the data peaks. So. Let’s begin.

We collect data to analyze everything from the weather, through the stock exchange and all the way to your gaming sessions. Reading the tens or hundreds of pieces of data manually and understanding the story they tell is a tiresome task, and definitely not an optimal solution.

The Progress Telerik UI for WPF RadChartView control comes in handy in these situations because it allows you to generate beautifully drawn chart visualizations—points, bars, lines and more. The charting suite is not the focus on the today’s topic, but it is an important piece of it. Let’s not waste any more time and get to the main character of this story—the new histogram visualization.

What is a Histogram?

A histogram is consecutive bars chart where each bar’s width has a meaning on the horizontal axis. Most commonly, the histogram plot is used to show a frequency distribution.

The difference between a standard bar chart and a histogram is that the bar chart uses categories, compared to the histogram where each bar’s width has a numeric range.

Quit Talking and Start Coding

… almost. Just let me add few extra words on what Telerik offers.

The wind of the UI for WPF R1 2023 release brought a new visualization comrade to the RadChartView for WPF components suite—the ScatterRangeBarSeries. This series type allows you to create bars that have a numeric range on both axes—horizontal and vertical. But most importantly in our case, it allows us to create histogram charts.

The ScatterRangeBarSeries help documentation will guide you on how to set up the range bars plot, but the easiest way to get started here is to utilize the ChartHistogramSource.

The next example demonstrates how to set up a collection of numbers and assign a ChartHistogramSource as the ItemsSource of ScatterRangeBarSeries element.

Just a brief tip before we begin. If this is your first touch with Telerik UI for WPF, you can pause here and set up a project following the getting started tutorial in the help docs. After that, I assume the next lines of code are going to be a bit easier for testing.

public MainWindow()
{            
InitializeComponent();
var rnd = new Random(123456);
var caseResolutionTimes = new ObservableCollection();
for (int resolutionTime = 0; resolutionTime <= 24; resolutionTime++)
{
int randomNumberOfCases = resolutionTime <= 8 || resolutionTime >= 15 ? rnd.Next(1, 5) : rnd.Next(1, 12); 
for (int k = 0; k < randomNumberOfCases; k++)
{
caseResolutionTimes.Add(resolutionTime);
}
   
}
this.histogramSource.ItemsSource = caseResolutionTimes;
}

And oh, the magic!

In case the Interval property is not set, the bins interval is calculated automagically. This happens thanks to the Scott’s Normal Reference Rule formula.

Want to learn about the other histogram-related features? Then, stay with me in the next lines of this blog.

Swap the Axes

Maybe the standard vertical bars are not enough for you, and you desire to shake up the visualization a bit? Then, change the orientation of the bars. This is done via the Orientation property of ChartHistogramSource. Setting it to Vertical will apply the interval values on the vertical axis, thus orienting the bars horizontally.

Aggregate Functions

If you need to adjust the result of each bar, instead of just counting the records in it, then the aggregate functions come in handy. You can choose between a set of built-in functions, like average, min, max, sum and more. Replacing the function requires overriding the GetValueAggregateFunction method of ChartHistogramSource.

public class CustomChartHistogramSource : ChartHistogramSource 
{ 
        protected override ChartAggregateFunction GetValueAggregateFunction() 
        { 
                return new ChartAverageFunction(); 
        } 
}

Different Sized Histograms

A bit niche scenario, but in case you need it, Telerik provides. For this scenario you can’t use the ChartHistogramSource, but with slightly more effort you can adjust the ScatterRangeBarSeries. I won’t go into details here, but in a nutshell, you can manually set all the ScatterRangeDataPoint properties manually. This approach can be explored in the Histogram example of the Telerik WPF Demos application.

Share Your Thoughts

I am afraid that we need to part ways here. I hope the new visualization component is going to do a good service to you. Give it a try and in case you come up with any feedback, please feel free to share it in the comments below. Or visit the Telerik UI for WPF Feedback Portal where you can post new suggestions.

Get the Latest UI for WPF

Navigate Smarter with the New WPF OfficeNavigationBar

2023-01-31T15:09:02Z

Need a fancy navigation bar for your WPF apps? And want it to resemble the well-known and daily-used one from your Microsoft Outlook app? Look no more—the RadOfficeNavigationBar component is her for you!

The R1 2023 release has a fresh arrival in the Progress Telerik UI for WPF galaxy—the RadOfficeNavigationBar component.

If I were to create a brief definition for a navbar, it would go this way:

A navigation bar that allows for creating intuitive navigation for any WPF app and that features clickable navigation items, each of which provides the ability to invoke a particular functionality and displays a fully customizable Peek Popup with useful information.

And if I were to create the perfect look for it and show it to you, it would go this way:

Mission Intuitive Navigation

I already mentioned “intuitive navigation” and here is why. It is essential to the success of any application as it helps the end user find any information in a quick and easy manner. Such navigation leads to improved user satisfaction and increases willingness to use the app further.

Well, that is where the RadOfficeNavigationBar comes in handy. So, let’s get to know it in detail together!

Compact or Not?

First and foremost, I believe that there is a need to introduce you to the possible modes you can choose between to specify how items are visualized.

There is a Default mode which displays the items as text only. And there is an option for a compact one with icons only, which is enabled by the IsInCompactMode property. When this mode is selected, the RadOfficeNavigationBar will use the specified values of CompactContent, CompactContentTemplate and CompactContentTemplateSelector properties of each RadOfficeNavigationBarItem element.

But hey, what about reaching the next level with a more complex structure?
Let’s experiment with the ContentTemplate together:

Here is the result:

Preview Available with Peek Callout

Proceeding with the cool stuff, the office navigation bar can display a Peek Callout popup preview window. And it is certainly ready to serve a variety of needs.

The popup appears when the user is hovering over an office navigation bar item. It lets you display the content of your choice—simply anything that you desire could be shown—the magic happens with PeekPopupContent, PeekPopupContentTemplate and PeekPopupContentTemplateSelector properties. If you want to benefit from all of this, you just need to enable it by setting the IsPeekPopupEnabled property to True.

Check out the Peek Popup section of the control’s online documentation for tips and tricks around popup adjustments.

As the popup is using RadCallout you have all its features, too! Yep, this totally means freedom for creating a variety of different shapes and looks of popups and adjusting each detail until you achieve the perfect Peek Callout layout through the PeekPopupStyle. Oh, I almost forgot the PeekPopupShowDelay and PeekPopupCloseDelay props, which I believe are self-explanatory.

The Three Dots

Noticed the three dots? No more wondering what clicking them does … It opens the navigation options dialog. Here you can choose the mode of the control—Compact or Default, how many items you wish to display, as well as their display order. Once finished, make sure to click OK to confirm it all.

Overflowing

Having too many items is tough. The need to fit them in a small app space—even tougher. But hey, don’t worry! The RadOfficeNavigationBar’s Overflow menu is here to save the day—it will help you control the visible items in the navbar and the order in which they appear.

Reordering

Let’s talk some arrangements. I know you’re wondering whether and how you can change the order the items are arranged without using the Navigation Options dialog. And the answer is yes. Here, the IsDragReorderEnabled property will do the trick. Switching it on is almost enough. The other important thing is to set the DragDropManager.AllowCapturedDrag attached property for each RadOfficeNavigationBarItem element.

Skin Changing

Um, no, the office nav bar is not a snake, but it can have as many different skins as one, lol. The RadOfficeNavigaion comes with the full variety of the UI for the WPF Themes Suite. Don’t be afraid to experiment with different colors by using our ColorThemeGenerator as well.

Alliance Greatness

Do you know that the RadOfficeNavigationBar and the RadNavigationView form a great alliance? The nav bar is simply a great complement to the nav view’s bottom nav panel. Shall we see how this looks?

Time for Feedback

Your opinion matters! So, share your thoughts about our new RadOfficeNavigationBar control in the comments below. Or visit the Telerik UI for WPF Feedback Portal and let us know if you have any suggestions or if you need any particular features.

And in case you haven’t already done so, do not wait another minute to try out the latest:

Try Telerik UI for WPF

What’s New in Telerik Desktop & Mobile with R1 2023

2023-01-18T15:41:44Z

We’re excited to share about our R1 2023 release update for our Progress Telerik products for mobile and desktop. Keep reading!

Telerik UI for WinForms

Hey, hey, hey! WinForms is here! With the R1 2023 release, our Telerik UI for WinForms suite grows stronger—from two new controls and a new theme to new functionalities. We are also happy to share that with this official release of Telerik UI for WinForms, .NET 7 is fully supported. Cool, right?

Now, let’s bring more light to the new goodies which come with R1 2023 release. With the current release, the team targets one of the most important obstacles every developer must overcome: designing a functional interface.

We will start with the new controls, which I think will bring a smile to your face.

Windows 11 Theme

New year, new controls, new look. To be up to date with the latest fashion trends and to look shiny as hell, let’s welcome Windows 11 theme to the Telerik UI for WinForms suite. To see how cool it looks, you can check it out in our Theme Viewer tool, where you can also see all other themes included in Telerik UI for WinForms package.

ToolbarForm

Saving space in large applications is crucial for being user-friendly and staying competitive in the market. The RadToolbarForm extends its non-client area and allows adding various UI elements: buttons, dropdown menus, text boxes and more. The title bar is separated into three sections which can be populated with different controls per your requirements. You can use this form to create modern apps like Visual Studio, Microsoft Word or Excel, Outlook, etc.

TaskbarButton

Let me share a secret with you. You can use the taskbar for more than seeing your apps and checking the time.

The RadTaskbarButton component allows you to interact with the Windows Taskbar and gives developers the proper API to define the style for their application’s taskbar button.

By utilizing the taskbar, you can give the end user a shortcut to your application’s internal commands or show a loading indicator when the application is loading or a long running task is currently in progress.

There are other functionalities like showing a badge on the taskbar icon to show the current status of the application, modifying the jump list by adding shortcuts to other related applications, etc.

These functionalities are only part of the API which you can use. I think you know where you can read more about them, but still I will give you a hint: In our RadTaskbarButton Online Documentation.

Don’t leave your taskbar application icon hanging on the screen like you don’t know what to do with it. Show them that they are wrong!

If you think that is all, let us check some of the other perks.

SyntaxEditor: Word Wrapping

SyntaxEditor control is a great text editor tool which provides built-in syntax highlighting and code editing experience for popular languages. What was missing so far was word wrapping functionality. What is a text editor without word-wrap?

This release, we add this functionality to the control. When the feature is enabled, the horizontal scroll bar is removed, and all the text is horizontally fit in the available space.

We have also included an additional margin that holds the icons and can be removed if needed. I’m sure you have seen this view mode in many editors and IDEs, so I hope it will make your WinForms applications which use our RadSyntaxEditor more useful and user friendly.

To see how to use this functionality, please check the Word Wrap article from the SyntaxEditor help documentation.

.NET 7 Support

During the last year, we’ve implemented and shipped support for the various preview versions of .NET 7. With this release, we are shipping support for the official version of .NET 7. This is the first major release which fully supports .NET 7.

Also, we have removed the .NET 5 support with the .NET 7 introduction, so please consider upgrading your .NET 5 applications to newer .NET. With the R1 2023 release, DLLs targeting .NET 5 will not be available for download from your account nor the NuGet package for .NET 5.

Revamped Icons

The new release and the new theme brought a new glyph font—the TelerikFluentIcons. It contains a similar set of icons to the TelerikWebUI but with a different visual appearance to better match the Windows 11 iconography. The glyphs have been redesigned to embrace a softer geometry and more modern metaphors.

WinUI

Find out what’s new in Telerik UI for WinUI 2.4.0!

Calculator

Announcing the brand-new Calculator control for WinUI! I guess there is no need to explain in detail what Calculator is?! However, let’s say couple words about it. RadCalculator is a useful component that enables your users to perform calculations directly in the WinUI application, without navigating to a different app. The control has an easy-to-use interface providing all basic calculations such as addition, subtraction, multiplication and division, as well as some more complicated ones—reciprocal, square root, negate. Furthermore, all the Memory and Clear features are exposed as well.

Check out the key features below:

Basic calculations — addition, subtraction, multiplication, division
Additional calculations — negate, square root, reciprocal
Memory functionality
Clear entry, clear all, delete functionality
Customized functions
UI automation support

For more information about the control, make sure to check out the Calculator section in our online help documentation.

CalculatorPicker

RadCalculatorPicker is an additional component that provides a quick way to show and use RadCalculator in scenarios where saving space is important. One very useful use case would be to use the Calculator as editor of the cell value of DataGrid (as seen in the screenshot above). I’m sure you will make good use of it! For more details, check out the CalculatorPicker article in our help documentation.

.NET 6 and Windows App Sdk 1.2 Support

With this release we are removing the .NET 5 support and adding .NET 6 with Windows App SDK 1.2 support. So, if you are still on .NET 5, make sure to migrate to .NET 6. And if you have any issues with migration, do not hesitate to contact us.

Check out the Detailed Release Notes

We have a lot more! To get an overview of all the latest features and improvements we’ve made, check out the Telerik UI for WinUI (Release Notes).

Telerik UI for WPF

Let’s take a look at what’s new in Telerik UI for WPF with R1 2023.

OfficeNavigationBar

Our brand new OfficeNavigationBar component is inspired by the MS Outlook Navigation Bar. It allows you to easily navigate between different views and offers the ability to quicky access a minimalistic subset of a view within a popup window.

Here are some of the features it provides:

DisplayModes – compact or full mode
Navigation Options Window – allows controlling the order and maximum number of visible items, switching between display modes
Peek Window – displays a callout over the selected item (or item under mouse) which can host additional info or UserControls (views) associated with the item

For more information about the control, make sure to check out its online help docs.

Map: Vector Tiles Support

We are glad to announce that the most voted Map feature in the latest years—support for vector tiles—is now here!

Vector data consists of mainly geometry and text definitions which is rendered on the client. All data is separated in layers and every layer can be styled with style definition located in JSON file referenced in your application. This brings a new level of flexibility and customization options, allowing users to create various map appearances.

The new map feature consists of several new providers allowing connection to online vector tile services or rendering local vector data:

MapBoxMapProvider – connects to online MapBox vector tile service via access token
MbTilesMapProvider – renders local mbtiles data (sql archives which may contain both vector and raster tile layers)
UriVectorTileMapProvider – renders data from local pbf/mvt vector tile files
VectorTileMapProvider, VectorTileMapSource, IMapStreamProvider – base public classes / interfaces for developing custom vector providers

Vector tiles are generally a great opportunity to enrich, customize and provide a modern look to your mapping applications, so we would love to hear any feedback you may have on the matter. Please drop us a line about how it goes when you integrate them.

ScheduleView: Improve Performance with a Lot of Resources

This release, we added a highly requested improvement in the rendering of the resource group headers. They are now virtualized, and this enables a smooth user experience, especially when resources come in hundreds or thousands.

You can enable the feature by setting the IsGroupHeadersVirtualizationEnabled property to true.

Previously such heavy UI resulted in thousands of UI elements rendered on load, but now only the resources, special slots and appointments visible in the viewport are generated, allowing smoother scrolling experience.

To get into more details regarding this feature, you can visit its documentation article.

RichTextBox: New Selection Mode

The new selection mode allows you to select whole words similarly to Microsoft Word. It can be enabled by setting the IsAdvancedSelectionEnabled property. The following GIF shows how this works.

PivotGrid: Load Data from OLAP Cube on Demand (Lazy Loading)

The new load on demand feature will increase the performance of your OLAP-based PivotGrid scenarios. It allows you to fetch the needed data only when the associated group gets expanded.

By default, the OLAP data providers (XmlaDataProvider and AdomdDataProvider) will pre-load all the data from the associated cube and display it in the PivotGrid. To change this behavior, set the EnableLoadOnDemand property of the data provider to true.

ChartView: Create Histogram Charts with ScatterRangeBarSeries and ChartHistogramSource

With the new ScatterRangeBarSeries and the ChartHistogramSource, you can now create histogram charts. These types of charts are generally used to visualize continuous data, measured in two directions (values). It is, however, just a use case of the ScatterRangeBarSeries which can handle non-continuous data sets too. Here is a quick set up of a sample scatter range bar chart:

First, we give some data via ScatterBarInfo instances:

public MyUserControl()  
{  
    InitializeComponent();   
 
    var source = new ObservableCollection<ScatterBarInfo>(); 
    source.Add(new ScatterBarInfo(0, 4, 8, 10)); 
    source.Add(new ScatterBarInfo(6, 10, 1, 6)); 
    source.Add(new ScatterBarInfo(1, 1.5, 1, 6.5)); 
    source.Add(new ScatterBarInfo(3, 3.5, 4, 5)); 
    source.Add(new ScatterBarInfo(8, 11, 7, 11)); 
    this.scatterRangeBarSeries.ItemsSource = source;  
}

Then we bind the data via four major range-definition properties:

<telerik:ScatterRangeBarSeries x:Name="scatterRangeBarSeries"  
                  HorizontalLowBinding="HorizontalLow"  
                               HorizontalHighBinding="HorizontalHigh" 
                               VerticalLowBinding="VerticalLow" 
                               VerticalHighBinding="VerticalHigh" 
               ItemsSource="{Binding}" />

Please follow the databinding help section to get into more details on how to populate the scatter range bars with data in a MVVM way.

End of .NET 5 Support

As you may know, since May 2022 .NET 5 is out of Microsoft support. Being up to date with the current technology trends, from this release on, we will no longer support .NET 5. This includes assemblies, NuGet packages VS extensions. We generally encourage you to switch your apps to .NET 6 and .NET 7 (you know we have Day-Zero, support for .Net7, right ?) in the near future.

However, if this sounds pressing to you, you can consider using .NET Core 3.1 which we will still ship for several releases (until .NET 8 is released).

Other Features

Common: Added ValidationErrorTemplateHelper.DisplayMode supporting different kind of visualizations of the error message.
ChartView: Added API for showing empty content between the axis when there is no data.
ComboBox: Added option to select partial matches.
Diagrams: Exposed constant to control minimum distance for which snapping next to shapes is enabled during connection manipulation.
GridView: Added GridViewAlternateRowStyle which can be used for setting an alternating row background.
GridView: Implemented an option to change the default number of distinct values shown by setting the DefaultDistinctValuesCount property.
RichTextBox: Introduced support for East Asian Font attribute when exporting Run fonts.
TabControl: Added option to allow inverting the scroll direction when using the mouse wheel over the tab strip panel.

Check out the Detailed Release Notes

We have a lot more! To get an overview of all the latest features and improvements we’ve made, check out the release notes for the products below:

Telerik UI for WPF (Release Notes)
Telerik UI for Silverlight (Release Notes)

Telerik Document Processing Libraries

The R1 2023 release brings numerous improvements across the entire suite. Here are some of the highlights of the Telerik Document Processing Libraries:

New Encryption Mode Supported in RadPdfProcessing Library

We have added support for the Encryption Algorithm 5 with AES-256, which was one of the most demanded features. Here are the currently supported algorithms:

Supported encryption algorithms for import : RC4 (V2), AES-128 (AESV2), AES-256 (AESV3)
Supported encryption algorithms for export: RC4 (V2), AES-256 (AESV3)

The encryption algorithm is controlled by the EncryptionType property of the export settings. Detailed information is available here: Export settings.

New Search API in the RadPdfProcessing Library

The new search API allows to search for a specific text in the PDF files. It has many methods that allow you to customize the search criteria and even search with regular expressions. The search result returns the page and the location of the searched text. Here is a small example that shows this:

var search =  new  TextSearch(document);
var result = search.FindAll("Lorem",  TextSearchOptions.Default);

Detailed information about this functionality is available in our documentation: Search.

New Fields in RadWordsProcessing

We have added table of contents fields TOC and TC, which allow you to dynamically add a table of contents to your documents using various switches.

The table of authorities fields—TOA and TA—are now supported as well. These fields allow you to add a table of authorities to your document.

In order to make the TOC and TOA fields work, we have added the Sequence field as well.

Our demo application now has an example of these fields.

You can see all supported fields in our documentation as well: Fields Overview.

Telerik UI for .NET MAUI

R1 2023 brings exciting updates to Telerik UI for .NET MAUI, including five brand-new controls—ToolBar, ImageEditor, SignaturePad, ProgressBar and Accordion. We’ve also added some enhancements to our powerful DataGrid control. Let’s have a sneak peek at the most interesting stuff we have for you in this release.

In today’s world of mobile and desktop apps, it’s important to have a clear and easy-to-use navigation system. That’s why we’re excited to introduce our new Toolbar component for .NET MAUI! This powerful and versatile component allows you to easily create a sleek and professional navigation experience for your app. It can mimic the functionality and behavior of the Visual Studio toolbar with its Strip and Overflow areas.

Here are some of the key features you get in the new ToolBar control:

Rich collection of toolbar items: navigation button, split button, slider, listpicker, radio buttons and more.
Support for adding text and image to the toolbar item.
Horizontal or vertical orientation: RadToolbar supports both horizontal and vertical orientation.
Overflow menu: when the toolbar items cannot fit in the available space, an overflow button is displayed. The items are added in the overflow menu. You can display them using the different modes of the overflow menu.
Panning and scrolling through the Toolbar items.
Options to separate the toolbar items through UI element part of the toolbar items—SeparatorToolbarItem.
Options to group the toolbar items.

Visit our product documentation for more information on getting started with the Telerik UI for .NET MAUI ToolBar control.

.NET MAUI ImageEditor

You can now easily visualize and edit images in different file formats in your mobile and desktop application with our new ImageEditor control for .NET MAUI. The component comes with convenient image interactions such as zoom and pan, flip and rotate, resize and crop.

It is also packed with a variety of filters which allows you to perform various color adjustments to the image such as adjusting the Hue, Saturation, Brightness and Contrast. If your users are unhappy with an image interaction or the set of interactions, they can go back and forth because the ImageEditor has History support.

Here are some of the key features you get in the new ImageEditor:

Importing and exporting images: The control allows you to import different image formats such as JPEG, PNG, GIF, BMP, and export images in JPEG, PNG, GIF, BMP formats.
Various image source options: Load images from a Stream, File (as embedded resource, or image located on the device) and URI.
Support for undo/redo and reset: RadImageEditor has a history stack with the changes applied to the image. This means that you can reverse and re-apply actions.
Support for Interactive Pan and Zoom: The control has built-in pan and zoom functionality that will help you interact with the image and display it in a convenient way.
Built-in Toolbar: the control comes with a ready-to-use toolbar pre-populated with all the items needed to manipulate images.
Custom Toolbar: RadImageEditor’s Toolbar can be fully customized. You could populate the toolbar with the ToolbarItems needed for editing the image.
Commands support: The control provides built-in commands and interactive commands. In addition, there are Toolbar commands.
Support for Image Transformations:
     ◦ Crop
     ◦ Resize
     ◦ Rotate—Left and Right
     ◦ Flip—Horizontal and Vertical
Built-in Filters:
     ◦ Hue
     ◦ Saturation
     ◦ Brightness
     ◦ Contrast
     ◦ Blur
     ◦ Sharpen

Visit our product documentation for more information on getting started with the Telerik UI for .NET MAUI ImageEditor control.

New SignaturePad Control for .NET MAUI

The Telerik SignaturePad control for .NET MAUI is a user-friendly component that allows you to capture and save signatures within your native mobile and desktop applications.

Upon interacting with it, the component displays the signature path, ensuring that your end user feels a natural pen effect. You can easily customize signature’s stroke and color and save the signature as PNG or JPEG.

Here are some of the key features of the SignaturePad control:

Configure the stroke thickness and stroke color of the signature to achieve the desired look.
Exhaustive number of events that are raised when a new stroke is started, completed and an event fired when the surface is cleared.
Commands Support: Easily clear the signature from the surface using the exposed command.

Visit our product documentation for more information on getting started with the Telerik UI for .NET MAUI SignaturePad control.

RadProgressBar for .NET MAUI

If you need to indicate the progress of a long-running operation in your desktop or mobile application, then our RadProgressBar comes in handy. It can also show multiple forms of progress, such as data loading or a multi-step user action, in which you can visualize how much has been completed and what remains.

Here are some of the key features you get in the new ProgressBar component:

Value and Progress: Used to set and report the progress of a task inside the ProgressBar control.
Value range: Define value ranges by setting the minimum and maximum values.
Different value display modes: The label that shows the current state of the progress can be set to absolute value, percent, text or fully hidden.
Segments support: RadProgressBar can be divided in segments.
Indeterminate mode support: A mode that displays an animation indicating an unspecified amount of waiting time.
Different animations: You can apply different animation easing and animation duration while changing the value of the ProgressBar.
Flexible styling API: For customizing the progress fill, track fill, indeterminate fill, label text color, font size and more.

Please visit our product documentation for more information on getting started with the Telerik UI for .NET MAUI ProgressBar control.

UI for .NET MAUI Accordion

RadAccordion is a powerful and versatile component that allows you to easily organize and present large amounts of content in a small space. With its intuitive and user-friendly interface, you can quickly and easily expand and collapse sections to view the information you need.

Collapsed/expanded states: RadAccordion consists of AccordionItems that can host any content. The end users could show or hide this content by interacting with the headers of the control.
Collapse All Items: You can allow your app users to collapse all items of the RadAccordion.
Highly customizable items: You have full control over the visual appearance of the Accordion items—you can customize the border style of each item, the border style of items’ headers, as well as the indicator text, font, size, location and color.
Animation while expanding/collapsing: RadAccordion provides slick customizable animation played while the expandable content is expanded/collapsed.

Visit our product documentation for more information on getting started with the Telerik UI for .NET MAUI Accordion control.

New Feature in DataGrid—Frozen Columns

This powerful feature allows you to “freeze” or “pin” certain columns of your DataGrid so that they remain visible and in place even as the user scrolls through the rest of the columns. This is particularly useful when working with large and complex datasets, as it allows users to easily reference important information while scrolling through the rest of the data.

Telerik UI for Xamarin

With R1 2023 our main focus was on Telerik UI for .NET MAUI; however, we were able to deliver two of the most requested features for UI for Xamarin.

Xamarin DataGrid Enchantment: Support for Scrolling to a Specific Item

Our DataGrid for Xamarin just got a new API that enables you to programmatically scroll a DataGrid so that a specific item is visible on the screen, thus bringing a smoother user experience into your Telerik UI for Xamarin app.

Here is an example of how to scroll to the last item in the DataGrid by using the new ScrollItemIntoView method (the code executes on a button click):

private void Button_Clicked(object sender, System.EventArgs e)
{
    var item = this.vm.Clubs[this.vm.Clubs.Count - 1];
    this.grid.ScrollItemIntoView(item);
}

Visit our product documentation for more information on the Telerik UI for Xamarin DataGrid control ScrollItemIntoView method.

New Functionality in our SideDrawer Component for Xamarin

By default, the SideDrawer Drawer Content area closes when user clicks/taps outside of it. With R1 2023, you can control that behavior by setting using the TapOutsideToClose boolean property. Its default value is True, but when setting it to False, the drawer content area of the component remains open if the end user taps/clicks outside of it and the main content area remains active. Here is it in action:

Visit our product documentation for more information on the Telerik UI for Xamarin SideDrawer control TapOutsideToClose property.

Head over to the Telerik page and download a free trial. If you are an active license holder you can grab the latest and greatest from the “Your Account” page or update your NuGet package reference to the latest version directly in your .NET solutions.

Share your thoughts with us on our feedback portal and help us shape the future of Telerik UI!

Join Us for Release Webinar (and More)

Progress Telerik .NET Web, Desktop & Mobile Products R1 2023 Release Webinar | January 26

Discover all updates across Telerik UI for Blazor, UI for ASP.NET Core, UI for ASP.NET MVC, UI for ASP.NET AJAX, UI for WPF, UI for WinForms, UI for WinUI, UI for .NET MAUI and UI for Xamarin and ThemeBuilder.

Save Your Seat

Join Us on Twitch

If you can’t wait until the webinar to unpack the new release, join the Livestream Release Party on January 19, 10 a.m. – 11:30 a.m. ET to hear the release highlights across the entire Progress Developer Tools portfolio and hang out with friends.

And for those of you who will be at NDC London on January 25-27, you are welcome at the Progress booth where we can talk about all product developments and the latest release.

Progress Kendo UI R1 2023 Release Webinar | January 31

Discover all updates across KendoReact and Kendo UI for Angular, Vue and jQuery, as well as ThemeBuilder.

Save Your Seat

Progress Telerik Reporting, Mocking and Debugging Tools R1 2023 Release Webinar | February 2

Discover all updates across Telerik Reporting, JustMock, Fiddler Everywhere and Fiddler Jam.

Save Your Seat

Ready for a Round With the New CircularProgressBar

2022-10-05T07:33:05Z

Tracking of progress just got fancier with the new CircularProgressBar for WPF. Easy to be put into practice. Packed up with a lot of perks.

I am glad you landed on this blog. But first … coffee! Grab yourselves a cup, and I’ll grab mine.

If the time you are reading my blog post is around wine or beer o’clock, do not worry—just make sure you got the right complement to it. Ready?

OK, now we are good to dive into the latest addition to the UI for WPF suite—the CircularProgressBar. It is part of the R3 2022 Release, but I am quite sure you can find it in the making of my ☕ cup above.

Indicate the Purpose of Indicators

Progress indicators express an unspecified wait time or display the length of a process. They inform users about the status of ongoing processes, be it loading an app, submitting a form or saving updates.

The two most popular types of progress indicators are linear and circular. And I assume you already figured the circular is the one we will be talking about today. Not only because it is cooler, but also because it is our fresh arrival.

The RadCircularProgressBar is designed to display the progress along a circular track in a clockwise direction. Let us put it into practice and then jump to its perks.

Put It Into Practice

I promise this will be brief.

The only thing you will need to take care of in advance is a fresh WPF app and a reference to the Telerik.Windows.Controls assembly. I bet you can do the rest with your eyes shut:

Of course, you can do this in code-behind, too:

RadCircularProgressBar cpb = new RadCircularProgressBar() { Value = 0.27 };

The result will be the same:

Progress With the CircularProgressBar

We learned that a circular progress bar is used to visualize the progress of work or an operation, now let’s check the ways of showing the different progress states.

Determinate

Determinate circular indicators fill the circular track with color, as the indicator moves from 0 to 360 degrees. They display how long a process will take and are recommended to be used when the process completion rate can be detected. The image from the previous section is an example of this state.

Indeterminate

Indeterminate circular indicators circle along the track. They express an unspecified amount of wait time and are recommended to be used when the progress isn’t detectable, or if it’s not necessary to indicate how long an activity will take.

This mode can be activated by setting the IsIndeterminate property of the RadCircularProgressBar to True. It is animated and comes with the ability to determine the ratio of the progress indicator with the help of the IndeterminateIndicatorRatio property, as well as to customize the indeterminate animation. Learn how to do it in the following section of the online documentation. In the meantime, I will show you how the control looks by default while operating in this mode.

Segmented

RadCircularProgressBar allows you to split the progress track into multiple segments. Here, the Segments property determines the amount. And you are also empowered to control the density of the segments through the SegmentsDensity property. Oh, one more cool thing you can do is to round them by setting the UseRoundedSegments property.

Here is the look of a segmented circular progress bar—5 rounded segments with density of 0.75:

Hm, I already touched the customization capabilities of the component, but did not fully cover them. Or maybe I kept the even cooler stuff for the next section? Let’s find out.

Discover More Perks

The following picture pretty much says it all, but we will examine it together. I know you like what you see, but to save you some time and wondering how it’s all made, be sure to check the CircularProgressBar samples in the demos application.

Customizable Content

The circular progress bar component can become complex enough through its content. Observe the above image—another circular progress indicator can be placed in the content area, or a button, or … well, simply anything meaningful for your needs.

Color Ranges

Ranges with different colors can be defined, and they can be a gradient, too. How? This way.

Secondary Progress Indicator

The CircularProgressBar allows for visualizing an additional progress indicator useful in scenarios where the primary indicator depends on the progress of the secondary one. The end user can visualize both the primary and secondary tasks’ progress simultaneously. To enable this perk, you need to set the SecondaryValue property. There is a separate color for the secondary progress, too, controlled by the SecondaryIndicatorFill property. Check the bottom right part of the previous image.

Radiuses and Angles

Don’t be scared, you will not need any protractors or advanced math skills.

Having the visual structure of the circular progress bar in mind, just know that you can tune the inner and outer radiuses of the indicator and track parts, as well as the start and end angles of the component.

I really enjoy using the Configurator demo of the control. See what I did with it:

The above image demonstrates my experiments with the radiuses of the track and the indicator. And the next one—the different combinations of start and end angles.

Reach the Next Level

This is a specially dedicated section to encourage you to free your minds and experiment with this awesome component. I am certain that the circular progress bar can help your next WPF piece become a masterpiece. You can integrate it with the other types of progress bars we offer (e.g., the StepProgressBar) or any other member from the UI for WPF Suite.

Sometimes it’s hard to find the starting point, but here is what I did. I thought of what I am doing right now—writing a blogpost. What is my blog showcasing—the circular progress bar control. And I came up with the idea of creating a super simple dashboard (without a single chart or gauge!) representing both things. Look at it.

Take a Minute for Feedback

Thank you for taking the time to read my blog! I hope you enjoyed it and have a minute to drop your thoughts and impressions in the comment section below or head to the Feedback Portal for WPF.

Also, do not miss the chance to check the other goodies from the Telerik Desktop & Mobile R3 2022 Release and be sure to try out the latest:

Telerik UI for WPF

What’s New in Telerik Desktop & Mobile With R3 2022

2022-09-14T14:58:06Z

Telerik Mobile and Desktop products offer expanded .NET 7 support, improved Document Processing Library features and new components!

As with every release, we are eager to share what the new updates are, so let’s jump right in! Hop to your favorite section:

What’s New in Telerik UI for WinUI 2.2.0

PropertyGrid

Announcing the RadPropertyGrid component for WinUI! The control provides an easy and versatile approach to processing data objects’ properties. Utilizing its auto-generation features and the intuitive custom editor capabilities, users will be able either to display data in a way that best fits their needs or modify it with minimal effort.

RadPropertyGrid can be bound to an item with just a single line of code, and you may start exploring or editing its properties. The proper editor controls are auto-generated—text fields for string properties, CheckBoxes for Boolean, DateTimePickers for dates, etc. In addition, PropertyGrid allows flexible manual setting and customization of editors and their layout via the standard WinUI styling and templating mechanisms. It is highly customizable, allowing the user to modify the default look in an easy and intuitive manner.

Check out the key features below:

Automatic property generation – the control generates fields to read/write all public properties of the target object
Built-in property editors – predefined editors UI for the different data types
Nested properties support
Customizable property fields – customize the property definitions and the corresponding data editors
Keyboard support
Grouping
Filtering
Data validation

For more information about the control, make sure to check out the PropertyGrid section in our online help documentation.

CollectionEditor & CollectionEditorPicker

RadCollectionEditor and RadCollectionEditorPicker are two small components used to visualize the items in a collection and generate editors for each property using the built-in PropertyGrid component. You can use the ItemTemplate of the control to specify how the items from the collection should appear. The difference between them is that the CollectionEditorPicker uses a dropdown to display the CollectionEditor.

For more details, check out the CollectionEditor section in our help documentation.

CollectionNavigator

RadCollectionNavigator is the next new control this release. A light component that provides seamless navigation and editing of a collection, it provides built-in customizable commands, predefined customizable buttons and more. For more details, make sure to check out the CollectionNavigator section from our online help documentation.

DataGrid: Export

Our DataGrid gets export support—thanks to the Telerik Document Processing Libraries that are included in the WinUI distribution. The new functionality provides methods to export the current dataset displayed in the control. You can export in a synchronous or an async manner, modify the exported data and the final document. Currently the built-in export supports the following formats:

XLS
XLSX
PDF
CSV

Hope this feature will be useful. For more details, check out the Export section from our DataGrid documentation.

RibbonView & Other: Updated Windows 11 Appearance

In this release, we did many improvements in the default styles of many controls to provide a better Windows 11 look and feel. Now I want to focus on the RibbonView control—we completely redesigned it to resemble the new Office 365 Experience! It looks totally awesome and I’m sure it will improve the overall appearance of your modern WinUI application.

Make sure to check out the controls in our refreshed WinUI examples application and play around with them.

Other Features

SideDrawer: Added DrawerOpening and DrawerClosing
SideDrawer: Introduced IsOpen property

Check Out the Detailed Release Notes

We have a lot more! To get an overview of all the latest features and improvements we’ve made, check out the release notes for the products below:

Telerik UI for WinUI (Release Notes)

Get in touch by email – drop us a line, for anything related to product or just to say hi at TelerikWinUI@progress.com
Feedback Portal – share any feature request (or bug reports) that you might have
Telerik Forums – if you need any technical assistance with the product, let us know and we will help

Get the Bits

Don’t wait—try out the latest:

Telerik UI for WinUI

In case you missed it, here are some of the updates from our previous release.

What’s New in Telerik UI for WPF With R3 2022

CircularProgressBar

Announcing our brand-new WPF CircularProgressBar component. CircularProgressBar is a control that will allow your customers to track the progress of different tasks in a circular manner. It provides many customization options that will allow you to achieve a lot of different scenarios. You have probably seen such components in many different places—from health tracking smartphone applications to automatic coffee machines. Now you can easily plug it in your Telerik WPF application as well!

Check out the list of the major features of the control below:

Segments – CircularProgressBar can be split into numerous segments to indicate different types of progress.
Color Ranges – CircularProgressBar supports defining ranges with different colors.
Determinate and indeterminate states – The determinate state shows a specific amount of the progress. The indeterminate one plays an animation of the circular progress.
Customizable content – CircularProgressBar supports complex implementation for the content of its progress.
Radius manipulation – The control allows you to customize the indicator and track inner and outer radiuses.
Angles – You can control the beginning and ending angles of the component for a more customized appearance.
Secondary progress indicator – CircularProgressBar allows you to visualize an additional progress indicator.
Indeterminate animation customization – You can modify the played animation when CircularProgressBar is in an indeterminate state.

I hope this control will be useful in various types of applications. For more information, check out our online CircularProgressBar help documentation.

PivotGrid: Configuring PivotGrid Without PivotFieldList

The most desired PivotGrid feature is finally here! It allows using the control without the additional PivotFieldList control. The new functionality provides support of all existing PivotFieldList features—directly accessible trough the UI of RadPivotGrid. Your customers will be able to filter, sort, modify the descriptions and more through the built-in dropdown menus, dialogs and buttons. The feature can be enabled by simply setting the attached FieldListBehavior.ShowInline property as shown below:

For more details, make sure to check out the Inline PivotFieldList section from our online help documentation.

SyntaxEditor: Word Wrapping

A new cool feature for the SyntaxEditor is Word Wrapping! When the feature is enabled, the horizontal scroll bar is removed and all the text is horizontally fit in the available space. We have also included an additional margin that holds the icons and can be removed if needed. I’m sure you have seen this view mode in many editors and IDEs, so I hope it will make your WPF applications more useful and user friendly.

For more info, check out the Word Wrap article from the SyntaxEditor help documentation.

ChartView: ErrorBar Series

We are adding a new ChartView series this release—ErrorBar Series! This type of series visualizes its data points using error bar shapes. The error bar shape allows you to display an error or uncertainty in the plotted data. The shape consists of a single line with caps at the two ends. An additional marker that shows the expected measure can be displayed too.

For more information about all of the setup and customization options of the new series, please check out the ErrorBar Series article from the ChartView help documentation.

Latest .NET 7 Preview Support

As always, we are up to date with the latest technology trends, and we are happy to announce that Telerik UI for WPF provides support for the latest .NET 7 Preview 7. The .NET 7 Preview binaries can be found in a separate zip archive in your account—download it and give it a try! They will be included in the NuGet packages and in full distribution once .NET 7 becomes official. Also we plan to remove the .NET 5 support with the .NET 7 introduction, so please consider upgrading your .NET 5 applications to newer .NET. (If such a change somehow affects your plans, please contact us and share more details.)

RibbonView: New Windows11 Theme Appearance

We improved the default RibbonView styling for the Windows 11 theme in order to resemble the new Office 365 Experience. Looks nice, doesn’t it?

If you want to see the theme in action, make sure to play around with our Color Theme Generator for WPF app! For more details about all the features of the Windows 11 theme, please check out this help article.

RichTextBox: Line Numbering

The latest RichTextBox feature enables you to display the appropriate number beside each line of text—this is useful for specific types of content, such as scripts, legal or medical documents. Through the intuitive API of this feature, you will be able to easily control how the numbering appears. You can change the initial number, the increment number, the distance between the numbering and the document content, and when the numbering should restart. For more information, check out the Line Numbering help article.

Spreadsheet: Repeat Specific Rows or Columns on Every Printed Page

This new Spreadsheet functionality allows you to specify a row or a column that will be repeated on every printed page. This functionality is useful when you need to print or export to PDF data spanning multiple pages and still allows the users to see the important information on the top/left side for better orientation. For more details, check out the Printing section of our Spreadsheet documentation.

Other Features

SyntaxEditor: FontWeight and FontStyle of the highlighted words
VirtualGrid: FontWeight and FontStyle of the cells
RibbonWindow: Windows 11 Theme acrylic effect now can be enabled on all Windows 11 version, not only on the preview ones

Check Out the Detailed Release Notes

We have a lot more! To get an overview of all the latest features and improvements we’ve made, check out the release notes for the products below:

Telerik UI for WPF (Release Notes)
Telerik UI for Silverlight (Release Notes)

Feel free to drop us a comment below sharing your thoughts. Or visit our Feedback Portals about UI for WPF, Silverlight and Document Processing Libraries and let us know if you have any suggestions or if you need any particular features/controls.

Try out the latest:

Telerik UI for WPF Telerik UI for Silverlight

In case you missed it, here are some of the updates from our last major release and previous Service Pack.

What’s New in Telerik UI for WinForms With R3 2022

Spreadsheet Charts

Hold up? Is that true? Yes, you read it right. Charts are coming to RadSpreadsheet control for Telerik WinForms. What could be a better improvement than visualizing your data beyond the RadSpreadsheet grid? Adding charts to a workbook can help you identify important statistics and trends in your data that may not be obvious when only looking at numbers. With RadSpreadsheet you can show charts as well as add, remove and manipulate chart objects in your spreadsheet documents.

Supported Chart Types

Different chart types give you the flexibility that your data requires. From Bar to Line, from Point to Bubble, from Pie to Area, show your users that you care. The Spreadsheet component for WinForms supports more than a dozen different types of charts allowing you to visualize categorical data, numerical data, time series data and more. You can get familiar with all supported types in the RadSpreadsheet Charts help article.

Splash Screen

What could be better to notify the end user that something big is loading than showing a splash screen form? Our newest reinforcement to the Telerik UI for the WinForms suite is here. Splash Screen allows you to display a Telerik themed control that notifies the user that the program is loading. You can customize the image of the splash screen, its animations and loading process visualization per your requirement.

If you want something more to sample, just to say “give me a second to set up the data,” we have just the things for you. Overlay and Flyout Screens will fit perfectly in a case where you want to dim the content and show the end users to be patient. You could use the Overlay Screen to show only the loading indicator. However, there could be a case where you want to notify the user that he needs to reenter his credentials to continue working on the application. In this case, Flyout Screen is what you need. The Flyout can be used to display some content over the application or be used as an interactive control. The screen can be customized in a way that you can place input controls in it, while the Overlay does not accept such customization.

Overlay

Flyout

Changes to Distribution

As of R3 2022 in Telerik UI for WinForms, the .NET 2.0 distribution is removed. From this release, the suite offers .NET 4.8 distribution. With this release, you not only get the .NET Framework projects of the Telerik source code, but .NET Core projects as well.

Bug Fixes & Improvements

Our development team managed to fix/improve more than ONE HUNDRED bugs reported by our customers. We always listen to feedback and try to produce the top-notch controls on the market.

Share your feedback with us in the Feedback Portal!

Get the Bits

Don’t wait—try out the latest:

Telerik UI for WinForms

What’s New in Telerik Document Processing Libraries With R3 2022

PdfProcessing

Export PDF pages to images: We have added the ability to convert the pages of a PDF document to images. This feature uses the SkiaSharp library. It will work with the .NET Standard version and does not depend on any Windows libraries.

WordsProcessing

Page Numbering Fields: PAGE, PAGEREF, NUMPAGES, SECTIONPAGES and SECTION fields are now supported in our library. These are commonly used fields for inserting page numbering. We have added the ability to update the field values as well.

Shapes support: With this release, we have enabled users to preserve the shapes when importing and exporting a DOCX document. We will continue working on extending the functionality to allow you to insert and manipulate these objects in the next releases.

SpreadStreamProcessing

SpreadStreamProcessing Import: We have added support for reading XLSX and CSV files. This functionality allows you to easily get the data from large files without loading the entire document in the memory. It has great performance as well.

SpreadProcessing

Repeat specific rows or columns on every printed page: This feature allows you to specify a row or a column that will be repeated on every printed page.

What’s New in Telerik UI for .NET MAUI With R3 2022

Aloha, and welcome to another Telerik UI for .NET MAUI release! In addition to the mandatory support for the latest version of .NET MAUI, we are now shipping three brand-new controls as part of our growing Telerik UI for .NET MAUI suite—DataForm, AutoComplete and Expander components! We’ve also added many enhancements to our powerful DataGrid control. Let’s have a sneak peek at the most interesting stuff we have for you in this release.

Latest .NET MAUI & Visual Studio 2022 Support

We follow the Microsoft release cadence closely and have consistently offered early support for all new .NET MAUI versions—including Day-Zero support when the framework was released in General Availability. Since then, cross-platform developers have been able to use Telerik UI for .NET MAUI, the most comprehensive cross-platform development UI library on the market, together with the latest .NET MAUI features and fixes: an unbeatable combination.

Moreover, with .NET MAUI tooling getting formal support in Visual Studio 2022 17.3, Telerik UI for .NET MAUI is now also tightly integrated with the latest VS version. Developers can also take advantage of dedicated Visual Studio Extensions with .NET MAUI templates for project creation and a UI Toolbox.

.NET MAUI DataForm

I’d like to introduce you to the new DataForm control in Telerik UI for .NET MAUI. This powerful control helps you to automatically create a form for collecting or editing data. For example, using the RadDataForm, you can easily create form-over-data UI for both mobile and desktop, like these:

Desktop:

Mobile:

The component supports different commit modes, allowing you to commit property values one by one or to commit the whole form at once. It’s also very easy to add validation to your forms and group UI elements to make large forms more manageable.

With the DataForm control, you can not only build the needed UI by using the rich set of editors that are provided out of the box, but you can easily customize those forms through the flexible styling API.

Here are some of the key features you get in the new DataForm:

Built-in editors: The DataForm provides a set of built-in editors for the available primitive types such as numeric, string, boolean, enumerations, DateTime and TimeSpan. The control detects the types of the data object’s properties and automatically displays the appropriate editor.
Validation support: You can use the built-in validation support that gives you full control over the data collected through the control.
Commit modes: DataForm provides editing support with three types of commit modes to determine when the edited value should be synchronized with the business object.
Grouping support: This allows you to easily group the form’s editors.
Data Annotations support: You can decorate the data models using Data Annotations attributes which specify validation conditions to be applied to a specific field in the DataForm. You can use different annotations like Requires, DataType, Display, RegularExpression and more.
Different layouts: You can arrange the editors and the groups by using different layouts such as stack, grid and more.
Commands support: You can execute your validation logic or commit/cancel all pending changes in the form by using the built-in commands for these actions.

Visit our product documentation for more information on getting started with the Telerik UI for .NET MAUI DataForm control.

AutoComplete Joins the Family

The AutoComplete component is a popular control for various mobile and desktop applications and use cases. Especially useful when you have to display a long, predefined list to choose from, such as a list of airports or a list of known recipients. Your app users expect this in modern apps, and now you can deliver it out of the box.

Some of the main features of the .NET MAUI AutoComplete are:

Tokens support: You can enable the users of your application to search for and select several items from the source of the AutoComplete. These items appear as tokens that can easily be deselected using their close button.
Filtering options: You can define the filtering behavior to display all the matches that either “StartsWith” or “Contains” the typed symbols.
Different suggest modes support: RadAutoComplete exposes three different modes (Suggest, Append, SuggestAppend) for providing suggestions.
Placeholder: This is used to give guidance to the end user on what should be entered in the text input.
NoResults message: NoResults message appears in the popup used for the list of suggestions whenever the control cannot find any matching items. Read more about this here.
Visualized text formatting: You can modify the displayed details of the selected item by using DisplayTextFormatter property of AutoComplete.
Custom templates: If any of the default templates do not fit a particular scenario, you can easily define a custom template.
Highlight customization: This gives you the ability to highlight the text inside the custom template.
Nested properties support: This allows binding of a complex object to the RadAutoComplete’s TextSearchPath property.

Visit our product documentation for more information on getting started with the Telerik UI for .NET MAUI AutoComplete control.

.NET MAUI Expander

RadExpander is a flexible control that helps you save space and achieve easier navigation through your app. You can place the Expander anywhere on your page and embed any content inside the dropdown area. The Expander control also gives you control over its ExpandDirection to let you adjust the control as per your custom layout.

Here are some of the features the Expander control ships with:

Collapsed and Expanded States: The control hosts the content in an expandable container that can be easily expanded/collapsed by tapping on its header.
Animation: The RadExpander control provides a property that allows you to enable or disable the animation when the content is collapsed/expanded. If you want to enable/disable the animation, you need to use the IsAnimationEnabled property.
Customization Options: The rich API for customization of the Expander component allows you to customize the visual appearance of the control in a variety of ways. You can manipulate the Animation’s duration and easing, the header of the control and its border styles.

Visit our product documentation for more information on getting started with the Telerik UI for .NET MAUI Expander control.

DataGrid Just Got a New Grouping UI

With our latest release, our powerful DataGrid component has evolved. The new enchantment is the so-called Grouping UI.

This area is called the DataGridServicePanel and allows the user to drag and drop column headers into the panel in order to group the data in the RadDataGrid at runtime.

The user is not limited to group just a single column—they are allowed to drag several columns into the panel, or rearrange the grouping. Grouping in this manner gives the user power to control how they want to view the data and reduces the coding part for the developer.

If you want to restrict the user from grouping the data or limit the grouping to certain columns, you can do it by using DataGrid’s intuitive API for that.

More information about this feature can be found in DataGrid’s product documentation.

DataGrid Footers

Column Footers
The new addition to the DataGrid control—the Column Footers functionality—allows you to display additional information which applies to the columns in a specific row placed at the bottom of the control. This row consists of individual footer cells for each column. It is of type object, so you are not limited to just using plain text in it.

By default, column footers are hidden, so if you want to make them visible you have to set the DataGrid’s ShowColumnFooters property to True.

More information about this feature can be found in DataGrid’s product documentation.

Group Footers
DataGrid exposes the Group Footers feature, which provides the option to render a footer under each group in the data grid component. Group footers contain footer cells that correspond to data columns and can display group summaries.

This footer row is also hidden by default. If you want to take advantage of this feature, you will have to enable it by setting the ShowGroupFooters property of the DataGrid to True.

More information about this feature can be found in DataGrid’s product documentation.

DataGrid Aggregate Functions

There are situations when displaying numbers in the DataGrid in which users would like to be able to see the results from aggregate calculations at the bottom of the DataGrid’s groups or columns. Now, this can be easily achieved with the new addition to the DataGrid control—aggregate functions support. It allows you to display aggregated information for the data in the column’s footer, in the group’s header or in the group’s footer.

DataGrid offers built-in support for the most popular aggregate functions: Average, Count, Sum, Min, Max and Count. All you need to do is to add a PropertyAggregateDescriptors into DataGrid’s AggregateDescriptors with the needed function:

<telerikGrid:RadDataGrid>
  <telerikGrid:RadDataGrid.AggregateDescriptors>
    <telerikCore:PropertyAggregateDescriptor  PropertyName="Points" Function=
                                            "Average"/>
                                                telerikGrid:RadDataGrid.AggregateDescriptors>
                                                telerikGrid:RadDataGrid>

If you have a more complex scenario, you are also covered—there is an option for creating a custom aggregate function by using a DelegateAggregateDescriptor.

More information about this feature can be found in DataGrid’s product documentation.

If you’re interested in starting to play with .NET MAUI, or if you’re already actively working with .NET MAUI to develop applications, I encourage you to check out Telerik UI for .NET MAUI.

To get the bits, you just need to sign up for our free 30-day trial, which gives you access to the components as well as our legendary technical support. Head to the Telerik UI for .NET MAUI overview page or click the button below and sign up for a trial today!

Try Telerik UI For .NET MAUI

Please share your feedback, ideas and suggestions, either by commenting below or by visiting our Feedback Portal about Telerik UI for .NET MAUI. Let us know if you have any suggestions and submit your features/controls requests.

What’s New in Telerik UI for Xamarin With R3 2022

Xamarin DataGrid Aggregates

With the new aggregate functions in the Xamarin DataGrid, you can display aggregated information for the data in the group’s header, or in the group/column’s footer.

The new feature comes with built-in support for the most popular aggregate functions: Average, Count, Sum, Min, Max and Count. You can easily set up the aggregates by adding PropertyAggregateDescriptors into DataGrid’s AggregateDescriptors with the desired function:

<telerikGrid:RadDataGrid>
  <telerikGrid:RadDataGrid.AggregateDescriptors>
    <telerikCore:PropertyAggregateDescriptor  PropertyName="Points"  Function="Average"/>
  telerikGrid:RadDataGrid.AggregateDescriptors>
telerikGrid:RadDataGrid>

The aggregates also support multiple types of complex scenarios through the extensibility point for defining a custom descriptor—DelegateAggregateDescriptor.

Visit our product documentation for more information on the Telerik UI for Xamarin Data Grid control and Aggregates.

Xamarin DataGrid Column Footers

The new addition to the DataGrid control—the Column Footers functionality—allows you to display additional information which applies to the columns in a specific row placed at the bottom of the control. This row consists of individual footer cells for each column. It is of type object, so you are not limited to just using plain text in it.

By default, column footers are hidden, so if you want to make them visible, you have to set the DataGrid’s ShowColumnFooters property to True.

Visit our product documentation for more information on the Telerik UI for Xamarin Data Grid control and Column Footers.

Xamarin DataGrid Group Footers

With the current release, you have the ability to render a footer under each group inside the DataGrid component. The footer cells correspond to data columns and you can use them to display group summaries.

All you need to do to use this functionality is set the DataGrid.ShowGroupFooters property to true.

Visit our product documentation for more information on getting started with the Telerik UI for Xamarin Data Grid control.

New IsLooping Property Now Available for All Xamarin Date and Time Pickers

With the latest release of Telerik UI for Xamarin, you can easily stop the looping functionality in the Date, Time, DateTime, Time and TimeSpan Pickers using just a single property—IsLooping. When IsLooping is True, which is by default, the items of each spinner can loop infinitely unless that spinner is restricted to show only a subset of the available values.

Picker with disabled looping Picker with enabled looping

Visit our product documentation for more information on the Telerik UI for Xamarin DatePicker control IsLooping property.

Please share your feedback, ideas and suggestions, either by commenting below or by visiting our Feedback Portal about Telerik UI for Xamarin.

Don’t hesitate to check out the latest:

Try Telerik UI For Xamarin

Telerik .NET Web, Desktop & Mobile Products Webinar & Twitch Session

Wednesday, September 21, 2022 | 11:00 a.m. – 1:00 p.m. ET
Discover all updates across Telerik UI for Blazor, UI for ASP.NET Core, UI for ASP.NET MVC, UI for ASP.NET AJAX, UI for WPF, UI for WinForms, UI for WinUI, UI for Xamarin and UI for .NET MAUI.

Save Your Seat

Join Us on Twitch Today

Live from Devreach’22 @ Progress360: Join the live community session from the Progress360 Streaming Studio on September 14 from 10 a.m. – 11:30 a.m. ET to hear the release highlights and celebrate the DevReach spirit with us at our Livestream Release Party.

And the Best Part About the Release Webinars?

Another great option is the live chat during our release session on CodeItLive, our Twitch channel.