How to use Edit Template Feature for WinRT Controls

This is a frequently asked question in our forums. Both Visual Studio and Expression Blend allows creating a copy of default control style or template and use it in your application. But with complicated controls, it doesn't always work as desired. The IDE tries to extract XAML from the binaries, and in most cases, the result is different from the original version. Here are the additional steps required to make source XAML accessible for IDE and editing. 1. Create a Windows Application and add reference C1.Xaml extension: 2. Add XAML to show TreeView control with some items:

3. Run the sample, and you'll see the expansion-arrow default appearance as shown on this image:

Next, we'll use the default template to create a custom style. Let’s change the expansion arrow of C1TreeViewItem.

1. You can find default XAML installed along with C1 VS extensions on the following location in your local system:

• Desktop: C:\Program Files (x86)\ComponentOne\WinRT XAML Phone Edition\Help\generics.Windows.zip
• Phone: C:\Program Files (x86)\ComponentOne\WinRT XAML Phone Edition\Help\generics.WindowsPhone.zip

Extract \C1.Xaml\Themes\C1TreeView.xaml file from generics.Windows.zip and add it to your project: 2. Add C1TreeView.xaml as MergedDictionary to application resources:

3. Now VS or Blend should be able to find C1TreeView source XAML when you use Edit Template or Edit a Copy from design-time context menu. To edit some visual part do the next:

• Select element (in our case it will be C1TreeViewItem) in designer
• From the context menu, select Edit Template or Edit a Copy item
• In the Create ControlTemplate Resource dialog, specify the name for the new ControlTemplate to be added and decide where you want it to be defined.

4. After that you'll see a copy of default XAML added to the place you specified above. You can edit it according to your needs. In attached sample, it's the style that shows expanded arrows on the right side of TreeViewItem. 5. Apply the C1TreeViewItemStyle1 for your TreeViewItem.

6. Run your application to see the difference. You can use this approach whenever you have problems with editing control styles and templates with any our control. Read more about our UWP/WinRT controls >> Download sample - 20.2 KB >>