Legend Images Getting Clipped for Graphics Layer with Unique Value Renderer

DavidMarley — Fri, 20 Jul 2012 22:11:58 GMT

I am having an issue with the legend swatches for a graphics layer. The graphics layer uses a UniqueValueRenderer to symbolize point data using custom marker symbols. The issue is that in the legend the swatches/images are getting clipped. I can see from some debugging that the images are 20x20 pixles, and my marker symbols are larger than that (32x28) and thus they are getting clipped.

I have tried a number of things at this point, all to no avail. Among other things, I have tried overriding the LegendItemTemplate for the Legend and changing image size, image stretching, stackpanel height and nothing helps. For example if I change the image size, then the image is bigger but it is still clipped - its just a stretched version of the original image. It's clear that the underlying layer is producing a 20x20 image that is clipped, so by the time it gets to the LegendItemTemplate it is too late to correct the problem - at least as far as I can tell.

I have managed to remove the legend items from the legend for this particular layer, but that is not what I want...I'm just doing that because of this clipping issue.

See attached image and various code/XAML snippets below. Note that in addition to the custom marker symbol below, I've tried this with a much simpler (but still same size) symbol and the swatch is still getting clipped in the legend.

Any help is much appreciated - I'm really tearing my hair out over this one.

Code snippet - Custom Marker Symbol

 public class CADSymbol : ESRI.ArcGIS.Client.Symbols.MarkerSymbol  {   public static readonly DependencyProperty ColorProperty = DependencyProperty.Register("Color", typeof(Brush), typeof(CADSymbol), null);    public CADSymbol(Brush brush)   {    this.Color = brush;    ResourceDictionary resDictionary = new ResourceDictionary();    resDictionary.Source = new Uri("/SMART;component/Symbols/EsriSymbols.xaml", UriKind.Relative);    ControlTemplate = resDictionary["CADFeedSymbolBase"] as ControlTemplate;    // set offsets such that symbol is centered on point    double symbolWidth = Convert.ToDouble(resDictionary["CadSymbolWidth"]);    double symbolHeight = Convert.ToDouble(resDictionary["CadSymbolHeight"]);    this.OffsetX = symbolWidth / 2.0;    this.OffsetY = symbolHeight / 2.0;   }    public Brush Color   {    get    {     return (Brush)GetValue(ColorProperty);    }    set    {     SetValue(ColorProperty, value);    }   }    public ESRI.ArcGIS.Client.Symbols.Symbol GetSymbol(ESRI.ArcGIS.Client.Graphic graphic)   {    return this;   }   }

XAML Snippet - Content template for custom marker symbol

    <system:Double x:Key="CadSymbolWidth">32</system:Double>     <system:Double x:Key="CadSymbolHeight">28</system:Double>     <ControlTemplate x:Key="CADFeedSymbolBase" >         <Grid RenderTransformOrigin="0.5,0.5">             <Grid.RenderTransform>                 <TransformGroup>                     <ScaleTransform ScaleX="1" ScaleY="1" />                 </TransformGroup>             </Grid.RenderTransform>             <VisualStateManager.VisualStateGroups>                 <VisualStateGroup x:Name="CommonStates">                     <VisualState x:Name="Normal" />                     <VisualState x:Name="MouseOver">                         <Storyboard>                             <DoubleAnimation  Storyboard.TargetName="MouseoverElement" Storyboard.TargetProperty="Opacity" From="0.0" To="1.0" Duration="0:0:0.1" />                         </Storyboard>                     </VisualState>                 </VisualStateGroup>             </VisualStateManager.VisualStateGroups>             <Canvas HorizontalAlignment="Left" VerticalAlignment="Top">                 <Path x:Name="MouseoverElement" Width="30" Height="26" Data="F1 M 1.12181e-007,10.2667L 5.84208,0L 11.48,10.2667L 1.12181e-007,10.2667 Z "                        Canvas.Left="1.831" Canvas.Top="1.594" UseLayoutRounding="False"                        Stretch="Fill" Fill="#FFE41B1B" StrokeThickness="0" Opacity="0" >                     <Path.Effect>                         <DropShadowEffect BlurRadius="42" ShadowDepth="0" Color="#FFFF0000" Opacity="0.85"/>                     </Path.Effect>                 </Path>                  <Path x:Name="BackgroundColor" Width="30" Height="26" Data="F1 M 1.12181e-007,10.2667L 5.84208,0L 11.48,10.2667L 1.12181e-007,10.2667 Z "                        Canvas.Left="1.831" Canvas.Top="1.594" UseLayoutRounding="False" Stretch="Fill"                        Fill="{Binding Symbol.Color}" StrokeThickness="0" >                     <Path.Effect>                         <DropShadowEffect BlurRadius="8" ShadowDepth="3" Color="#FF393939" Opacity="0.85"/>                     </Path.Effect>                 </Path>                 <Path Width="{StaticResource CadSymbolWidth}" Height="{StaticResource CadSymbolHeight}"                        Data="F1 M 1.12181e-007,10.2667L 5.84208,0L 11.48,10.2667L 1.12181e-007,10.2667 Z "                        Canvas.Left="0.818" Canvas.Top="0.607" UseLayoutRounding="False" Stretch="Fill" StrokeThickness="2" StrokeLineJoin="Round" >                     <Path.Fill>                         <RadialGradientBrush RadiusX="0.564909" RadiusY="0.564909" Center="0.422,0.513" GradientOrigin="0.422,0.513">                             <RadialGradientBrush.GradientStops>                                 <GradientStop Color="#A4FFFFFF" Offset="0"/>                                 <GradientStop Color="#52FFFFFF" Offset="0.40678"/>                                 <GradientStop Color="#00FFFBFB" Offset="1"/>                             </RadialGradientBrush.GradientStops>                             <RadialGradientBrush.RelativeTransform>                                 <TransformGroup/>                             </RadialGradientBrush.RelativeTransform>                         </RadialGradientBrush>                     </Path.Fill>                     <Path.Stroke>                         <LinearGradientBrush EndPoint="0.967,1.005" StartPoint="0.203,0.105">                             <GradientStop Color="#FFE2E2E2"/>                             <GradientStop Color="#FFB6B5B5" Offset="1"/>                         </LinearGradientBrush>                     </Path.Stroke>                     <Path.Effect>                         <DropShadowEffect x:Name="MouseOverEffect" BlurRadius="15" Color="Red" Opacity="0" ShadowDepth="2" Direction="-60" />                     </Path.Effect>                 </Path>                                  <TextBlock Margin="13,10,0,0" TextWrapping="NoWrap" Text="{Binding Attributes[Priority]}" FontWeight="Bold" FontFamily="Arial Unicode MS" FontSize="12"  />             </Canvas>         </Grid>     </ControlTemplate>

Code Snippet - Setting up the Unique Value Renderer and UniqueValueInfos

UniqueValueRenderer renderer = new UniqueValueRenderer(); renderer.Field = "Priority";  renderer.Infos.Add(new UniqueValueInfo {  Symbol = new CADSymbol(new SolidColorBrush(Colors.Red)),  Value = "1",  Label = "Priority 1",  Description = "Priority 1 CAD Call" }); renderer.Infos.Add(new UniqueValueInfo {  Symbol = new CADSymbol(new SolidColorBrush(Colors.Orange)),  Value = "2",  Label = "Priority 2",  Description = "Priority 2 CAD Call" }); renderer.Infos.Add(new UniqueValueInfo {  Symbol = new CADSymbol(new SolidColorBrush(Colors.Yellow)),  Value = "3",  Label = "Priority 3",  Description = "Priority 3 CAD Call" }); renderer.Infos.Add(new UniqueValueInfo {  Symbol = new CADSymbol(new SolidColorBrush(Colors.Green)),  Value = "4",  Label = "Priority 4",  Description = "Priority 4 CAD Call" });  // assign rendered to graphics layer graphicsLayerCadFeed.Renderer = renderer;

XAML Snippet (unsuccessful) attempts to override LegendItemTemplate

<esri:Legend.LegendItemTemplate>     <DataTemplate>         <StackPanel Orientation="Horizontal" > <!--Height="40"-->             <!--Stretch="None"-->             <Image Height="40" Source="{Binding ImageSource}"></Image>             <ContentControl Content="{Binding Label}" VerticalAlignment="Center" Margin="6,0,0,0" />         </StackPanel>     </DataTemplate> </esri:Legend.LegendItemTemplate>

[ATTACH=CONFIG]16295[/ATTACH]

Re: Legend Images Getting Clipped for Graphics Layer with Unique Value Renderer

DominiqueBroux — Sat, 21 Jul 2012 09:14:20 GMT

The legend control doesn't support well symbols defined with a Canvas because we can't know easily the visible extent of the symbol.

The workaround might be either to set explicitely the symbol size of the main grid :

<Grid RenderTransformOrigin="0.5,0.5" Width="{StaticResource CadSymbolWidth}" Height="{StaticResource CadSymbolHeight}"  >

or, even simpler, just remove the Canvas should work as well.

Re: Legend Images Getting Clipped for Graphics Layer with Unique Value Renderer

DavidMarley — Mon, 23 Jul 2012 16:10:30 GMT

Thanks Dominique that worked. In fact, both of your suggestions worked. I went ahead and implemented both in my particular case.

Much appreciated!

Dave

topic Re: Legend Images Getting Clipped for Graphics Layer with Unique Value Renderer in ArcGIS API for Silverlight Questions

Legend Images Getting Clipped for Graphics Layer with Unique Value Renderer

Re: Legend Images Getting Clipped for Graphics Layer with Unique Value Renderer

Re: Legend Images Getting Clipped for Graphics Layer with Unique Value Renderer