Community
Select to view content in your preferred language

How do I change the visual state of an esri Marker symbol?

865
2
08-09-2012 05:32 AM
BrianMulcahy
by
Occasional Contributor
‎08-09-2012 05:32 AM
Currently I use the example in the SDK to 'animate' my marker symbol when it is placed.I do not know how to programmatically change the visual state of the marker symbol. I tried using visualstatemanager.gotostate(this, "Selected", true) but ran into problems because I cannot seem to link to the marker symbol.

Below is the xaml code for the marker symbol. How can I access it in the code behind it, to either change the state or duration of the state to begin and end when I want it to, instead of a user click/mouse over event?


<esri:MarkerSymbol x:Name="startingpointsymbol" x:Key="StartMarkerSymbol" >
                <esri:MarkerSymbol.ControlTemplate>
                <ControlTemplate x:Name="AnimateStartmarker">
                    <Canvas>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="MouseOver">

                                </VisualState>
                                <!--If normal state is not specified, the animation will 
              keep going until a mouse out. Keep it empty to transition back to original symbol. -->
                                <VisualState x:Name="Normal" />
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected">
                                    <Storyboard  RepeatBehavior="ForEver">

                                        <DoubleAnimation BeginTime="0"
                 Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
                 From="1" To="10" Duration="00:00:01" />

                                        <DoubleAnimation BeginTime="0"
                 Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
                 From="1" To="10" Duration="00:00:01" />

                                        <DoubleAnimation BeginTime="0"
                 Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.Opacity)"
                 From="1" To="0" Duration="00:00:01" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Selected" />
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:.5"/>
                                    <VisualTransition From="Unselected" To="Selected" />
                                </VisualStateGroup.Transitions>
                            </VisualStateGroup>

                        </VisualStateManager.VisualStateGroups>
                        <!--Strobe ellipse-->
                        <!--Note that IsHitTestVisible="False" on the strobe symbol,
        so only the static ellipse will trigger mouse over/mouse out-->
                        <Ellipse Height="10" Width="10" Canvas.Left="-5" Canvas.Top="-5" 
           RenderTransformOrigin="0.5,0.5" x:Name="ellipse"
           IsHitTestVisible="False"
           >
                            <Ellipse.RenderTransform>
                                <ScaleTransform />
                            </Ellipse.RenderTransform>
                            <Ellipse.Fill>
                                <RadialGradientBrush>
                                        <GradientStop Color="#00800080" />
                                        <GradientStop Color="#FF800080" Offset="0.25"/>
                                        <GradientStop Color="#00800080" Offset="0.5"/>
                                        <GradientStop Color="#FF800080" Offset="0.75"/>
                                        <GradientStop Color="#00800080" Offset="1"/>
                                </RadialGradientBrush>
                            </Ellipse.Fill>
                        </Ellipse>
                        <!--Static symbol on top-->
                        <Ellipse Height="10" Width="10" Canvas.Left="-5" Canvas.Top="-5" 
           Fill="#FFFF0000" x:Name="ellipse1"/>
                    </Canvas>
                </ControlTemplate>
                </esri:MarkerSymbol.ControlTemplate>
            </esri:MarkerSymbol>


I just want to change the state of Selected to UnSelected and vica versa. The way I do it now is with a mouse button event shown below.

 private void GraphicsLayer_MouseLeftButtonDown(object sender, ESRI.ArcGIS.Client.GraphicMouseButtonEventArgs e)
        {
            if (e.Graphic.Selected)
                e.Graphic.UnSelect();
            else
                e.Graphic.Select();
        }
0 Kudos
2 Replies
vipulsoni
by
Regular Contributor
‎08-11-2012 09:58 PM
Currently I use the example in the SDK to 'animate' my marker symbol when it is placed.I do not know how to programmatically change the visual state of the marker symbol. I tried using visualstatemanager.gotostate(this, "Selected", true) but ran into problems because I cannot seem to link to the marker symbol.

Below is the xaml code for the marker symbol. How can I access it in the code behind it, to either change the state or duration of the state to begin and end when I want it to, instead of a user click/mouse over event?


<esri:MarkerSymbol x:Name="startingpointsymbol" x:Key="StartMarkerSymbol" >
                <esri:MarkerSymbol.ControlTemplate>
                <ControlTemplate x:Name="AnimateStartmarker">
                    <Canvas>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="MouseOver">

                                </VisualState>
                                <!--If normal state is not specified, the animation will 
              keep going until a mouse out. Keep it empty to transition back to original symbol. -->
                                <VisualState x:Name="Normal" />
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected">
                                    <Storyboard  RepeatBehavior="ForEver">

                                        <DoubleAnimation BeginTime="0"
                 Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
                 From="1" To="10" Duration="00:00:01" />

                                        <DoubleAnimation BeginTime="0"
                 Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
                 From="1" To="10" Duration="00:00:01" />

                                        <DoubleAnimation BeginTime="0"
                 Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.Opacity)"
                 From="1" To="0" Duration="00:00:01" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Selected" />
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:.5"/>
                                    <VisualTransition From="Unselected" To="Selected" />
                                </VisualStateGroup.Transitions>
                            </VisualStateGroup>

                        </VisualStateManager.VisualStateGroups>
                        <!--Strobe ellipse-->
                        <!--Note that IsHitTestVisible="False" on the strobe symbol,
        so only the static ellipse will trigger mouse over/mouse out-->
                        <Ellipse Height="10" Width="10" Canvas.Left="-5" Canvas.Top="-5" 
           RenderTransformOrigin="0.5,0.5" x:Name="ellipse"
           IsHitTestVisible="False"
           >
                            <Ellipse.RenderTransform>
                                <ScaleTransform />
                            </Ellipse.RenderTransform>
                            <Ellipse.Fill>
                                <RadialGradientBrush>
                                        <GradientStop Color="#00800080" />
                                        <GradientStop Color="#FF800080" Offset="0.25"/>
                                        <GradientStop Color="#00800080" Offset="0.5"/>
                                        <GradientStop Color="#FF800080" Offset="0.75"/>
                                        <GradientStop Color="#00800080" Offset="1"/>
                                </RadialGradientBrush>
                            </Ellipse.Fill>
                        </Ellipse>
                        <!--Static symbol on top-->
                        <Ellipse Height="10" Width="10" Canvas.Left="-5" Canvas.Top="-5" 
           Fill="#FFFF0000" x:Name="ellipse1"/>
                    </Canvas>
                </ControlTemplate>
                </esri:MarkerSymbol.ControlTemplate>
            </esri:MarkerSymbol>


