XAML Fill Symbol

JoePetraglia — Wed, 27 Oct 2010 22:32:07 GMT

Hello,

For a polygon graphics layer, we are attempt to create the fill symbology in XAML to support custom �??Selected�?� and �?�Unselected�?� states. Additionally, there is a user requirement to allow a mouse over states; such has changing the color of the border of the polygon when the mouse enters the polygon.

This has been achieved following the example put forth in this thread: http://forums.esri.com/Thread.asp?c=158&f=2455&t=301808. However there are two issues that we have encountered:

1. A SolidColorBrush has been added to the Attributes of the graphic. We are attempting to databind the brush to the XAML using the dictionary converter. This is failing with the following exception: �??Cannot find a Resource with the Name/Key DictConvert�?�

<Path x:Name="Element"
              Stroke="White"
              StrokeStartLineCap="Round"
              StrokeLineJoin="Round"
              StrokeEndLineCap="Round"
              Fill="{Binding Attributes, ConverterParameter=B, Converter={StaticResource DictConvert}, Mode=OneWay}">

The resource has been placed in the Path.Resources and it appears that it cannot find the static resource.

<Path.Resources>
            <esri:DictionaryConverter x:Name="DictConvert" />
        </Path.Resources>

2. We are attempting to use multiple paths (one for each the normal, selected and mouse over states) contained within a grid. However, the polygon does not render when we use this approach.

Re: XAML Fill Symbol

DanielWalton — Thu, 28 Oct 2010 01:42:58 GMT

Which version of Silverlight and ESRI API are you using? If you're at 4.0 and 2.0+, you don't need the dictionary converter anymore. Just bind with expressions like {Binding Attributes[attributename]}. Regarding issue 2, I don't think you can use multiple paths in a polygon symbol template. The base control is a path object named "Element". Although this limits you in styling choices, you should be able to support Normal/MouseOver/Selected visual states. For example, we use the line color/thickness to indicate selection, and show a drop shadow to indicate mouse hovering.

Sample:

[HTML]<ControlTemplate
    xmlns=""http://schemas.microsoft.com/client/2007""
    xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml"">
<Path x:Name=""Element""
    Stroke=""{Binding Symbol.BorderBrush}""
    Fill=""{Binding Symbol.Fill}""
    StrokeThickness=""{Binding Symbol.BorderThickness}""
    StrokeStartLineCap=""Round""
    StrokeLineJoin=""Round""
    StrokeEndLineCap=""Round""
    Cursor=""Hand"">
    <Path.Effect><DropShadowEffect x:Name=""ElementShadow"" ShadowDepth=""0"" Color=""White"" Opacity=""0"" /></Path.Effect>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name=""SelectionStates"">
            <VisualState x:Name=""Unselected"" />
            <VisualState x:Name=""Selected"">
                <Storyboard>
                    <ColorAnimation Storyboard.TargetName=""Element""
                        Storyboard.TargetProperty=""(Path.Fill).(SolidColorBrush.Color)""
                        To=""#88FFFF00"" Duration=""00:00:00.25""/>
                    <ColorAnimation Storyboard.TargetName=""Element""
                        Storyboard.TargetProperty=""(Path.Stroke).(SolidColorBrush.Color)""
                        To=""Yellow"" Duration=""00:00:00.25""/>
                    </Storyboard>
            </VisualState>
        </VisualStateGroup>
        <VisualStateGroup x:Name=""CommonStates"">
            <VisualState x:Name=""Normal"" />
            <VisualState x:Name=""MouseOver"">
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName=""ElementShadow""
                        Storyboard.TargetProperty=""(UIElement.Opacity)""
                        To=""1"" Duration=""00:00:00.1""/>
                    </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Path></ControlTemplate>
[/HTML]

topic XAML Fill Symbol in ArcGIS API for Silverlight Questions

XAML Fill Symbol

Re: XAML Fill Symbol