I have the following XAML that animates a arrow moving on a path for an ESRI Map control. The animation works as expected, except that the animation is not invalidated when the map is zoomed in or out. If I move the animation off screen and back on screen, the animation is correctly re-synced to the scaled path. How do I setup a trigger to force the redraw when the map scale changes?
<esri:LineSymbol x:Key="tunnelSymbol">
<esri:LineSymbol.ControlTemplate>
<ControlTemplate>
<Canvas>
<Path x:Name="Element" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeLineJoin="Round" Opacity="0.5" RenderTransformOrigin="2,0" StrokeThickness="5" Stroke="#FF05AA05">
<Path.Effect>
<DropShadowEffect/>
</Path.Effect>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Selected">
</VisualState>
<VisualState x:Name="Unselected"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimation BeginTime="0" Duration="0:0:0.1" Storyboard.TargetName="Element" Storyboard.TargetProperty="(Path.StrokeThickness)" To="5"/>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation BeginTime="0" Duration="0:0:0.1" Storyboard.TargetName="Element" Storyboard.TargetProperty="(Path.StrokeThickness)" To="10"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Path>
<Path x:Name="Arrow" Stretch="Fill" Width="16" Height="16" StrokeLineJoin="Miter"
Data="M 0 -5 L 10 -5 M 5 0 L 10 -5 L 5 -10"
Stroke="Black" StrokeThickness="3">
<Path.RenderTransform>
<TransformGroup>
<TranslateTransform X="-8" Y="-8"/>
<MatrixTransform>
<MatrixTransform.Matrix>
<Matrix/>
</MatrixTransform.Matrix>
</MatrixTransform>
</TransformGroup>
</Path.RenderTransform>
<Path.Triggers>
<EventTrigger RoutedEvent="Path.Loaded">
<BeginStoryboard>
<Storyboard>
<MatrixAnimationUsingPath x:Name="MatrixAnimation" Storyboard.TargetName="Arrow"
Storyboard.TargetProperty="RenderTransform.Children[1].Matrix"
DoesRotateWithTangent="True"
Duration="0:0:5"
BeginTime="0:0:0"
RepeatBehavior="Forever" PathGeometry="{Binding Data, Source=Element, BindsDirectlyToSource=True}">
</MatrixAnimationUsingPath>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
</Canvas>
</ControlTemplate>
</esri:LineSymbol.ControlTemplate>
</esri:LineSymbol>
Related
So I have a path setup like this
<Grid x:Name="arrowPanel">
<Path x:Name="arrow" Data="M0,4 H8 M4,4 V8Z" Stroke="Black" StrokeThickness="2" Height="8" RenderTransformOrigin="0.5,0.5" Stretch="None" Width="8">
<!--Not sure what to do here -->
</Path>
</Grid>
I have a storyboard setup like this
<VisualStateGroup x:Name="ExpandStateGroup">
<VisualState x:Name="Expanded">
<Storyboard>
<!-- Something to change the data to this 'M0,5 H10'(A minus sign)-->
</Storyboard>
</VisualState>
<VisualState x:Name="Collapsed">
<Storyboard>
<!-- Something to change the data back to it's original 'M0,5 H10 M5,5 V10Z' (A plus sign)-->
</Storyboard>
</VisualState>
</VisualStateGroup>
I do not know how to alter the data aspect of the path to make these transformations.
You could use an ObjectAnimationUsingKeyFrames to "animate" the Data property of the Path:
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="arrow" Storyboard.TargetProperty="Data">
<DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame.Value>
<Geometry>M0,5 H10</Geometry>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
In order to get the results I was looking for I created two paths that occupied the same area. One with the plus sign and the other with the minus sign (The plus sign without the vertical path).
Object:
<Grid>
<Grid x:Name="plusSignPanel">
<!-- Minus -->
<Path Data="M0,4 H8" Stroke="Red" StrokeThickness="2" Height="8" RenderTransformOrigin="0.5,0.5" Stretch="None" Width="8"/>
<!-- Plus -->
<Path x:Name="plusSign" Data="M0,4 H8 M4,4 V8Z" Stroke="Black" StrokeThickness="2" Height="8" RenderTransformOrigin="0.5,0.5" Stretch="None" Width="8"/>
</Grid>
</Grid>
And then all I did was change the color from black to transparent using the coloranimation on the plus sign for expanded state and vice versa with the collapsed state:
Animation:
<VisualStateGroup x:Name="ExpandStateGroup">
<VisualState x:Name="Expanded">
<Storyboard>
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="plusSign" Storyboard.TargetProperty="(Path.Stroke).(SolidColorBrush.Color)" To="Transparent"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Collapsed">
<Storyboard>
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="plusSign" Storyboard.TargetProperty="(Path.Stroke).(SolidColorBrush.Color)" To="Black"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
So I have a Path object that is implemented as follows:
<Path x:Name="arrow" Data="M0,0L0.67,0 4,2.67 7.25,0 8,0 8,0.67 4,4 0,0.75z" Fill="Black" Height="4" RenderTransformOrigin="0.5,0.5" Stretch="None" Width="8">
<Path.RenderTransform>
<TransformGroup>
<RotateTransform Angle="0"/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
With this Path I have the following animation attached that works perfectly.
WORKING:
<VisualStateGroup x:Name="ExpandStateGroup">
<VisualState x:Name="Expanded">
<Storyboard>
<DoubleAnimation Duration="0:0:0.2" To="180" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" Storyboard.TargetName="arrow"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Collapsed">
<Storyboard>
<DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" Storyboard.TargetName="arrow"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
However when I add the color animations neither of the animations work. Also, the expand seems to happen instantaneously rather than expanding smoothly. The Collapse works fine though.
NOT WORKING:
<VisualStateGroup x:Name="ExpandStateGroup">
<VisualState x:Name="Expanded">
<Storyboard>
<ColorAnimation To="Red" Duration="0:0:0.2" Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="arrow" />
<DoubleAnimation Duration="0:0:0.2" To="180" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" Storyboard.TargetName="arrow"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Collapsed">
<Storyboard>
<ColorAnimation To="Black" Duration="0:0:0.2" Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="arrow" />
<DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" Storyboard.TargetName="arrow"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
It has to do with the coloranimation because when I try to perform the color animation by itself it doesn't work.
This is a part of the Telerik RadExpander user control.
If any other information is needed please don't hesitate to ask.
NOTE 1:
If I set the Fill color in the path declaration to black and set the collapsed fill color to green the arrow will start out as green, but as soon as I expand it turns black and never changes color again.
Note 2: When the coloranimation is set the doubleanimation never works.
I have a lot of styles for hiperlink button that are quite the same, just a different path in the template.
Here is the XAML fragment
<Style x:Key="HeatmapLinkStyle" TargetType="HyperlinkButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="HyperlinkButton">
<Grid Margin="4,2" Height="40" VerticalAlignment="Top">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0:0:0.2" To="1.5" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="element" d:IsOptimized="True"/>
<DoubleAnimation Duration="0:0:0.2" To="1.5" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="element" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="LinkStates">
<VisualState x:Name="ActiveLink">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ActiveLinkBorder" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="InactiveLink"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Width="32" Height="32" VerticalAlignment="Top">
<Path Data="M50.5,4.7500001C25.232973,4.75 4.75,25.232973 4.7500001,50.5 4.75,75.767029 25.232973,96.25 50.5,96.25 75.767029,96.25 96.25,75.767029 96.25,50.5 96.25,25.232973 75.767029,4.75 50.5,4.7500001z M50.5,0C78.390381,0 101,22.609621 101,50.5 101,78.390381 78.390381,101 50.5,101 22.609621,101 0,78.390381 0,50.5 0,22.609621 22.609621,0 50.5,0z" Stretch="Fill" Fill="#FF3FA9F5" Visibility="Visible" />
<Path x:Name="element" Data="F1M-1834.73,-354.432L-1772.06,-354.432 -1772.06,-417.099 -1834.73,-417.099 -1834.73,-354.432z M-1832.68,-385.765L-1803.39,-385.765 -1803.39,-415.052 -1774.11,-415.052 -1774.11,-385.765 -1803.39,-385.765 -1803.39,-356.484 -1832.68,-356.484 -1832.68,-385.765z" Stretch="Uniform" Fill="#FF3FA9F5" Width="16" Height="16" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<CompositeTransform ScaleY="1" ScaleX="1"/>
</Path.RenderTransform>
</Path>
<Ellipse x:Name="container" Fill="Transparent" Cursor="Hand" Height="32" Width="32"/>
</Grid>
<Border x:Name="ActiveLinkBorder" Width="32" Height="4" VerticalAlignment="Bottom" Opacity="0.5" Background="#FF3FA9F5" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The only changing part is the Data of "element" Path.
Is there a way to use just one base style and change the Path in the others?
Thanks everyone!
You can create a base style an inherit it.
here is an nice example :
basedOn Style
Hope it helps
If I do something like this to change the opacity of an Ellipse:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:1">
<VisualTransition.GeneratedEasingFunction>
<CircleEase EasingMode="EaseIn"/>
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Lit"/>
<VisualState x:Name="Unlit">
<Storyboard>
<DoubleAnimation Duration="0" To="0.225"
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="ellipse" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Ellipse x:Name="ellipse" Width="100" Height="100" Fill="Azure"/>
VisualStateManager.GoToState(this, "Unlit", true);
It works just fine.
But let's say I have a handful of Ellipses and want to apply the same StoryBoard to them, how do I do that?
<Ellipse x:Name="ellipse1" Width="100" Height="100" Fill="Azure"/>
<Ellipse x:Name="ellipse2" Width="100" Height="100" Fill="Azure"/>
<Ellipse x:Name="ellipse3" Width="100" Height="100" Fill="Azure"/>
One way would be to define multiple DoubleAnimations to the same StoryBoard:
<Storyboard>
<DoubleAnimation Duration="0" To="0.225"
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="ellipse1"
d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="0.225"
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="ellipse2"
d:IsOptimized="True"/>
</Storyboard>
But this is somewhat cumbersome when I have a dynamic number of ellipses.
Is there any more elegant way?
I'm not sure about elegant, but one way could be to animate an intermediate property, and bind the real target properties to that:
<Grid x:Name="animationTarget" Visibility="Collapsed" />
<Ellipse x:Name="ellipse1" Width="100" Height="100" Fill="Azure"
Opacity={Binding Opacity, ElementName=animationTarget}/>
<Ellipse x:Name="ellipse2" Width="100" Height="100" Fill="Azure"
Opacity={Binding Opacity, ElementName=animationTarget}/>
and
<Storyboard>
<DoubleAnimation Duration="0" To="0.225"
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="animationTarget" />
</Storyboard>
(If using an invisible extra element as an intermediate binding target doesn't seem nice it could instead be on some attached property on whatever container your ellipses are in)
I have a control that indicates the operation mode. Depending on the current mode (automatic, manual or none) it rotates several degrees to the left or right and also changes a label's content. The rotation works fine already. But the label's content doesn't show up, regardless of the current state. Is there any mistake in the control template (I simplified the template a bit by removing the third state)? Or is there anything else not the way it should be?
Thanks in advance!
<ControlTemplate TargetType="{x:Type local:OperationModeIndicator}">
<Grid x:Name="rootGrid" RenderTransformOrigin="0.5,0.525">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="OperationModeStates">
<VisualState x:Name="None">
<Storyboard>
<StringAnimationUsingKeyFrames Storyboard.TargetName="contentLabel" Storyboard.TargetProperty="Content" >
<DiscreteStringKeyFrame Value="" />
</StringAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" Storyboard.TargetName="rootGrid" >
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" Storyboard.TargetName="contentLabel">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Automatic">
<Storyboard>
<StringAnimationUsingKeyFrames Storyboard.TargetName="contentLabel" Storyboard.TargetProperty="Content" >
<DiscreteStringKeyFrame Value="A" />
</StringAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" Storyboard.TargetName="rootGrid">
<EasingDoubleKeyFrame KeyTime="0" Value="-30"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" Storyboard.TargetName="contentLabel">
<EasingDoubleKeyFrame KeyTime="0" Value="30"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.RenderTransform>
<TransformGroup>
<RotateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<Label x:Name="contentLabel" Foreground="#FFDA1D1D" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="48" RenderTransformOrigin="0.5,0.525" >
<Label.RenderTransform>
<TransformGroup>
<RotateTransform/>
</TransformGroup>
</Label.RenderTransform>
</Label>
<Path Stroke="Gray" StrokeThickness="5">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="35 10" >
<ArcSegment Point="65 10" Size="45 45" RotationAngle="0" IsLargeArc="True" />
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
<Line X1="2.5" X2="2.5" Y1="0" Y2="20" StrokeThickness="5" Stroke="Gray" HorizontalAlignment="Center" />
</Grid>
</ControlTemplate>
The animation works as expected. It's Blend that doesn't show it. Anyway, the reason is still unknown.