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

How to increase symbol sizes in legend

GeorgeShi

Hi all,

I would like to increase symbol sizes of layers in the map legend control a bit. Any advises?

Thanks in advance!

George

Find more posts tagged with

Accepted answers

All comments

DominiqueBroux

You have to change the LegendItemTemplate in order to change the way the symbols are displayed the legend.

A first naive version, setting a fixed size for the symbol, would be :

 
<esri:Legend.LegendItemTemplate>
  <DataTemplate>
    <StackPanel Orientation="Horizontal">
      <Image Source="{Binding ImageSource}" HorizontalAlignment="Center" VerticalAlignment="Center" Height="30" Width="50" />
      <TextBlock Text="{Binding Label}" Margin="5,0,0,0" VerticalAlignment="Center" />
    </StackPanel>
  </DataTemplate>
</esri:Legend.LegendItemTemplate>

The issue with this version is that the symbol size in the legend is no more related to the symbol size in the map (always 30*50).

If you want to keep a relative size, you can use a multiplication converter to increase or decrease the symbol size with a fixed ratio:

 
<esri:Legend.LegendItemTemplate>
  <DataTemplate>
    <StackPanel Orientation="Horizontal">
      <StackPanel.Resources>
        <esri:MultiplicationConverter x:Key="multiplicationConverter" />
      </StackPanel.Resources>
      <Image x:Name="img" Source="{Binding ImageSource}" Stretch="Uniform" MinWidth="25"
            Height="{Binding Source.PixelHeight, ElementName=img, FallbackValue=25, Converter={StaticResource multiplicationConverter}, ConverterParameter=1.4}"
            Width="{Binding Source.PixelWidth, ElementName=img, FallbackValue=25, Converter={StaticResource multiplicationConverter}, ConverterParameter=1.4}"
            Margin="0,0,5,0">
      </Image>
      <TextBlock Text="{Binding Label}" Margin="5,0,0,0" VerticalAlignment="Center" />
    </StackPanel>
  </DataTemplate>
</esri:Legend.LegendItemTemplate>

Note : adapt the ConverterParameter value to your need.

GeorgeShi

Hi Dominique,

Thank you very much for the advice.

Could you give me some advices on how to increase sizes for specific layers programmatically?

When I have the "LegendItemViewMode" reference and the reference to its �??ImageSource�?� for a specific layer, can I increase image size through these references?

Your suggestions are very much appreciated.

Regards,

George Shi

DominiqueBroux

Hi George,

I am curious but why do you want to increase the symbol sizes in the legend control for some layers only?

In fact, I am just wondering whether I understood well your need.

I understood that you need to change the symbol sizes in the legend without changing anything in the map (i.e just a way to get a smaller or larger legend control without changing the map rendering)

If you need to change the symbol sizes in the map, my answer is not adapted at all. In this case you have to change the renderers and the legend will change automatically.

GeorgeShi

Hi Dominique,

For some layers (e.g. point layers with marker symbols), users want us to make the icons a little bit larger in the legend, for example the icon for �??Documents�?� sub-layer in the attached screen shot, without changing symbols showing on the map. Icons for other layers (e.g. a square for �??GeoFrame Seismic�?� in the attachment) in the legend are ok. Therefore, users want to keep them as they are.

Any advices?

Thank you again for your help.

Regards,

George

legendsymbols.jpg

DominiqueBroux

OK. I got your use case.

One option is to use the LegendItemViewModel Tag property to store the expected image size and to initialize this expected image size by code.

For example, we can store the image size as a Tuple { Height, Width}.

So your LegendItemTemplate becomes:

 
<esri:Legend.LegendItemTemplate>
  <DataTemplate>
    <StackPanel Orientation="Horizontal">
      <Image Source="{Binding ImageSource}" Stretch="Uniform" MinWidth="20"
                  Height="{Binding Tag.Item1}"
                  Width="{Binding Tag.Item2}"/>
      <TextBlock Text="{Binding Label}" Margin="5,0,0,0" VerticalAlignment="Center" />
    </StackPanel>
  </DataTemplate>
</esri:Legend.LegendItemTemplate>

And you have to initialize the tag by code in the Legend.Refreshed event handler:

 
private void Legend_Refreshed(object sender, Legend.RefreshedEventArgs e)
{
  if (e.LayerItem.LegendItems != null)
    foreach (var item in e.LayerItem.LegendItems) // loop on legendItems at the layer level
      SetTag(item, e.LayerItem.Layer);
 
  if (e.LayerItem.LayerItems != null)
    foreach (var subitem in e.LayerItem.LayerItems.Where(layerItem => layerItem.LegendItems != null).SelectMany(item => item.LegendItems)) // loop on legendItems at the sublayer level
      SetTag(subitem, e.LayerItem.Layer);
}
 
// Set the Tag with the expected size of the legend swatch
private static void SetTag(LegendItemViewModel item, Layer layer)
{
  double ratio = layer is FeatureLayer ? 1 : 1.5; // size based on the layer type (for the sample sake)
  var source = item.ImageSource as BitmapSource;
  if (source != null)
    item.Tag = new Tuple<double, double>(source.PixelHeight*ratio, source.PixelWidth*ratio);
}

Hope this helps.

GeorgeShi

It works!
Big appreciation to Dominique! Thanks a lot!!

Regards,

George Shi

DominiqueBroux

Glad that works for you.

Thansk for your appreciation.

Join the Conversation

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

Quick Links

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