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:
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:
<telerik:RadDateRangePicker />
Need to set a specific date range? No problem:
<telerik:RadDateRangePicker StartDate="2024/2/05" EndDate="2024/2/15"/>
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);
}
Switching cultures and languages is a breeze:
this.dateRangePicker.Culture = new System.Globalization.CultureInfo("de-DE");
Change the game by tweaking the first day of the week, setting week rules and even blacking out dates:
<telerik:RadDateRangePicker x:Name="dateRangePicker" FirstDayOfWeek="Monday" AreWeekNamesVisible="True" IsDefaultRangesPanelVisible="False"/>
var weekends = new ObservableCollection<DateTime>();
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;
Experiment with the look and feel:
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!✨
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:
]]>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.
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.
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.
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.
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.
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.
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.
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.
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.
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?
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.
]]>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.
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:
<telerik:RadSvgImage UriSource="SVGIcon.svg" Width="128" Height="128"/>
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:
<Image Source="{telerik:RadSvgImageSource Source='SVGImage.svg'}"
Width="128"
Height="128"/>
Check it out! You can totally swap out the fill color of your SVG image by tweaking the OverrideColor
property:
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.
<g>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" begin="0s" dur="12s" />
<use xlink:href="https://www.telerik.com#minuteHand" />
</g>
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<string, Brush>
, 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:
<svg width="200" height="200" viewBox="130 130 200 200" fill="none" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
enable-background="new 0 0 512 512" xml:space="preserve">
<defs>
<solidColor id="calendar-lines"/>
<solidColor id="calendar-datebgr"/>
<solidColor id="calendar-date"/>
</defs>
<path d="M14.5,39.8 L112.2,39.8 M14.5,55.8 L112.2,55.8 M14.5,71.8 L112.2,71.8 M14.5,87.8 L112.2,87.8 M14.5,103.8 L112.2,103.8 M22.8,31.9 L22.8,109.1 M39.0,31.9 L39.0,109.1 M55.2,31.9 L55.2,109.1 M71.5,31.9 L71.5,109.1 M87.7,31.9 L87.7,109.1 M103.9,31.9 L103.9,109.1 M116.6,1 L11.1,1 C5.8,1 1.5,5.2 1.5,10.5 L1.5,114.5 C1.5,119.7 5.8,124 11.1,124 L116.6,124 C121.9,124 126.3,119.7 126.3,114.5 L126.3,10.5 C126.3,5.2 121.9,1 116.6,1 z M1.0,21 L125.7,21"
fill="transparent"
transform="translate(170,166)"
stroke="url(#calendar-lines)" stroke-width="2" width="130" height="125" />
<rect x="224.977" y="222" width="32.4675" height="32" fill="url(#calendar-datebgr)"/>
<path d="M246.145 230.268C245.383 231.664 244.664 233.048 243.987 234.419C243.31 235.782 242.696 237.153 242.146 238.532C241.596 239.912 241.118 241.304 240.711 242.709C240.305 244.105 239.992 245.536 239.772 247H236.687C236.89 245.697 237.178 244.397 237.55 243.103C237.931 241.799 238.375 240.5 238.883 239.205C239.391 237.902 239.958 236.594 240.584 235.282C241.219 233.97 241.892 232.646 242.603 231.309H233.983V228.795H246.145V230.268Z"
fill="url(#calendar-date)" stroke="transparent" stroke-width="0"/>
</svg>
Now, you’ll want to create a custom Dictionary collection to define your colors.
public class CustomDictionary : Dictionary<string, Brush> { }
It’s time to load up your custom Dictionary with some vibrant choices. Check this out:
<Grid.Resources>
<local:CustomDictionary x:Key="CustomBrushesDictionary">
<SolidColorBrush x:Key="calendar-lines" Color="#08BAB7"/>
<SolidColorBrush x:Key="calendar-datebgr" Color="#b708ba"/>
<SolidColorBrush x:Key="calendar-date" Color="Black"/>
</local:CustomDictionary>
</Grid.Resources>
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!
<Grid>
<Grid.Resources>
<local:CustomDictionary x:Key="CustomBrushesDictionary">
<SolidColorBrush x:Key="calendar-lines" Color="#08BAB7"/>
<SolidColorBrush x:Key="calendar-datebgr" Color="#B708BA"/>
<SolidColorBrush x:Key="calendar-date" Color="#FBFF00"/>
</local:CustomDictionary>
</Grid.Resources>
<telerik:RadSvgImage UriSource="/Images/SvgImage.svg" CustomBrushes="{StaticResource CustomBrushesDictionary}" Width="128" Height="128"/>
</Grid>
Voila! Your RadSvgImage is now rocking custom colors and ready to shine. ✨
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.
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!
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!
]]>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.
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.
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;
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!
<StackPanel Orientation="Horizontal"> <telerik:GroupBox Header="Windows11" HorizontalAlignment="Left" Width="350"> <StackPanel> <telerik:RadButton Content="Button"/> <telerik:RadListBox Margin="0 8"> <telerik:RadListBoxItem>Item 1</telerik:RadListBoxItem> <telerik:RadListBoxItem>Item 2</telerik:RadListBoxItem> <telerik:RadListBoxItem>Item 3</telerik:RadListBoxItem> </telerik:RadListBox> <telerik:RadWatermarkTextBox Text="WatermarkTextBox"/> </StackPanel> </telerik:GroupBox> <telerik:GroupBox Header="Windows11 Customized" HorizontalAlignment="Left" Width="350" Margin="8 0 0 0"> <StackPanel> <StackPanel.Resources> <!-- Customized Windows 11 resources with ThemeSizeHelper --> <sys:Double x:Key="{x:Static telerik:Windows11ResourceKey.DefaultControlMinHeight}">25</sys:Double> <sys:Double x:Key="{x:Static telerik:Windows11ResourceKey.DefaultItemMinHeight}">24</sys:Double> <sys:Double x:Key="{x:Static telerik:Windows11ResourceKey.FontSize}">13</sys:Double> <Thickness x:Key="{x:Static telerik:Windows11ResourceKey.DefaultControlPadding}">8 0</Thickness> <Thickness x:Key="{x:Static telerik:Windows11ResourceKey.NestedButtonMargin}">0 0 8 0</Thickness> <Thickness x:Key="{x:Static telerik:Windows11ResourceKey.InputPadding}">4 1 4 1</Thickness> </StackPanel.Resources> <telerik:RadButton Content="Button"/> <telerik:RadListBox Margin="0 8" > <telerik:RadListBoxItem>Item 1</telerik:RadListBoxItem> <telerik:RadListBoxItem>Item 2</telerik:RadListBoxItem> <telerik:RadListBoxItem>Item 3</telerik:RadListBoxItem> </telerik:RadListBox> <telerik:RadWatermarkTextBox Text="WatermarkTextBox"/> </StackPanel> </telerik:GroupBox> </StackPanel>
And voilà! Feast your eyes on the result:
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.
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.
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!
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!
In the previous 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?
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.
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:
<Project Sdk="Microsoft.NET.Sdk.Razor">
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;
<Telerikscheduler Data="@Appointments" @Bind-Date="@Startdate" Height="600px" @Bind-View="@Currview"
Allowcreate="True" Allowdelete="True" Allowupdate="True"
Confirmdelete="True"
>
<Schedulerviews>
<Schedulerdayview Starttime="@Daystart" Endtime="@Dayend" Workdaystart="@Workdaystart" Workdayend="@Workdayend" />
<Schedulerweekview Starttime="@Daystart" Endtime="@Dayend" Workdaystart="@Workdaystart" Workdayend="@Workdayend" />
<Schedulermultidayview Starttime="@Daystart" Endtime="@Dayend" Workdaystart="@Workdaystart" Workdayend="@Workdayend" Numberofdays="10" />
<Schedulermonthview></Schedulermonthview>
<Schedulertimelineview Starttime="@Daystart" Endtime="@Dayend" Workdaystart="@Workdaystart" Workdayend="@Workdayend" />
</Schedulerviews>
</Telerikscheduler>
@code {
IEnumerable<Appointment> Appointments = new List<Appointment>();
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
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MyBlazorApp"
x:Class="MyBlazorApp.MainPage">
<BlazorWebView HostPage="wwwroot/index.html">
<BlazorWebView.RootComponents>
<RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
</BlazorWebView.RootComponents>
</BlazorWebView>
</ContentPage>
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<WeatherForecastService>();
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 <head>
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>
@using Telerik.Blazor
@using Telerik.Blazor.Components
@using Telerik.FontIcons
@using Telerik.SvgIcons
<TelerikRootComponent>
<Router AppAssembly="@typeof(Main).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
<NotFound>
<LayoutView Layout="@typeof(MainLayout)">
<p role="alert">Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
</TelerikRootComponent>
CreateMauiApp()
method:// 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:
<?xml version="1.0" encoding="utf-8" ?>
<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>
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.
]]>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.
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 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:
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.
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.
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.
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.
.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.
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;
}
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:
Another important thing that you should know is how to customize UI or behavior per platform. You can use two major approaches:
#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.
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.
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.
]]>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!
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.
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:
For more information on getting started with the Telerik UI for .NET MAUI Calendar control, visit the Telerik UI for .NET MAUI documentation.
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:
For more information on getting started with the PDF Viewer control, visit the Telerik UI for .NET MAUI documentation.
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 Chat control, visit the Telerik UI for .NET MAUI documentation.
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:
For more information on getting started with the Telerik UI for .NET MAUI SlideView control, visit the documentation.
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:
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.
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:
For more information on getting started, visit the Telerik UI for .NET MAUI TreeView control documentation.
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.
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.
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.
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).
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:
You can find more information about the new components in their respective documentation sections:
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 documentation.
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 documentation.
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.
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.
<pivot:LocalDataSourceProvider x:Key="dataProvider" EnableHierarchy="True">
<pivot:LocalDataSourceProvider.RowGroupDescriptions>
<pivot:PropertyGroupDescription PropertyName="Customer.Company.Industry" />
<pivot:PropertyGroupDescription PropertyName="Promotion" />
</pivot:LocalDataSourceProvider.RowGroupDescriptions>
</pivot:LocalDataSourceProvider>
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:
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.
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.
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 Telerik UI for WinForms documentation.
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 documentation.
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.
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 Telerik UI for WinForms documentation.
.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.
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:
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:
For more information on getting started, visit the Telerik UI for WinUI TimeBar control documentation.
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.
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.
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.
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.
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.
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.
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.
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.
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.
… 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.
<Grid>
<telerik:ChartHistogramSource x:Name="histogramSource" Interval="3"/>
<telerik:RadCartesianChart Palette="Windows11">
<telerik:RadCartesianChart.Grid>
<telerik:CartesianChartGrid MajorLinesVisibility="XY"/>
</telerik:RadCartesianChart.Grid>
<telerik:RadCartesianChart.VerticalAxis>
<telerik:LinearAxis />
</telerik:RadCartesianChart.VerticalAxis>
<telerik:RadCartesianChart.HorizontalAxis>
<telerik:LinearAxis MajorStep="{Binding ElementName=histogramSource, Path=ActualInterval}"
Maximum="24"/>
</telerik:RadCartesianChart.HorizontalAxis>
<telerik:ScatterRangeBarSeries ItemsSource="{Binding ElementName=histogramSource}"/>
</telerik:RadCartesianChart>
</Grid>
public MainWindow()
{
InitializeComponent();
var rnd = new Random(123456);
var caseResolutionTimes = new ObservableCollection<double>();
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.
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.
<telerik:ChartHistogramSource x:Name="histogramSource" Orientation="Vertical">
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();
}
}
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.
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.
]]>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:
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!
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:
<telerik:RadOfficeNavigationBar HorizontalAlignment="Left" HorizontalContentAlignment="Left" Background="White">
<telerik:RadOfficeNavigationBarItem Content="Mail">
<telerik:RadOfficeNavigationBarItem.ContentTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<telerik:RadGlyph Glyph="" Foreground="#9A59B5"/>
<TextBlock Text="{Binding}" Foreground="#8D44AD" Margin="5 0 0 0"/>
</StackPanel>
</DataTemplate>
</telerik:RadOfficeNavigationBarItem.ContentTemplate>
</telerik:RadOfficeNavigationBarItem>
<telerik:RadOfficeNavigationBarItem Content="Calendar">
<telerik:RadOfficeNavigationBarItem.ContentTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<telerik:RadGlyph Glyph="" Foreground="#3598DB"/>
<TextBlock Text="{Binding}" Foreground="#297FB8" Margin="5 0 0 0"/>
</StackPanel>
</DataTemplate>
</telerik:RadOfficeNavigationBarItem.ContentTemplate>
</telerik:RadOfficeNavigationBarItem>
<telerik:RadOfficeNavigationBarItem Content="Contacts">
<telerik:RadOfficeNavigationBarItem.ContentTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<telerik:RadGlyph Glyph="" Foreground="#2DCC70"/>
<TextBlock Text="{Binding}" Foreground="#27AE61" Margin="5 0 0 0"/>
</StackPanel>
</DataTemplate>
</telerik:RadOfficeNavigationBarItem.ContentTemplate>
</telerik:RadOfficeNavigationBarItem>
</telerik:RadOfficeNavigationBar>
Here is the result:
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.
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.
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.
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.
<telerik:RadOfficeNavigationBar x:Name="radOfficeNavigationBar" IsDragReorderEnabled="True" Grid.Row="3" Margin="30" HorizontalAlignment="Left" HorizontalContentAlignment="left">
<telerik:RadOfficeNavigationBar.ItemContainerStyle>
<!--Set BasedOn property if NoXaml assemblies are used: BasedOn="{StaticResource RadOfficeNavigationBarItemStyle}"-->
<Style TargetType="telerik:RadOfficeNavigationBarItem">
<Setter Property="telerik:DragDropManager.AllowCapturedDrag" Value="True"/>
<Setter Property="MinWidth" Value="50"/>
</Style>
</telerik:RadOfficeNavigationBar.ItemContainerStyle>
<telerik:RadOfficeNavigationBar.Items>
<telerik:RadOfficeNavigationBarItem Content="Mail "/>
<telerik:RadOfficeNavigationBarItem Content="Calendar "/>
<telerik:RadOfficeNavigationBarItem Content="People"/>
<telerik:RadOfficeNavigationBarItem Content="Notes"/>
<telerik:RadOfficeNavigationBarItem Content="Tasks"/>
</telerik:RadOfficeNavigationBar.Items>
</telerik:RadOfficeNavigationBar>
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.
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?
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:
]]>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.
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.
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.
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 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.
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.
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.
Find out what’s new in Telerik UI for WinUI 2.4.0!
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:
For more information about the control, make sure to check out the Calculator section in our online help documentation.
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.
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.
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).
Let’s take a look at what’s new in Telerik UI for WPF with R1 2023.
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:
For more information about the control, make sure to check out its online help docs.
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:
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.
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.
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.
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
.
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.
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).
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)
The R1 2023 release brings numerous improvements across the entire suite. Here are some of the highlights of the Telerik Document Processing Libraries:
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:
The encryption algorithm is controlled by the EncryptionType property of the export settings. Detailed information is available here: Export settings.
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.
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.
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:
Visit our product documentation for more information on getting started with the Telerik UI for .NET MAUI ToolBar control.
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:
Visit our product documentation for more information on getting started with the Telerik UI for .NET MAUI ImageEditor control.
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:
Visit our product documentation for more information on getting started with the Telerik UI for .NET MAUI SignaturePad control.
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:
Please visit our product documentation for more information on getting started with the Telerik UI for .NET MAUI ProgressBar control.
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.
Visit our product documentation for more information on getting started with the Telerik UI for .NET MAUI Accordion control.
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.
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.
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.
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!
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.
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.
Discover all updates across KendoReact and Kendo UI for Angular, Vue and jQuery, as well as ThemeBuilder.
Discover all updates across Telerik Reporting, JustMock, Fiddler Everywhere and Fiddler Jam.
]]>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.
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.
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:
<telerik:RadCircularProgressBar Value="0.27" />
Of course, you can do this in code-behind, too:
RadCircularProgressBar cpb = new RadCircularProgressBar() { Value = 0.27 };
The result will be the same:
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 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 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.
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.
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.
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.
Ranges with different colors can be defined, and they can be a gradient, too. How? This way.
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.
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.
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.
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:
]]>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:
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:
For more information about the control, make sure to check out the PropertyGrid section in our online help documentation.
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.
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.
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:
Hope this feature will be useful. For more details, check out the Export section from our DataGrid documentation.
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.
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)
Don’t wait—try out the latest:
In case you missed it, here are some of the updates from our previous release.
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:
I hope this control will be useful in various types of applications. For more information, check out our online CircularProgressBar help documentation.
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:
<pivot:RadPivotGrid x:Name="pivotGrid" pivot:FieldListBehavior.ShowInline="True" />
For more details, make sure to check out the Inline PivotFieldList section from our online help documentation.
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.
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.
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.)
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.
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.
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.
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.
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.
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.
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
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.
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!
Don’t wait—try out the latest:
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.
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 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.
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.
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.
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.
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:
Visit our product documentation for more information on getting started with the Telerik UI for .NET MAUI DataForm control.
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:
Visit our product documentation for more information on getting started with the Telerik UI for .NET MAUI AutoComplete control.
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:
Visit our product documentation for more information on getting started with the Telerik UI for .NET MAUI Expander control.
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.
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.
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!
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.
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.
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.
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.
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:
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.
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.
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.
]]>With the latest releases, the Spreadsheet component for WPF has been enhanced with support for Notes and their modern alternative—Threaded Comments. The Notes help you annotate the data inside the cells or make it clearer by adding additional information for the cell content. Comments are used for marking information about a cell’s data and can have one or multiple replies forming discussions with other people about the data in the document.
The users are now able to work with notes and comments through the UI, or you can control them in the code behind.
No matter whether you need to add, delete or modify a note, you can do all that in the Telerik UI for WPF Spreadsheet control. The control exposes options for working with notes in its built-in context menu by right-clicking on a cell and in the Review tab of the ribbon:
Once the notes are inserted, you can choose to:
All of these operations can be done in code as well. For more information, you can refer to the SpreadProcessing | Notes topic.
Similar to the notes, the WPF Spreadsheet component allows you to create, modify or remove comments and their replies through the UI or directly in the code. The new Comments section inside the Review tab of RadSpreadsheetRibbon enables the users to navigate through the comments and/or manipulate them.
To add a comment, you can click the New Comment option on the context menu or use the button on the Review tab of the ribbon. Then you can start discussing the data with other users.
If a comment thread is complete, then you can mark it as Resolved. Although still viewable, the comment will appear faded out and no further additions can be made to it unless it’s reopened. Anyone who can modify the workbook can also resolve or re-open already resolved comments.
There are also other useful UI features like always showing all the comments in the worksheet so that users don’t need to hover over a specific cell to see the comments related to it. Navigation is also made easy through the Next and Previous buttons inside the ribbon.
Working with the comments in UI is easy and straightforward. However, you might also need to manipulate them in code. For this purpose, the Worksheet object exposes the Comments collection. Through that collection, you can do all the operations we mentioned above for comments and their replies in the code. More information about the API is available in the SpreadProcessing | Comments help topic.
The notes were the first representation of the functionality in earlier versions of the spreadsheet documents. The threaded comments were introduced in the newer versions to enable users easily discuss the data and provide them with a better user experience. If you would like to take advantage of the threaded comments but you have legacy documents, the notes inside can be easily converted to comments by clicking a single button or invoking a method.
Hurry up and get the latest version so you can explore the new additions to the WPF Spreadsheet component and the whole UI for WPF suite. For existing customers, you can download the R2 2022 bits from your Telerik account. For new users, please:
Do not be shy—we are always happy to hear any feedback you would like to share. Go ahead and drop us a line in the comments section below or directly in our UI for WPF Feedback Portal.
]]>Sounds promising, doesn’t it? Let’s check it out together.
Virtual keyboards come with numerous advantages. One of my personal favorites is that users can type directly in their language on foreign language keyboards. They are also extremely useful for disabled users as they can use the mouse to type. Don’t need to even mention that such keyboards can increase user security, right?
Equipping yourself with the RadVirtualKeyboard is an easy task once you have a WPF project set up. What you need is a RadVirtualKeyboard tag in XAML and references to the Telerik.Controls.dll, Telerik.Windows.Data.dll and Telerik.Controls.Navigation.dll. Check it out:
<telerik:RadVirtualKeyboard />
Ready to learn all the marvelous features of the RadVirtualKeyboard control? Then go on with this section.
The control has three built-in layouts which can be controlled through the DefaultKeyboardLayout property:
Need a custom layout? Do not worry. You can create one with a special XML file and then load it using the LoadLayout method of the virtual keyboard. More info on that, guess where—in the Telerik UI for WPF documentation.
The default language of the letter buttons in the RadVirtualKeayboard is determined by the selected input language of the OS. Changing that language runtime will not affect the text in the letter buttons. The SynchronizeCultureWithSystem property comes to the rescue here. Just set it to True and the current input language tracking will be enabled—the text will update when the language changes at runtime.
The current language of the letters can also be changed manually by setting the Culture property of the control. Let me show you how easy it is to show our beautiful Bulgarian letters on these keys. ⌨️
virtualKeyboard.Culture = new System.Globalization.CultureInfo("bg-BG");
Guess what? This keyboard has a click sound on key press! If you don’t like it, simply set IsKeyPressSoundEnabled property to false. Or change it through the KeySoundPlayer. I will now show you how this works:
StreamResourceInfo info = Application.GetResourceStream(new Uri(@"/WpfApplication;component/myClickSoundFile.wav", UriKind.Relative));
virtualKeyboard.KeySoundPlayer = new DefaultKeySoundPlayer(info.Stream);
Keyboard Window
Another cool thing about the RadVirtualKeyboard is its special window which is styled according to the keyboard design:
var keyboardWindow = new RadVirtualKeyboardWindow(new RadVirtualKeyboard() { DefaultKeyboardLayout = DefaultKeyboardLayout.Compact});
keyboardWindow.Show();
You think the default look of the component is too standard? Well, the keyboard buttons can be customized using the VirtualKeayboardTemplateSelector property of the control. Let us have some fun together and make that keyboard off-beat!
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Telerik.Windows.Themes.Crystal;component/Themes/System.Windows.xaml"/>
<ResourceDictionary Source="/Telerik.Windows.Themes.Crystal;component/Themes/Telerik.Windows.Controls.xaml"/>
<ResourceDictionary Source="/Telerik.Windows.Themes.Crystal;component/Themes/Telerik.Windows.Controls.Input.xaml"/>
<ResourceDictionary Source="/Telerik.Windows.Themes.Crystal;component/Themes/Telerik.Windows.Controls.Navigation.xaml"/>
</ResourceDictionary.MergedDictionaries>
<Style x:Key="KeyButtonStyle" TargetType="telerik:RadButton" BasedOn="{StaticResource RadButtonStyle}">
<Setter Property="Padding" Value="4"/>
<Setter Property="FontSize" Value="11"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Foreground" Value="#4b6159"/>
<Setter Property="CornerRadius" Value="20"/>
<Setter Property="MinWidth" Value="0"/>
</Style>
<DataTemplate x:Key="RegularKeyTemplate">
<telerik:RadButton Command="{Binding KeyCommand}" AutomationProperties.AutomationId="{Binding DisplayText}" Style="{StaticResource KeyButtonStyle}" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding ShiftText}" Margin="3 0 0 0" Grid.Row="0" Grid.Column="0" Visibility="{Binding ShowSecondaryText, Converter={StaticResource BooleanToVisibilityConverter}}"/>
<TextBlock Text="{Binding DisplayText}" Grid.RowSpan="2" Grid.ColumnSpan="2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</telerik:RadButton>
</DataTemplate>
<DataTemplate x:Key="SpecialKeyTemplate">
<telerik:RadButton Content="{Binding DisplayText}" Command="{Binding KeyCommand}" AutomationProperties.AutomationId="{Binding DisplayText}" Style="{StaticResource KeyButtonStyle}" Background="#ffdac1" MinWidth="40" />
</DataTemplate>
<DataTemplate x:Key="NumpadKeyTemplate">
<telerik:RadButton Content="{Binding DisplayText}" Command="{Binding KeyCommand}" AutomationProperties.AutomationId="{Binding DisplayText}" Style="{StaticResource KeyButtonStyle}"/>
</DataTemplate>
<DataTemplate x:Key="LockKeyTemplate">
<telerik:RadToggleButton Foreground="#4b6159" Content="{Binding DisplayText}" Command="{Binding KeyCommand}" IsChecked="{Binding IsChecked}" Background="#b5ead7"
AutomationProperties.AutomationId="{Binding DisplayText}" Focusable="False" FontSize="{Binding FontSize, RelativeSource={RelativeSource AncestorType={x:Type telerikNavigation:RadVirtualKeyboard}}}"
Padding="0" helpers:ThemeHelper.CornerRadius="30" helpers:ThemeHelper.FocusVisualMargin="0"/>
</DataTemplate>
<telerikNavigation:VirtualKeyboardTemplateSelector x:Key="VirtualKeyboardTemplateSelector"
RegularTemplate="{StaticResource RegularKeyTemplate}"
SpecialTemplate="{StaticResource SpecialKeyTemplate}"
NumpadTemplate="{StaticResource NumpadKeyTemplate}"
LockTemplate="{StaticResource LockKeyTemplate}" />
</ResourceDictionary>
<telerik:RadVirtualKeyboard VirtualKeyboardTemplateSelector="{StaticResource VirtualKeyboardTemplateSelector}"/>
Let’s check it out:
And that is not all. The customization of the control can be brought to the next level by extending the control’s view models and additional properties which can be used in the DataTemplates of the VirtualKeyboardTemplateSelector. I believe you can and will, just know that a custom keys factory class needs to be implemented to use the extended view models. Now I will demonstrate to you how to add properties for the background and foreground of the buttons.
We need to create a custom key view model to include background and foreground information:
public class CustomLockKeyViewModel : LockKeyViewModel
{
public CustomLockKeyViewModel(int virtualKey, double keyWidth, double keyHeight, string displayText)
: base(virtualKey, keyWidth, keyHeight, displayText)
{
}
public Brush Background { get; set; }
public Brush Foreground { get; set; }
}
public class CustomModifierKeyViewModel : ModifierKeyViewModel
{
public CustomModifierKeyViewModel(int virtualKey, double keyWidth, double keyHeight, string displayText)
: base(virtualKey, keyWidth, keyHeight, displayText)
{
}
public Brush Background { get; set; }
public Brush Foreground { get; set; }
}
public class CustomRegularKeyViewModel : RegularKeyViewModel
{
public CustomRegularKeyViewModel(int virtualKey, double keyWidth, double keyHeight, bool showSecondaryText, string displayText = null)
: base(virtualKey, keyWidth, keyHeight, showSecondaryText, displayText)
{
}
public Brush Background { get; set; }
public Brush Foreground { get; set; }
}
public class CustomSpecialKeyViewModel : SpecialKeyViewModel
{
public CustomSpecialKeyViewModel(int virtualKey, double keyWidth, double keyHeight, string displayText)
: base(virtualKey, keyWidth, keyHeight, displayText)
{
}
public Brush Background { get; set; }
public Brush Foreground { get; set; }
}
The next step is creating a key factory:
public class CustomKeyFactory : DefaultKeyFactory
{
private static readonly List<int> specialColorKeyCodes = new List<int>()
{
8, 20, /*CapsLock*/ 9, /*tilde*/ 160,
/*Backspace*/ 226, 162, /*Ctrl*/
91, /*Win*/ 164, /*Alt*/ 165, /*AltGr*/ 93, /*Menu*/
163, /*Ctrl*/ 45, /*Backspace*/ 226, 192
};
public Brush DefaultBrush { get; set; }
public Brush EnterBrush { get; set; }
public Brush SpaceBrush { get; set; }
public Brush SpecialBrush { get; set; }
public Brush ShiftBrush { get; set; }
public Brush DefaultForeground { get; set; }
public CustomKeyFactory()
{
DefaultBrush = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FCFCFC"));
EnterBrush = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#F2E50B"));
SpaceBrush = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FF7F50"));
SpecialBrush = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#21B20C"));
ShiftBrush = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#17DEEE"));
DefaultForeground = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#333333"));
}
public override BaseKeyViewModel CreateKey(int virtualKey, KeyType keyType = KeyType.Normal, string displayText = null, double width = 1, double height = 1, int alternateVirtualKey = -1, string alternateText = null, bool showSecondaryText = false)
{
var keyModel = CreateCustomKey(virtualKey, keyType, displayText, width, height, alternateVirtualKey, alternateText, showSecondaryText);
if (virtualKey == 13) // Enter
{
SetCustomViewModelProperty(keyModel, "Background", EnterBrush);
SetCustomViewModelProperty(keyModel, "Foreground", Brushes.Black);
}
if (virtualKey == 13) // Enter
{
SetCustomViewModelProperty(keyModel, "Background", EnterBrush);
SetCustomViewModelProperty(keyModel, "Foreground", Brushes.Black);
}
else if (virtualKey == 32) // Space
{
SetCustomViewModelProperty(keyModel, "Background", SpaceBrush);
}
else if (virtualKey == 160 || virtualKey == 161) // Shift
{
SetCustomViewModelProperty(keyModel, "Background", ShiftBrush);
}
else if (specialColorKeyCodes.Contains(virtualKey))
{
SetCustomViewModelProperty(keyModel, "Background", SpecialBrush);
SetCustomViewModelProperty(keyModel, "Foreground", Brushes.White);
}
return keyModel;
}
private BaseKeyViewModel CreateCustomKey(int virtualKey, KeyType keyType, string displayText, double width, double height, int alternateVirtualKey, string alternateText, bool showSecondaryText)
{
switch (keyType)
{
case KeyType.Normal:
return new CustomRegularKeyViewModel(virtualKey, width, height, showSecondaryText, displayText) { Background = DefaultBrush, Foreground = DefaultForeground };
case KeyType.Special:
return new CustomSpecialKeyViewModel(virtualKey, width, height, displayText) { Background = DefaultBrush, Foreground = DefaultForeground };
case KeyType.Modifier:
return new CustomLockKeyViewModel(virtualKey, width, height, displayText) { Background = DefaultBrush, Foreground = DefaultForeground };
case KeyType.Lock:
return new CustomLockKeyViewModel(virtualKey, width, height, displayText) { Background = DefaultBrush, Foreground = DefaultForeground };
case KeyType.Numpad:
return new NumpadKeyViewModel(virtualKey, width, height, displayText, alternateVirtualKey, alternateText);
default:
throw new ArgumentException("Unknown key type");
}
}
private static void SetCustomViewModelProperty(BaseKeyViewModel viewModel, string propertyName, object value)
{
var propertyInfo = viewModel.GetType().GetProperty(propertyName);
if (propertyInfo != null)
{
propertyInfo.SetValue(viewModel, value);
}
}
}
Now we will define the key template selector:
<telerik:VirtualKeyboardTemplateSelector x:Key="KeyTemplateSelector">
<telerik:VirtualKeyboardTemplateSelector.RegularTemplate>
<DataTemplate>
<telerik:RadButton Command="{Binding KeyCommand}" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" Padding="0" Background="{Binding Background}" Foreground="{Binding Foreground}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding ShiftText}" Margin="3 0 0 0" Visibility="{Binding ShowSecondaryText, Converter={StaticResource BooleanToVisibilityConverter}}"/>
<TextBlock Text="{Binding DisplayText}" Grid.RowSpan="2" Grid.ColumnSpan="2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</telerik:RadButton>
</DataTemplate>
</telerik:VirtualKeyboardTemplateSelector.RegularTemplate>
<telerik:VirtualKeyboardTemplateSelector.SpecialTemplate>
<DataTemplate>
<telerik:RadButton Content="{Binding DisplayText}" Command="{Binding KeyCommand}" Padding="0" Background="{Binding Background}" Foreground="{Binding Foreground}"/>
</DataTemplate>
</telerik:VirtualKeyboardTemplateSelector.SpecialTemplate>
<telerik:VirtualKeyboardTemplateSelector.LockTemplate>
<DataTemplate>
<telerik:RadToggleButton Content="{Binding DisplayText}" Command="{Binding KeyCommand}" IsChecked="{Binding IsChecked}" Background="{Binding Background}" Foreground="{Binding Foreground}"/>
</DataTemplate>
</telerik:VirtualKeyboardTemplateSelector.LockTemplate>
</telerik:VirtualKeyboardTemplateSelector>
And the last step is setting the custom key factory and the template selector:
<telerik:RadVirtualKeyboard VirtualKeyboardTemplateSelector="{StaticResource KeyTemplateSelector}" DefaultKeyboardLayout="Compact" Width="675" Height="240"> <telerik:RadVirtualKeyboard.KeyFactory> <local:CustomKeyFactory /> </telerik:RadVirtualKeyboard.KeyFactory> </telerik:RadVirtualKeyboard>
That’s it!
It looks great, right?
I hope you enjoyed reading this blog. Do not forget to download and try the latest version of Telerik UI for WPF and explore the latest features. Existing users can get the R2 2022 bits from your Telerik account, and new users can download a trial of Telerik UI for WPF.
Once you do, please share your thoughts in the comments section below or the well-known Feedback Portal.
]]>The R2 2022 Release of the Telerik Desktop and Mobile Components is here, and I cannot think of a better prelude to one of the most exciting additions to the Telerik WPF world—the Windows 11 theme. Just read the following quote from the awesome blog post about the Windows 11 OS:
Windows is more than just an operating system; it’s a fabric woven into our lives and in our work. It’s where we connect with people, it’s where we learn, work and play. Over time it’s remained familiar and adapted to us.
Is there a better inspiration than the visual revolution of the Windows OS to extend the UI for WPF’s theme suite? I cannot wait to learn the deets. 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, whoosh! If you are as psyched as I am for the Windows 11 theme, read on.
This theme really knows how to give a good first impression. No, this is not nonsense. Hope these red-carpet shots earn your trust in my words.
These left me eager to validate whether first impressions last. Let’s jump to the backstage.
In this section, I will do my best to reveal the character of the Windows 11 theme. Sounds a little mystic, but I can guarantee that if the above shots did not lead to love at first sight, the second sight will surely make it happen.
Color helps users focus on their tasks by indicating a visual hierarchy and structure between user interface elements. The Windows 11 colors are designed to provide a calming foundation, subtly enhancing user interactions, and emphasizing significant items only when necessary.
These colors are distributed as the Light and Dark built-in color variations. This is the first of UI for WPF’s themes that offers another, extraordinary color variation—the System one. It automatically decides whether to use the colors from the light or the dark variation of the theme depending on the system’s default app mode.
While we are on this topic, I want to share another cool thing about this theme—the ability to use the Windows color instead of the theme’s default accents. This is controlled via the UseSystemAccentColor property. I totally l-o-v-e this option and surely could spend hours choosing my favorite color!
Enjoyment does not end here, it grows stronger. This theme offers out-of-the-box native look and feel of the Telerik WPF Window component when the app is running on Windows 11. How? With the OS’s famous materials. Materials are visual effects applied to UX surfaces that resemble real life artifacts. Windows 11 uses occluding materials—acrylic and mica.
Acrylic is a semi-transparent material that replicates the effect of frosted glass. In Windows 11, acrylic has been updated to be brighter and more translucent, allowing for a stronger contextual relationship with the visuals behind it.
Mica is a new opaque material introduced in Windows 11. Mica surfaces are subtly tinted with the user's desktop background color. This material also indicates window focus with active and inactive states as a built-in feature.
Both are mode aware—supporting both light and dark mode.
Not sure which one to choose and how to switch between them? Don’t worry, our development team has that covered. The answer is—using the new WindowEffectsHelper. The documentation article about this theme is awesome, by the way, and contains an example on how to make that change in the Setting the Material section.
For those of you who are familiar with Telerik glyphs, until the R2 2022 release, they used the TelerikWebUI font as a default one. The new release and the new theme brought a new glyph font—the TelerikFluentIcons. It contains a similar set of icons as the TelerikWebUI but with different visual appearance to better match the Windows 11 iconography. The glyphs have been redesigned to embrace a softer geometry and more modern metaphors.
At the end of the previous sub-section, I mentioned geometry. It says nothing in particular, does it?
The Windows 11 geometry has been crafted to support modern app experiences. Progressively rounded corners, nested elements and consistent gutters combine to create a soft, calm and approachable effect that emphasizes unity of purpose and ease of use.
The theme applies rounded corners to all top-level app windows. The same applies to most common controls such as buttons, editors, etc. The most used corner radiuses are the theme palette’s CornerRadius and OverlayCornerRadius—4px and 8px respectively. Top-level containers such as app windows, popups and dialogs are rounded using an 8px corner radius. In-page elements such as buttons and list backplates are rounded using a 4px corner radius. Straight edges that intersect with other straight edges are not rounded. Window corners are not rounded when windows are maximized.
After getting to know each other, don’t you want to try the Windows 11 theme in your apps? I do. So, let’s see the possible ways to do it. Telerik-UI-for-WPF-themes medalists, you can skip that part.
How to get the Windows 11 theme in a WPF app? Using either implicit styles (my preferred theming mechanism) or StyleManager. Common requirement for both options—an existing WPF application.
Choosing implicit styles, you only need to click on any Telerik WPF Control in the Design View. Then click on the Theme element and choose the Windows 11 theme from the available choices:
StyleManager offers two options—code-behind or using the Theme attached property:
public MainWindow()
{
StyleManager.ApplicationTheme = new Windows11Theme();
InitializeComponent();
}
<telerik:RadButton telerik:StyleManager.Theme="Windows11"/>
Effortless. I believe you are ready for the next level—exploring the customization capabilities.
One of the design principles which guided the journey of making Windows 11 the best-in-class implementation of Fluent is to make it personal. When talking about the personal, there are two things that enhance it a lot.
We offer the Color Theme Generator—a tool for interactive theme palette customization with live preview. You can try different shades, different tints, blend them as much as you desire. And when you’re finished with your little experiment, you can export the outcome.
Modifying the appearance of a specific basic control without altering its control template is also an option. The Theme Helper may come in handy for that. Its properties got extended this release especially for the design needs of this awesome theme.
For Windows 11, the background changes of a control for its mouse over state for example are made with the assistance of the ThemeHelper’s MouseOverBackgroundBrush property. The border brush changes use the existing ThemeHelper brushes. This does make the customization even easier, believe me. There is also a ready for copy example in the Theme Helper section of the theme’s documentation.
Thanks for taking the time to read my blog! I hope you are curious to see the worth of the Windows 11 world and Telerik’s awesome interpretation of it as a WPF theme. Don’t forget to check its docs, too. Enjoy its calmness and precision by downloading the latest Telerik UI for WPF version from your Telerik account for existing users, or for newcomers:
You know that is just a small (yet essential and engaging) part of the R2 2022 release. Be sure to learn What’s New in R2 2022 With Telerik Desktop and Mobile Components. And take a minute or two to help us build the things your app development will benefit most from. Share your honest feedback in the comment section below, or head to the Feedback Portal of the product(s) you use.
Stay tuned, Windows 11 for the Telerik ReportViewer is coming soon, too.
]]>