Telerik UI for WPF R3 2020: New AutoSuggestBox, Office2019 Theme, Multithumb Slider & More

The R3 2020 release of Telerik UI for WPF is now live! It brings a ton of new features and improvements.

The latest release of Telerik UI for WPF is here and we're excited to share it with you. We are adding a brand new Office2019 theme and new RadAutoSuggestBox control, which will help you to modernize your application. NotifyIcon is now official, the Slider control gets support for multiple thumbs and TimeSpanPicker gains editing functionality. And on the top of that, we are introducing .NET 5 RC1 support and a new .NET Core component—EntityFrameworkCoreDataSource!

The wait is over—let’s dive in the coolness of this release! 😎

Office 2019 Theme

Meet the newest jewel in our rich set of themes—Office2019 theme. It is inspired by the latest MS Office application and will help you to bring that modern look and feel right into your WPF application. The theme comes with three predefined color palettes: Light, Dark and Gray, and provides an API (as seen in the previous themes) that will help you to easily adjust it according to your taste (or the designer’s taste 😁) and achieve a unique appearance with a few clicks. One last interesting fact—this theme provides the most brushes compared to our other themes, in other words better customization capability!

See how some of the controls look styled with the new theme:

It looks nice, doesn't it?! 😊 Need more? Install the Color Theme Generator application where you can try out the theme and check out the documentation here.

We are cooking a dedicated post about the theme—stay tuned!

AutoSuggestBox

Announcing RadAutoSuggestBox—it is essentially a text input control that shows suggestions to the user while typing. It has drop down that is dynamically populated depending on the application logic in order to provide the most relevant options for the user to choose from. The control is inspired by the UWP AutoSuggestBox and provides similar functionality. You can find the top features below:

• Virtualization
• Grouping
• No Results Content (shown whenever there aren’t any suggestions to show)
• Watermark (shown before user starts typing, when the text is empty)
• Keyboard Navigation
• Configurable Buttons (API to change the content or the command of the buttons)
• Events
• Rich Set of Themes
• Automation Support

See the control in action in our WPF demos and make sure to check out the documentation here.

EntityFrameworkCoreDataSource (.NET Core)

For the .NET Core version of the controls we are including a new data control—RadEntityFrameworkCoreDataSource. It provides seamless integration between a user interface and data coming from Entity Framework Core. The component can codelessly integrate with RadGridView, RadDataPager and RadDataFilter to perform paging, filtering, sorting and grouping directly on the database server. RadEntityFrameworkCoreDataSource can also be used as a standalone data source control since it provides the public API needed for loading, shaping and editing data. Here are the main features of the component:

• Filtering
• Sorting
• Grouping
• Paging
• Editing
• MVVM Support
• Integration with RadGridView, RadDataPager and RadDataFilter

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

NotifyIcon (offical)

In case you missed it—we initially released NotifyIcon with R2 2020. This is a handy control that will allow you to add an icon to the taskbar for your application and enable users to interact with it. Now the control is polished and provides additional features. Here are the main ones we are adding:

• DPI support
• Built-in WPF Tooltip
• Option to customize the closing behavior of the popup

TimeSpanPicker—Editing

Until now the TimeSpanPicker control provided a way to change the value only through the drop down of the control. Now with R3 we are adding editing support—you can enable it by setting the EditMode property to TextAndDropDown. The editing feature provides the following functionalities:

• Keyboard Navigation (through the sections)
• Sections Spinning
• ValueEditing Event (to fully customize the editing behavior)

There was so much demand for that feature, so I hope it will be pretty useful and will allow you to provide even better UX for your application. For more details check out the Text Editing help article.

Slider—Multiple Thumbs Support

One of the most desired features was for RadSlider to support multiple thumbs. Here it is—with this version you can have as many thumbs as you need. There are two types of thumbs: single and range thumb (named SliderThumb and RangeSliderThumb) that can be used to configure the control in order to achieve the desired scenario. You could also specify how they interact with each other through their InteractionMode property—they can be locked, push each other or move freely on the track. Pretty neat feature! 😊

See below a sample Slider definition using the new feature:

<telerik:RadSlider TickPlacement="TopLeft" TickFrequency="10" Minimum="0" Maximum="300">
    <telerik:RadSlider.Thumbs>
        <telerik:RangeSliderThumb InteractionMode="Lock" RangeStart="0" RangeEnd="100" />
        <telerik:SliderThumb InteractionMode="Free" Value="150" />
        <telerik:RangeSliderThumb InteractionMode="Push" RangeStart="200" RangeEnd="250" />
    </telerik:RadSlider.Thumbs>
</telerik:RadSlider>

For details check the Multiple Thumbs article from our online help documentation.

Below you can find sample code demonstrating how the command can be attached to different keyboard shortcuts:

<telerik:RadDocking x:Name="docking">
    <telerik:RadDocking.InputBindings>
        <KeyBinding Command="telerik:RadDockingCommands.ClosePane" Key="F4" Modifiers="Ctrl" CommandParameter="DocumentPanes" />
        <KeyBinding Command="telerik:RadDockingCommands.ClosePane" Key="Esc" Modifiers="Shift" CommandParameter="NonDocumentPanes" />
        <KeyBinding Command="telerik:RadDockingCommands.ClosePane" Key="F5" Modifiers="Ctrl" CommandParameter="ActivePanes" />
    </telerik:RadDocking.InputBindings>

<telerik:RadDocking>
    <telerik:RadSplitContainer>
        <telerik:RadPaneGroup CloseTabsOnMouseMiddleButtonDown="True">
            <telerik:RadPane Header="C Sharp" />
            <telerik:RadPane Header="VB" />
            <telerik:RadPane Header="C++" />
        </telerik:RadPaneGroup>
    </telerik:RadSplitContainer>
</telerik:RadDocking>