Control Template for the Legend - restyling the vertical scrollbar

827
4
Jump to solution
11-20-2013 09:32 AM
BobNichols
New Contributor III
I need some help with re-templating the Legend Control, specifically the vertical scrollbar.  From what I have read the Legend uses a treeview to display content and the treeview contains a scroll viewer.  I have a customized scroll viewer that uses the style of vertical scrollbar that I want.  How does one go about changing the template of the treeview used for the legend control to use my custom scrollviewer.  The only reference in the template for the Legend to treeview is for TreeViewExtended, shown below:

<Setter Property="Template">      <Setter.Value>       <ControlTemplate TargetType="esri:Legend">        <esriToolkitPrimitives:TreeViewExtended BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" ItemsSource="{TemplateBinding LayerItemsSource}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">         <esriToolkitPrimitives:TreeViewExtended.ItemTemplate>          <sdk:HierarchicalDataTemplate ItemsSource="{Binding LayerItemsSource}">           <ContentPresenter ContentTemplate="{Binding Template}" Content="{Binding}"/>          </sdk:HierarchicalDataTemplate>         </esriToolkitPrimitives:TreeViewExtended.ItemTemplate>        </esriToolkitPrimitives:TreeViewExtended>       </ControlTemplate>      </Setter.Value>     </Setter>


I am having trouble figuring out the syntax to add a new TreeView, any examples and help would be much appreciated.

Thanks!
0 Kudos
1 Solution

Accepted Solutions
DominiqueBroux
Esri Frequent Contributor
TreeViewExtended has been developed to support the binding to 'IsExpanded' property.

Now that Silverlight supports binding in the style setter, you could get the same result with the standard TreeView (no more need to subclass it).
So you can replace TreeViewExtended by TreeView and customize it as you want.

View solution in original post

0 Kudos
4 Replies
DominiqueBroux
Esri Frequent Contributor
TreeViewExtended has been developed to support the binding to 'IsExpanded' property.

Now that Silverlight supports binding in the style setter, you could get the same result with the standard TreeView (no more need to subclass it).
So you can replace TreeViewExtended by TreeView and customize it as you want.
0 Kudos
BobNichols
New Contributor III
TreeViewExtended has been developed to support the binding to 'IsExpanded' property.

Now that Silverlight supports binding in the style setter, you could get the same result with the standard TreeView (no more need to subclass it).
So you can replace TreeViewExtended by TreeView and customize it as you want.


Thanks for your reply,

I swapped out the TreeViewExtended and replaced it with TreeView but no items appear in the legend.  Below is my modification to the Legend, I also tried it without the ItemsControl within the TreeView with no luck.

<Setter Property="Template">
   <Setter.Value>
      <ControlTemplate TargetType="esri:Legend">
         <sdk:TreeView Style="{StaticResource TreeViewStyle1}">
 <ItemsControl  ItemsSource="{Binding LayerItemsSource}">
     <ContentPresenter ContentTemplate="{Binding Template}" Content="{Binding}"/>
 </ItemsControl>
         </sdk:TreeView>
      </ControlTemplate>
    </Setter.Value>


Below is my TreeViewStyle1

<Style x:Key="TreeViewStyle1" TargetType="sdk:TreeView">
    <Setter Property="Background" Value="Black"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="VerticalContentAlignment" Value="Top"/>
    <Setter Property="Cursor" Value="Arrow"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Padding" Value="1"/>
    <Setter Property="BorderBrush" Value="#FF000000"/>
    <Setter Property="IsTabStop" Value="True"/>
    <Setter Property="TabNavigation" Value="Once"/>
    <Setter Property="Template">
     <Setter.Value>
      <ControlTemplate TargetType="sdk:TreeView">
       <Grid>
        <VisualStateManager.VisualStateGroups>
         <VisualStateGroup x:Name="CommonStates">
          <VisualState x:Name="Normal"/>
          <VisualState x:Name="MouseOver"/>
          <VisualState x:Name="Pressed"/>
          <VisualState x:Name="Disabled"/>
         </VisualStateGroup>
         <VisualStateGroup x:Name="FocusStates">
          <VisualState x:Name="Unfocused"/>
          <VisualState x:Name="Focused"/>
         </VisualStateGroup>
         <VisualStateGroup x:Name="ValidationStates">
          <VisualState x:Name="Valid"/>
          <VisualState x:Name="InvalidUnfocused">
           <Storyboard>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Validation">
             <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
            </ObjectAnimationUsingKeyFrames>
           </Storyboard>
          </VisualState>
          <VisualState x:Name="InvalidFocused">
           <Storyboard>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Validation">
             <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsOpen" Storyboard.TargetName="ValidationToolTip">
             <DiscreteObjectKeyFrame KeyTime="0">
              <DiscreteObjectKeyFrame.Value>
               <System:Boolean>True</System:Boolean>
              </DiscreteObjectKeyFrame.Value>
             </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
           </Storyboard>
          </VisualState>
         </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2">
         <Border Background="{TemplateBinding Background}" Margin="1" Padding="{TemplateBinding Padding}">
          <ScrollViewer Style="{StaticResource BlendScrollViewerStyle}" x:Name="ScrollViewer" BorderBrush="Transparent" BorderThickness="0" Background="{x:Null}" HorizontalScrollBarVisibility="Auto" IsTabStop="False" TabNavigation="Once" VerticalScrollBarVisibility="Auto">
           <ItemsPresenter Margin="5"/>
          </ScrollViewer>
         </Border>
        </Border>
        <Border x:Name="Validation" BorderBrush="#FFDB000C" BorderThickness="{TemplateBinding BorderThickness}" Grid.Column="1" CornerRadius="2" Visibility="Collapsed">
         <ToolTipService.ToolTip>
          <ToolTip x:Name="ValidationToolTip" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" IsHitTestVisible="True" Placement="Right" PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Template="{StaticResource CommonValidationToolTipTemplate}"/>
         </ToolTipService.ToolTip>
         <Grid Background="Transparent" HorizontalAlignment="Right" Height="10" Margin="0,-4,-4,0" VerticalAlignment="Top" Width="10">
          <Path Data="M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 Z" Fill="#FFDC000C" Margin="-1,3,0,0"/>
          <Path Data="M 0,0 L2,0 L 8,6 L8,8" Fill="#FFFFFFFF" Margin="-1,3,0,0"/>
         </Grid>
        </Border>
       </Grid>
      </ControlTemplate>
     </Setter.Value>
    </Setter>
   </Style>


Thanks for your help!
0 Kudos
BobNichols
New Contributor III
I got it to work!

<Setter Property="Template">
     <Setter.Value>
      <ControlTemplate TargetType="esri:Legend">
       <sdk:TreeView Style="{StaticResource TreeViewStyle1}">
        <esriToolkitPrimitives:TreeViewExtended BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" ItemsSource="{TemplateBinding LayerItemsSource}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
         <esriToolkitPrimitives:TreeViewExtended.ItemTemplate>
          <sdk:HierarchicalDataTemplate ItemsSource="{Binding LayerItemsSource}">
           <ContentPresenter ContentTemplate="{Binding Template}" Content="{Binding}"/>
          </sdk:HierarchicalDataTemplate>
         </esriToolkitPrimitives:TreeViewExtended.ItemTemplate>
        </esriToolkitPrimitives:TreeViewExtended>
       </sdk:TreeView>
      </ControlTemplate>
     </Setter.Value>
    </Setter>


Thank you for your help, here is the end result!

[ATTACH=CONFIG]29270[/ATTACH]
0 Kudos
DominiqueBroux
Esri Frequent Contributor
Nice 🙂

/Dominique
0 Kudos