topic Re: Control Template for the Legend - restyling the vertical scrollbar in ArcGIS API for Silverlight Questions

Control Template for the Legend - restyling the vertical scrollbar

BobNichols — Wed, 20 Nov 2013 17:32:45 GMT

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!

Re: Control Template for the Legend - restyling the vertical scrollbar

DominiqueBroux — Thu, 21 Nov 2013 11:47:47 GMT

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.

Re: Control Template for the Legend - restyling the vertical scrollbar

BobNichols — Sat, 11 Dec 2021 10:39:12 GMT

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!

Re: Control Template for the Legend - restyling the vertical scrollbar

BobNichols — Sat, 11 Dec 2021 10:39:15 GMT

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]

Re: Control Template for the Legend - restyling the vertical scrollbar

DominiqueBroux — Fri, 22 Nov 2013 11:08:29 GMT

Nice 🙂

/Dominique