nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Control Template for the Legend - restyling the vertical scrollbar

BobNichols

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!

Encuentra más publicaciones etiquetadas con

Accepted answers

DominiqueBroux

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.

All comments

DominiqueBroux

BobNichols

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!

BobNichols

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]

Legend.JPG

DominiqueBroux

Nice 🙂

/Dominique

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.