Select to view content in your preferred language

SimpleLineSymbol Template

1321
4
02-10-2011 04:22 AM
PaulHuppé
Deactivated User
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>
0 Kudos
4 Replies
DominiqueBroux
Esri Frequent Contributor
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.
0 Kudos
PaulHuppé
Deactivated User
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.
0 Kudos
PaulHuppé
Deactivated User
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>
0 Kudos
DominiqueBroux
Esri Frequent Contributor
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.
0 Kudos