Click here to Skip to main content
15,867,453 members
Articles / Desktop Programming / WPF
Tip/Trick

Creating Custom WPF Derived Control with Attached XAML File

Rate me:
Please Sign up or sign in to vote.
5.00/5 (8 votes)
25 Jun 2018CPOL2 min read 12.2K   271   10   4
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:

C#
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.

Image 1

Image 2

Using the Code

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

XML
<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, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior) Clifford Nelson Consulting
United States United States
Has been working as a C# developer on contract for the last several years, including 3 years at Microsoft. Previously worked with Visual Basic and Microsoft Access VBA, and have developed code for Word, Excel and Outlook. Started working with WPF in 2007 when part of the Microsoft WPF team. For the last eight years has been working primarily as a senior WPF/C# and Silverlight/C# developer. Currently working as WPF developer with BioNano Genomics in San Diego, CA redesigning their UI for their camera system. he can be reached at qck1@hotmail.com.

Comments and Discussions

 
QuestionYeah I quite like this idea actually Pin
Sacha Barber26-Jun-18 3:37
Sacha Barber26-Jun-18 3:37 
BugMissing sample? Pin
Tencor Developer25-Jun-18 10:21
Tencor Developer25-Jun-18 10:21 
AnswerRe: Missing sample? Pin
Clifford Nelson25-Jun-18 10:22
Clifford Nelson25-Jun-18 10:22 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.