Splitting WPF interface across multiple Xaml files

Question

I am trying to create a user interface using XAML. However, the file is quickly becoming very large and difficult to work with. What is the best way for splitting it across several files.

I would like to be able to set the content of an element such as a ComboBox to an element that is defined in a different xaml file (but in the same VS project).

thanks

Answer 1

You can split a large user interface by defining UserControls.

Right-click on the solution tree, choose Add->New Item... then User Control. You can design this in the normal way.

You can then reference your usercontrol in XAML using a namespace declaration. Let's say you want to include your UserControl in a Window. In the following example I've added a UserControl named "Foo" to the namespace "YourCompany.Controls":

<Window x:Class="YourCompany.MainWindow"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     xmlns:Controls="clr-namespace:YourCompany.Controls">    <Controls:Foo ... /> 

For your specific example, you would make use of your usercontrol in a combobox by defining a DataTemplate that displayed the data within your usercontrol.

Answer 2

You can split up XAML files by using a ResourceDictionary. The ResourceDictionary can be used to merge other files:

<Page.Resources>   <ResourceDictionary>     <ResourceDictionary.MergedDictionaries>       <ResourceDictionary Source="myresourcedictionary.xaml"/>       <ResourceDictionary Source="myresourcedictionary2.xaml"/>     </ResourceDictionary.MergedDictionaries>   </ResourceDictionary> </Page.Resources> 

In the ResourceDictionary, you can also declare Styles that you can use at your elements, such that the main XAML file gets smaller.

Another possibility to get a smaller XAML file is to define your own controls that you then use in your main app.