I just want to change the state of Selected to UnSelected and vica versa. The way I do it now is with a mouse button event shown below.

 private void GraphicsLayer_MouseLeftButtonDown(object sender, ESRI.ArcGIS.Client.GraphicMouseButtonEventArgs e)
        {
            if (e.Graphic.Selected)
                e.Graphic.UnSelect();
            else
                e.Graphic.Select();
        }


Hi,

To change the state it is possible to do this by -

VisualStateManager.GoToState(this,"visual state name",true);


code under some event --
VisualStateManager.GoToState(this,"MouseOver",true);
0 Kudos
BrianMulcahy
by
Occasional Contributor
‎08-13-2012 10:25 AM
Hi,

To change the state it is possible to do this by -

VisualStateManager.GoToState(this,"visual state name",true);


code under some event --
VisualStateManager.GoToState(this,"MouseOver",true);



See that was my first inclination but for some reason it is not working.

I have my code as follows.

 private void GeoprocessorTask_JobCompleted(object sender, JobInfoEventArgs e)
        {
            AnimateStartMarker();
            Geoprocessor geoprocessorTask = sender as Geoprocessor;
            geoprocessorTask.GetResultDataCompleted += (s1, ev1) => BLAH


Which since it is being animated at the moment in the unselected state I want the AnimateStartMarker to fire to change to Selected state to stop animation.

    private void AnimateStartMarker()
        {
            VisualStateManager.GoToState(this, "Selected", true);

        }


Here is the startmarkersymbol code again.

            <esri:MarkerSymbol x:Name="startingpointsymbol" x:Key="StartMarkerSymbol" >
                <esri:MarkerSymbol.ControlTemplate>
                <ControlTemplate x:Name="AnimateStartmarker">
                    <Canvas>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="MouseOver">

                                </VisualState>
                                <!--If normal state is not specified, the animation will 
              keep going until a mouse out. Keep it empty to transition back to original symbol. -->
                                <VisualState x:Name="Normal" />
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected">
                                    <Storyboard  RepeatBehavior="ForEver">

                                        <DoubleAnimation BeginTime="0"
                 Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
                 From="1" To="10" Duration="00:00:01" />

                                        <DoubleAnimation BeginTime="0"
                 Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
                 From="1" To="10" Duration="00:00:01" />

                                        <DoubleAnimation BeginTime="0"
                 Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.Opacity)"
                 From="1" To="0" Duration="00:00:01" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Selected" />
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.5"/>
                                    <VisualTransition From="Unselected" To="Selected" />
                                </VisualStateGroup.Transitions>
                            </VisualStateGroup>

                        </VisualStateManager.VisualStateGroups>
                        <!--Strobe ellipse-->
                        <!--Note that IsHitTestVisible="False" on the strobe symbol,
        so only the static ellipse will trigger mouse over/mouse out-->
                        <Ellipse Height="10" Width="10" Canvas.Left="-5" Canvas.Top="-5" 
           RenderTransformOrigin="0.5,0.5" x:Name="ellipse"
           IsHitTestVisible="False"
           >
                            <Ellipse.RenderTransform>
                                <ScaleTransform />
                            </Ellipse.RenderTransform>
                            <Ellipse.Fill>
                                <RadialGradientBrush>
                                        <GradientStop Color="#00800080" />
                                        <GradientStop Color="#FF800080" Offset="0.25"/>
                                        <GradientStop Color="#00800080" Offset="0.5"/>
                                        <GradientStop Color="#FF800080" Offset="0.75"/>
                                        <GradientStop Color="#00800080" Offset="1"/>
                                </RadialGradientBrush>
                            </Ellipse.Fill>
                        </Ellipse>
                        <!--Static symbol on top-->
                        <Ellipse Height="10" Width="10" Canvas.Left="-5" Canvas.Top="-5" 
           Fill="#FFFF0000" x:Name="ellipse1"/>
                    </Canvas>
                </ControlTemplate>
                </esri:MarkerSymbol.ControlTemplate>
            </esri:MarkerSymbol>


I have a feeling it is something simple but I can't seem to get it to run correctly.
0 Kudos