In this post, I want to demonstrate the use of the RadGauge for WPF control inside a Windows Forms Application.  Just because you are not developing WPF applications every day does not mean you cannot benefit from what WPF has to offer.  I thought it would be useful to point out that you can use WPF User Controls inside of Windows Forms applications with minimal effort.  This is made possible through the Systems.Windows.Forms.Integration namespace.  More specifically you will be working with a control call "ElementHost" which allows the WPF control to be used in a Windows Form.    So lets get started.

Create a new Windows Forms application and add the Element Host control to the form.  It will be located under the WPF Interoperability group in your toolbox. 

image

Next, add a class to the project which will be used to house our data.  Since we are working with a gauge, we are going to display two values Pressure (what our current pressure level is) and Baseline (value we expect pressure to be under). 

    //Simple class used to represent data, from either a database or class
    public class SampleData
    {
        public int Pressure { get; set; }
        public int Baseline { get; set; }
    }

With that out of the way, we now need to get our WPF control setup so we can use it in the application.  We accomplish this by adding a new WPF User Control Library project to the current solution.

image

You will want to drag and drop a RadGauge control onto the UserControl surface.  This will add all the necessary references to the project for you.  You still have to construct the RadGauge, which I have demonstrated in the XAML below.  Note that we are referencing Pressure and Baseline in the XAML.  The control is not aware of our class, nor does it need to be.  We are simply telling the control what it will be using to source it's data.  I will explain this more later.  For more information on the code below, please refer to my previous blog post about working with the RadGauge for WPF.

<UserControl x:Class="WpfControlLibrary1.UserControl1"
    xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
    xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
    Height="150" Width="150" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">
    <Grid>
        <telerik:RadGauge Name="radGauge1" Margin="4">
            <telerik:RadialGauge
>
                <telerik:RadialScale
>
                    <telerik:RadialScale.Indicators
>
                        <telerik:Needle Value="{Binding Path
=Pressure}"/>
                        <telerik:RadialBar Value="{Binding Path
=Baseline}"/>
                    </telerik:RadialScale.Indicators
>
                </telerik:RadialScale
>
            </telerik:RadialGauge
>
        </telerik:RadGauge
>
    </Grid>
</UserControl>

Now that we have our WPF control created, we need to add a reference to the WPF Control Library from our Windows Forms application.

image

You may be surprised to learn that all the hard work is done.  The groundwork is in place to use the control inside of our WinForm app with just a few more lines of code.  

        private void Form1_Load(object sender, EventArgs e)
        {
            //We want our form and element host to be nice and square, this is not operational code
            this.Size = new Size(400, 400);
            this.elementHost1.Height = 300;
            this.elementHost1.Width = 300;

            //create new gauge control
            var myGauge = new WpfControlLibrary1.UserControl1();

            //provide the data that will be displayed within the RadGauge
            myGauge.DataContext = new SampleData() { Baseline = 15, Pressure = 10 }; 

            //assign the custom WPF control to the element host so it is displayed
            this.elementHost1.Child = myGauge;
        }

In the code above, you will see that immediately after I create an instance of the control, I assign DataContext.  Earlier I mentioned that our WPF control referenced the Pressure and Baseline properties, but were unaware of the SampleData class.  When I assign the SampleData class to the DataContext it will look for those properties and bind their values to the appropriate fields in my control.  So we should see our Pressure and Baseline values displayed appropriately in our RadGauge at runtime.  My last action is to assign my gauge control to the Child property of ElementHost.  When I run the application, you will see that my end result is a RadGauge for WPF displayed inside of our Windows Forms application.   

 image

I hope this shows that you do not have to be building a full blown WPF application to work with WPF.  This integration opens the door for you to enhance your existing Windows Forms applications on a whole new level.

Download Visual Studio 2008 project: IntegrateRadGaugeForWPFInWinForms.zip


About the Author

Nikolay Diyanov

is the Product Manager of Telerik's UI for iOS and UI for Xamarin divisions. He joined the company back in 2007 as a Support Officer and made his way up the ladder over the past few years. Delivering outstanding solutions that make developers lives easier is his passion and the biggest reward in his work. In his spare time, Nikolay enjoys travelling around the world, hiking, sun-bathing and kite-surfing.

@n_diyanov

Related Posts

Comments