Adding Telerik Controls to Elmish.WPF Apps

If you want to work with Elmish.WPF, some common tasks you’re used to in normal WPF projects may not be as clear. In this short article, I’ll show you how to hook up Elmish.WPF apps with Telerik WPF controls and themes.

As I discussed in my prior article, Elmish.WPF is a F#-based Model View Update (MVU) framework for .NET desktop development.

Wait, Who is Telerik?

For those of you not familiar with Telerik, Telerik is a major user interface component library and has been on the scene for many years. They offer similar components with similar APIs for every major .NET and JavaScript UI framework – and then a few more off of that.

On top of that, Telerik is an active sponsor at conferences and user groups which helps the developer community at large flourish and grow. This is hugely important as a number of events flat out wouldn’t happen without their involvement. Their free license contributions to user group raffles is also how I happened to win a free license of Telerik’s controls to play with.

Since I was learning Elmish.WPF, it was only natural for me to want to try building something using both Elmish.WPF and Telerik controls for WPF, but it took me a bit to figure out how to integrate the two.

Elmish.WPF Projects and Telerik

In Elmish.WPF, your main project is actually a modified F# console application project that happens to launch a window defined in a C# based WPF Custom Control project. If this is confusing, you might want to read my prior article to refresh yourself.

Because you’re now starting with a WPF Control Library, the Telerik help documentation and new project wizards aren’t exceptionally helpful, but thankfully the steps to get everything hooked up aren’t too bad.

At a high level, we’re going to:

1. Add the Telerik NuGet Feed as a Package Source in Visual Studio
2. Reference relevant Telerik assemblies via NuGet
3. Define a ResourceDictionary containing the Telerik Styles we need
4. Reference the Resource Dictionary from our Main Window’s XAML
5. Add Telerik Controls to our Window’s XAML

All in all, this is a pretty simple process, so let’s see how it works.

Adding the Telerik NuGet Feed

In Visual Studio, manage NuGet packages for your solution by right clicking on the solution in Solution Explorer and then selecting the menu option.

Next click on the gear in the upper right corner to bring up the package sources option dialog.

Click Add to add a new entry and give it a name of Telerik and a source of https://nuget.telerik.com/nuget and then click Update.

You may need to enter your Telerik credentials at this point.

Make sure the source is checked and then click OK to confirm your new package source. This will make Visual Studio search Telerik’s NuGet feed when looking for packages.

Referencing Telerik Assemblies

Next, let’s add a reference to some Telerik control assemblies. You’ll want to add whatever control libraries you want to work with, and at least one theme file.

I’m adding:

• Telerik.Windows.Controls.for.Wpf
• Telerik.Windows.Controls.Navigation.for.Wpf
• Telerik.Windows.Data.for.Wpf
• Telerik.Windows.Themes.Expression_Dark.for.Wpf

Install these packages into your WPF Control Library project.

Note: If you can’t find these options, either you didn’t configure the new NuGet feed source properly or you have the feed source drop down in the upper right set to a specific feed provider that doesn’t have Telerik controls.

Adding a Styles ResourceDictionary

Next, we will need to create a new ResourceDictionary to hold the styles we want to reference. This dictionary will be the central place where we reference Telerik styles and can be imported from multiple application windows potentially.

I’m going to call my dictionary Themes.xaml for clarity, and it’s code looks like the following:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/Telerik.Windows.Themes.Expression_Dark;component/Themes/System.Windows.xaml"/>
        <ResourceDictionary Source="/Telerik.Windows.Themes.Expression_Dark;component/Themes/Telerik.Windows.Controls.xaml"/>
        <ResourceDictionary Source="/Telerik.Windows.Themes.Expression_Dark;component/Themes/Telerik.Windows.Controls.Navigation.xaml"/>
    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

Note that if you’re using different themes or different components, your XAML will need to look different than mine.

Include the ResourceDictionary

We’re getting really close.

Next we need to go into your Window control and reference the ResourceDictionary we just created.

We do this by setting the Window.Resources property to a new ResourceDictionary that merges in dictionary values from the new file.

This is my relevant XAML:

    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Themes.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>

Add Telerik Controls to the Window

Now we should have everything we need to work with controls. Simply define Telerik at the top of your XAML with a statement like the following: xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" and you can include Telerik controls as you normally would.

    <DockPanel>
        <!-- Sidebar -->
        <telerik:RadPanelBar DockPanel.Dock="Left" ExpandMode="Multiple" MinWidth="200">
            <telerik:RadPanelBarItem Header="Team" IsExpanded="True" />
            <telerik:RadPanelBarItem Header="Work Items" IsExpanded="True" />
            <telerik:RadPanelBarItem Header="Servers" IsExpanded="True" ItemsSource="{Binding Servers}" DisplayMemberPath="Name" />
            <telerik:RadPanelBarItem Header="Applications" IsExpanded="True" />
        </telerik:RadPanelBar>

        <telerik:RadButton Command="{Binding NextTurnCommand}" DockPanel.Dock="Bottom">Next Turn</telerik:RadButton>

        <!-- Main Content Area -->
        <StackPanel>
            <TextBlock>It is currently</TextBlock>
            <TextBlock Text="{Binding TurnNumber}"></TextBlock>
        </StackPanel>
    </DockPanel>

See? User interfaces can be just as shiny in Elmish.WPF.

The post Adding Telerik Controls to Elmish.WPF Apps appeared first on Kill All Defects.