topic SimpleLineSymbol Template in ArcGIS API for Silverlight Questions

SimpleLineSymbol Template

PaulHuppé — Thu, 10 Feb 2011 12:22:01 GMT

Hi,

I am trying to define a template for line symbols when they get selected. I want the lines to be highlithed and to change color when you hover over them. I have tried the following, but it does not work. I hope it is only a syntax problem which I cannot see!

            <esri:SimpleLineSymbol x:Key="ResultsLineSymbol">
                <esri:SimpleLineSymbol.ControlTemplate>
                    <ControlTemplate x:Name="CustomLineTemplate">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                    </VisualState>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimation
                                                BeginTime="0:0:0"
                                                Storyboard.TargetName="SymbolGeom"
                                                Storyboard.TargetProperty="(Line.Fill).(SolidColorBrush.Color)"
                                                To="Yellow"
                                                Duration="0:0:0">
                                            </ColorAnimation>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ColorAnimation
                                                BeginTime="0:0:0"
                                                Storyboard.TargetName="SymbolGeom"
                                                Storyboard.TargetProperty="(Line.Fill).(SolidColorBrush.Color)"
                                                To="Yellow"
                                                Duration="Forever">
                                            </ColorAnimation>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Line x:Name="SymbolGeom" Stroke="Blue" StrokeThickness="3">
                                <Line.Fill>
                                    <SolidColorBrush x:Name="theColor" Color="Aqua"></SolidColorBrush>
                                </Line.Fill>
                            </Line>
                        </Grid>
                    </ControlTemplate>
                </esri:SimpleLineSymbol.ControlTemplate>
            </esri:SimpleLineSymbol>

Re: SimpleLineSymbol Template

DominiqueBroux — Thu, 10 Feb 2011 13:28:55 GMT

The states 'Selected' and 'MouseOver' are not in the same visualstategroup.
They are in 'SelectionStates' and 'CommonStates' respectively.
So you have to define these 2 groups in your template.

Re: SimpleLineSymbol Template

PaulHuppé — Fri, 10 Dec 2021 22:53:38 GMT

Ok, I tried to create a seperate "SelectionStates" group, but the results are the same. This line symbol does not seem to be used. The results are still shown in the original color defined in the service.

            <esri:SimpleLineSymbol x:Key="ResultsLineSymbol" Color="Red" Width="3">
                <esri:SimpleLineSymbol.ControlTemplate>
                    <ControlTemplate x:Name="CustomLineTemplate">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                    </VisualState>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimation
                                                BeginTime="0:0:0"
                                                Storyboard.TargetName="SymbolGeom"
                                                Storyboard.TargetProperty="(Line.Fill).(SolidColorBrush.Color)"
                                                To="Yellow"
                                                Duration="0:0:0">
                                            </ColorAnimation>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ColorAnimation
                                                BeginTime="0:0:0"
                                                Storyboard.TargetName="SymbolGeom"
                                                Storyboard.TargetProperty="(Line.Fill).(SolidColorBrush.Color)"
                                                To="Yellow"
                                                Duration="Forever">
                                            </ColorAnimation>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Line x:Name="SymbolGeom" Width="3">
                                <Line.Fill>
                                    <SolidColorBrush x:Name="theColor" Color="Aqua"></SolidColorBrush>
                                </Line.Fill>
                            </Line>
                        </Grid>
                    </ControlTemplate>
                </esri:SimpleLineSymbol.ControlTemplate>
            </esri:SimpleLineSymbol>

In my code behind, I use the line

feature.Symbol = LayoutRoot.Resources["ResultsLineSymbol"] as LineSymbol;

to assign the desired line symbol to the features to be drawn on the graphics layer. In the map service, the line are red. After a selection, I would expect the lines to be Aqua.

Re: SimpleLineSymbol Template

PaulHuppé — Fri, 10 Dec 2021 22:53:41 GMT

I got something working. I copied the template I had for polygons which was working and modified it a little. Here is the code that works:

            <esri:SimpleLineSymbol x:Key="ResultsLineSymbol">
                <esri:SimpleLineSymbol.ControlTemplate>
                    <ControlTemplate x:Name="ResultsLineSymbolTemplate">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="Element"
                                                Storyboard.TargetProperty="(Stroke).(Color)"
                                                To="Aqua" Duration="0:0:0.1" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="Element"
                                                Storyboard.TargetProperty="(Stroke).(Color)"
                                                To="Chartreuse" Duration="0:0:0.1" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="Element"
                                                Storyboard.TargetProperty="(Stroke).(Color)"
                                                To="Yellow" Duration="0:0:0.1" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Path x:Name="Element" Stroke="Aqua" Fill="{x:Null}"
                                StrokeStartLineCap="Round" StrokeThickness="4" 
                                StrokeLineJoin="Round" StrokeEndLineCap="Round" />
                        </Grid>
                    </ControlTemplate>
                    </esri:SimpleLineSymbol.ControlTemplate>
                </esri:SimpleLineSymbol>

Re: SimpleLineSymbol Template

DominiqueBroux — Thu, 10 Feb 2011 14:57:08 GMT

Right. In your first version you had no path called 'Element' which is mandatory for a line symbol or a fill symbol.

Sorry, I should have noticed that in my first mail but I focused on the states.