Skip to main content Skip to footer

Customizing Arrow Style in C1TreeView

Here is a small utility blog which discusses how you can modify the appearance and position of the Expansion/Collpasion Arrow in C1TreeView. The procedure is as simple as it could be :) Just follow the below listed steps in order to customize your C1TreeView :

Get hold of the Default C1TreeView Template

1) Navigate to the following location on your system : C:\Program Files (x86)\ComponentOne\Studio for WinRT XAML 8.1\Help\generics.Windows.zip 2) Copy the generics.Windows.zip folder onto some other location on your system and Extract the contents of the Zip folder. 3) Include the C1TreeView.xaml file from within the Extracted folder, generics.Windows\C1.Xaml\Themes\C1TreeView.xaml, in your Application.

Customize the Contents of the Xaml file

4) Modify the contents of the xaml file as per requirement. Like here, we want customize the position(to the right) and the appearance(red and blue arrow for Expansion and Collapsion respectively) of the Arrow Style.

C1TreeView_CustomArrow

Here is how the modified part of the C1TreeView.xaml file for the above image looks like :


 .........  
 .........  
 <!-- ToggleButton @ C1TreeView Expand/Collapse Icon -->  
    <ControlTemplate x:Key="C1TreeViewToggle" TargetType="c1:C1TreeViewExpandButton" >  
 <!--Changing the Background Color of the outer grid for the Arrow to 'LightYellow'-->  
    <Grid Background="LightYellow">  
 .........  
 .........  
 <Grid x:Name="ExpandedGrid" Height="32" Width="32">  
    <!--Changing the color of the inner triangle in the Arrow to 'Red' in the Expansion state-->  
     <Path x:Name="ExpandedIcon" Data="M5.9130435,0.086956523 L5.9130435,5.9130435 L0.086956523,5.9130435 z"  
          Fill="Red"  
          Width="12" Height="12"  
          Stretch="UniformToFill"  
          VerticalAlignment="Center"/>  
      <Grid x:Name="LineExpandedIcon" Visibility="Collapsed" Background="{ThemeResource TextBoxBackgroundThemeBrush}"  
          Width="22" Height="22">  
      <Rectangle StrokeThickness="2" Stroke="{ThemeResource CheckBoxForegroundThemeBrush}" Opacity="0.4"/>  
      <Rectangle Fill="{ThemeResource CheckBoxForegroundThemeBrush}" Width="10" Height="2"/>  
     </Grid>  
 </Grid>  
 <!-- Collapse visual -->  
 <Grid x:Name="CollapsedGrid" Height="32" Width="32">  
     <!--Changing the color of the inner triangle in the Arrow to 'Blue' in the Collapsion state-->  
      <Path x:Name="CollapsedIcon" Data="M5.9130435,0.086956523 L5.9130435,5.9130435 L0.086956523,5.9130435 z"  
            Fill="Blue"  
            Width="12" Height="12"  
            Stretch="UniformToFill"  
            Style="{StaticResource TreeViewCollapsedIconStyle}"  
            Opacity="0.5"  
            Margin="0 6 6 0"/>  
      <Grid x:Name="LineCollapsedIcon" Visibility="Collapsed" Background="{ThemeResource TextBoxBackgroundThemeBrush}"  
                Width="22" Height="22">  
      <Rectangle StrokeThickness="2" Stroke="{ThemeResource CheckBoxForegroundThemeBrush}" Opacity="0.4"/>  
       <Path Data="M4,0 L6,0 L6,4 L10,4 L10,6 L6,6 L6,10 L4,10 L4,6 L0,6 L0,4 L4,4 z" Width="10" Height="10"  
             Fill="{ThemeResource CheckBoxForegroundThemeBrush}" Stretch="Fill" />  
      </Grid>  
 </Grid>  
 .........  
 .........  
 <!-- C1TreeViewItem -->  
    <Style x:Key="C1TreeViewItemStyle1" TargetType="c1:C1TreeViewItem">  
 .........  
 .........  
 <!--Shift the Expand Button to the right -> Set the Grid.Column to '1'-->  
     <c1:C1TreeViewExpandButton x:Name="ExpandButton" Grid.Column="1"  
         Background="{TemplateBinding Foreground}"  
         BorderBrush="{TemplateBinding Foreground}"  
         IsTabStop="{TemplateBinding IsTabStop}"  
         VerticalAlignment="Center"  
         IsThreeState="False"  
         Margin="0" Template="{StaticResource C1TreeViewToggle}" c1:C1NagScreen.Nag="True"/>  
 <!--But the Content Control should appear on the Left side -> Grid.Column to '0'-->  
     <ContentControl x:Name="Header" Grid.Column="0"  
         IsTabStop="{TemplateBinding IsTabStop}"  
         ContentTemplate="{TemplateBinding HeaderTemplate}"  
         FontFamily="{TemplateBinding FontFamily}"  
         FontSize="{TemplateBinding FontSize}"  
         FontStretch="{TemplateBinding FontStretch}"  
         FontStyle="{TemplateBinding FontStyle}"  
         FontWeight="{TemplateBinding FontWeight}"  
         Foreground="{TemplateBinding Foreground}"  
         HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"  
         Padding="{TemplateBinding Padding}"  
         VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">  
 .........  
 .........  


5) Add the C1TreeView.xaml file in the Application Resources :


<Application.Resources>  
 <ResourceDictionary>  
   <ResourceDictionary.MergedDictionaries>  
     <ResourceDictionary Source="C1TreeView.xaml"/>  
   </ResourceDictionary.MergedDictionaries>  
 </ResourceDictionary>  
</Application.Resources>

Use the Custom Style in your Application

6) Next, just use this style for the C1TreeViewItems, used in your Application.


   <c1:C1TreeView x:Name="Tree" Margin="50" SelectionMode="Multiple">  
       <!--Using the custom style 'C1TreeViewItemStyle1' for C1TreeViewItem objects-->  
       <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>

And, we are done !! Download Sample

MESCIUS inc.

comments powered by Disqus