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:

WinRT TreeView

2. Add XAML to show TreeView control with some items:


<c1:C1TreeView x:Name="Tree" Margin="50" SelectionMode="Multiple" Background="DarkOliveGreen" >
<c1:C1TreeViewItem Header="Book List" IsExpanded="True" >
<c1:C1TreeViewItem Header="Language Books" IsExpanded="True" >
<c1:C1TreeViewItem Header="Italiano"></c1:C1TreeViewItem>
<c1:C1TreeViewItem Header="English" ></c1:C1TreeViewItem>
<c1:C1TreeViewItem Header="Deutsch" ></c1:C1TreeViewItem>
</c1:C1TreeViewItem>
</c1:C1TreeViewItem>
</c1:C1TreeView>


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

WinRT TreeView

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:

WinRT TreeView Add Theme

2. Add C1TreeView.xaml as MergedDictionary to application resources:


<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="C1TreeView.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</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.



WinRT Create Style Resource Dialog

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.


<c1:C1TreeView x:Name="Tree" Margin="50" SelectionMode="Multiple" Background="DarkOliveGreen" >
<c1:C1TreeViewItem Header="Book List" IsExpanded="True" Style="{StaticResource C1TreeViewItemStyle1}">
<c1:C1TreeViewItem Header="Language Books" IsExpanded="True" Style="{StaticResource C1TreeViewItemStyle1}" >
<c1:C1TreeViewItem Header="Italiano"></c1:C1TreeViewItem>
<c1:C1TreeViewItem Header="English" ></c1:C1TreeViewItem>
<c1:C1TreeViewItem Header="Deutsch" ></c1:C1TreeViewItem>
</c1:C1TreeViewItem>
</c1:C1TreeViewItem>
</c1:C1TreeView>


6. Run your application to see the difference.

WinRT TreeView

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 >>