Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Creating Custom WPF Derived Control with Attached XAML File

0.00/5 (No votes)
25 Jun 2018 1  
A way to create a custom derived control with the XAML file attached like a UserControl

Introduction

I have created quite a few derived custom controls that include XAML. The problem is how to keep the control code and XAML together.

One approach is to use the Generic file, but this means that there the code is in one place and the XAML in a totally different place, and normally have a single Generic file in the solution. Also, you will get to have a very large XAML file unless you start to break it up. If you do not break up this file, things can become very unmanageable very quickly.

You can also put the XAML in a ResourceDictionary such as app.XAML or a separate XAML file referred to in the app.XAML file, or in the Window or UserControl XAML files that use, but again this separates out the code and the XAML, and again should probably move the XAML for different controls into separate files. You can still associate the code and XAML by having them in the same folder, with similar names, but then this has to be referenced in with a MergeDictionaries in XAML. You also have to be careful with naming because if the code file and XAML file have the same name, this confuses Visual Studio and you get unintended results.

Solution

I came up with another way to do it. Basically, a UserControl is created and then change "UserControl" to the name of the control I want to derive from both the XAML and code files. Then in the constructor in the code file, there is the following:

public StyledComboBoxControl()
{
    InitializeComponent();
    var style = (Style)FindResource("Styling");
    Style = style;
}

Then finding the style resource has to be done after the InitializeComponent, it will not work before. The rest of the code behind contains whatever code is needed for the control to function correctly. In this case, it is only DependencyProperty definitions for all the extra properties this Control has beyond what is normally associated with a ComboBox.

The XAML file consists of only the Resources section for the Control, which contains a ResourceDictionary which contains the Style with an associated Name attribute so that is can be found with the FindResource method.

Using the Code

Using this control is just like using any control in WPF:

<local:StyledComboBoxControl Width="300"
                             VerticalAlignment="Center"
                             ItemsSource="{Binding Items}"
                             Label="Sample Combobox"
                             SelectedValue="{Binding SelectedValue2}"
                             SelectedValuePath="Key" />

History

  • 2018-06-25: Initial version

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here