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.
Related
I am from a Motion Graphics background and I am new to Expression Blend.
I will try to explain what exactly I want to achieve.
I created an animation (storyboard), of a 'Polygon - Star'. This Polygon-Star is placed within a Grid (x:Name="vbGrid").
I made this Grid (x:Name="vbGrid") into a Visual Brush Resource.
I created another design object within another Grid (x:Name="OpMaskGrid"), and applied this Visual Brush as an Opacity-Mask for the Grid.
The storyboard gets triggered On Load of the window when I run the application. Till here everything is fine.
I created a Button Style. This is where I am struggling...
I want to place this Grid (x:Name="OpMaskGrid") within the Button Style.
I want to run this Visual Brush Effect - On Mouse Over of the Button. (NOT ON LOAD OF THE WINDOW)
How can I achieve this? Please Help.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:LOBTest"
xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" x:Class="LOBTest.MainWindow"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Storyboard x:Key="vbStoryBoard">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Star">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="3.5"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="Star">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="3.5"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="Star">
<EasingDoubleKeyFrame KeyTime="0" Value="-250"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="Star">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="-2.667"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="Star">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="-11.333"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<VisualBrush x:Key="VisualBrushStarAnim" Visual="{Binding ElementName=vbGrid}"/>
<Style x:Key="SimpleButton" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid >
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.3">
<VisualTransition.GeneratedEasingFunction>
<CubicEase EasingMode="EaseOut"/>
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
<EasingColorKeyFrame KeyTime="0" Value="#FF1F7385"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="rectangle">
<EasingDoubleKeyFrame KeyTime="0" Value="1.11"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="rectangle">
<EasingDoubleKeyFrame KeyTime="0" Value="1.11"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
<EasingColorKeyFrame KeyTime="0" Value="Aqua"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="rectangle">
<EasingDoubleKeyFrame KeyTime="0" Value="1.03"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="rectangle">
<EasingDoubleKeyFrame KeyTime="0" Value="1.03"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
<EasingColorKeyFrame KeyTime="0" Value="#FF01DEFF"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="rectangle" Stroke="#7F1F7385" Fill="#FF7FE8FF" RadiusX="10" RadiusY="10" StrokeThickness="2" RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
<Grid x:Name="OpMaskGrid1" Background="#FF0598A6" Grid.Column="2" Opacity="0.9">
<Grid.OpacityMask>
<VisualBrush Visual="{Binding ElementName=vbGrid}" Stretch="None"/>
</Grid.OpacityMask>
<Rectangle Width="20" Fill="#FFFF8000" />
<Rectangle Width="20" Fill="#FFFF8000" RenderTransformOrigin="0.5,0.5" >
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="90"/>
<TranslateTransform/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
<ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsDefaulted" Value="true"/>
<Trigger Property="IsMouseOver" Value="true"/>
<Trigger Property="IsPressed" Value="true"/>
<Trigger Property="IsEnabled" Value="false"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource vbStoryBoard}"/>
</EventTrigger>
</Window.Triggers>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid x:Name="vbGrid" Width="100" Height="100" ClipToBounds="True" >
<ed:RegularPolygon x:Name="Star" InnerRadius="0.45" PointCount="5" Stretch="Uniform" RenderTransformOrigin="0.5,0.5" Fill="Black">
<ed:RegularPolygon.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</ed:RegularPolygon.RenderTransform>
</ed:RegularPolygon>
</Grid>
<Grid x:Name="OpMaskGrid" Background="#FF0598A6" Grid.Column="2">
<Grid.OpacityMask>
<VisualBrush Visual="{Binding ElementName=vbGrid}" Stretch="None"/>
</Grid.OpacityMask>
<Rectangle Width="20" Fill="#FFFF8000" />
<Rectangle Width="20" Fill="#FFFF8000" RenderTransformOrigin="0.5,0.5" >
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="90"/>
<TranslateTransform/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
<Button Grid.Column="1" Grid.Row="1" Width="100" Height="100" Style="{DynamicResource SimpleButton}" Content="VB BUTTON" FontWeight="Bold"/>
</Grid>
You can define the VisualBrush inline in your button's style, something like this:
<!--...-->
<Rectangle x:Name="rectangle" Stroke="#7F1F7385" Fill="#FF7FE8FF" RadiusX="10" RadiusY="10" StrokeThickness="2" RenderTransformOrigin="0.5,0.5">
<!--...-->
</Rectangle>
<Grid Background="#FF0598A6" Grid.Column="2" Opacity="0.9">
<Grid.OpacityMask>
<VisualBrush Stretch="None">
<VisualBrush.Visual>
<Grid x:Name="vbGrid" Width="100" Height="100" ClipToBounds="True" >
<ed:RegularPolygon x:Name="Star" InnerRadius="0.45" PointCount="5" Stretch="Uniform" RenderTransformOrigin="0.5,0.5" Fill="Black">
<ed:RegularPolygon.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</ed:RegularPolygon.RenderTransform>
</ed:RegularPolygon>
</Grid>
</VisualBrush.Visual>
</VisualBrush>
</Grid.OpacityMask>
<!--...-->
</Grid>
And in control template, use a trigger to start your storyboard:
<ControlTemplate.Triggers>
<!--...-->
<Trigger Property="IsMouseOver" Value="true">
<Trigger.EnterActions>
<BeginStoryboard x:Name="Storyboard" Storyboard="{StaticResource vbStoryBoard}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<StopStoryboard BeginStoryboardName="Storyboard"/>
</Trigger.ExitActions>
</Trigger>
<!--...-->
</ControlTemplate.Triggers>
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>
When I use progress bar(IsIndertiminate=true) inside a Grid of width say 120, then the progress bar animation seems quite weird. The progress dot seems to be moving sidebyside without any proper spacing in between them. Also, due to this(less width), the effect of dots getting moving away/getting closer at start and end respectively is not quite visible.
So, how can I make the progressBar look better when I am displaying it in limited width.
I tried to search and make some changes in progressBar's property myself but couldn't reach a satisfactory state.
EDIT: Inside my grid.row, by setting the width of my progressBar to "auto" I was able to achieve desirable spacing/look (it's still not perfect but will work for me).
It just requires some customizing of that controls Style Template to make some adjustments to the shapes that act as the ProgressBar itself.
I don't have a default Style template for the WP7 ProgressBar in front of me at the moment, but if you open your proj in Expression Blend, right-click it and choose "Edit Template -> Edit A Copy (OR Edit Original) to expose the Style Template, you'll see the shapes and I think even the Storyboard animation(s) driving it ready to be edited to your hearts desire.
If you provide a copy of the default template I'm sure we could whip out a solution for you pretty quick if you don't get it yourself. Hope this helps :)
It's default style of progress bar, and you can modify each Rectangle!
<Style x:Key="PerformanceProgressBarStyle1" TargetType="toolkit:PerformanceProgressBar">
<Setter Property="IsIndeterminate" Value="False"/>
<Setter Property="Foreground" Value="{StaticResource PhoneAccentBrush}"/>
<Setter Property="Background" Value="{StaticResource PhoneAccentBrush}"/>
<Setter Property="IsHitTestVisible" Value="False"/>
<Setter Property="Padding" Value="{StaticResource PhoneHorizontalMargin}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:PerformanceProgressBar">
<ProgressBar x:Name="EmbeddedProgressBar" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" IsIndeterminate="{TemplateBinding ActualIsIndeterminate}" Padding="{TemplateBinding Padding}">
<ProgressBar.Template>
<ControlTemplate TargetType="ProgressBar">
<toolkitPrimitives:RelativeAnimatingContentControl HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<toolkitPrimitives:RelativeAnimatingContentControl.Resources>
<ExponentialEase x:Key="ProgressBarEaseOut" EasingMode="EaseOut" Exponent="1"/>
<ExponentialEase x:Key="ProgressBarEaseIn" EasingMode="EaseIn" Exponent="1"/>
</toolkitPrimitives:RelativeAnimatingContentControl.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Determinate"/>
<VisualState x:Name="Indeterminate">
<Storyboard Duration="00:00:04.4" RepeatBehavior="Forever">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="IndeterminateRoot">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00.0" Storyboard.TargetProperty="X" Storyboard.TargetName="R1TT">
<LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseOut}" KeyTime="00:00:00.5" Value="33.1"/>
<LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseIn}" KeyTime="00:00:02.5" Value="100.1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00.2" Storyboard.TargetProperty="X" Storyboard.TargetName="R2TT">
<LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseOut}" KeyTime="00:00:00.5" Value="33.1"/>
<LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseIn}" KeyTime="00:00:02.5" Value="100.1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00.4" Storyboard.TargetProperty="X" Storyboard.TargetName="R3TT">
<LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseOut}" KeyTime="00:00:00.5" Value="33.1"/>
<LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseIn}" KeyTime="00:00:02.5" Value="100.1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00.6" Storyboard.TargetProperty="X" Storyboard.TargetName="R4TT">
<LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseOut}" KeyTime="00:00:00.5" Value="33.1"/>
<LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseIn}" KeyTime="00:00:02.5" Value="100.1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00.8" Storyboard.TargetProperty="X" Storyboard.TargetName="R5TT">
<LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0.1"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseOut}" KeyTime="00:00:00.5" Value="33.1"/>
<LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="66.1"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource ProgressBarEaseIn}" KeyTime="00:00:02.5" Value="100.1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R1">
<DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
<DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00.2" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R2">
<DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
<DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00.4" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R3">
<DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
<DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R4">
<DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
<DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00.8" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="R5">
<DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
<DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="IndeterminateRoot" Margin="{TemplateBinding Padding}">
<Grid HorizontalAlignment="Left">
<Rectangle x:Name="R1" CacheMode="BitmapCache" Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Opacity="0" Width="4">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="R1TT"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="R2" CacheMode="BitmapCache" Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Opacity="0" Width="4">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="R2TT"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="R3" CacheMode="BitmapCache" Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Opacity="0" Width="4">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="R3TT"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="R4" CacheMode="BitmapCache" Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Opacity="0" Width="4">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="R4TT"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="R5" CacheMode="BitmapCache" Fill="{TemplateBinding Foreground}" Height="4" IsHitTestVisible="False" Opacity="0" Width="4">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="R5TT"/>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
</Border>
</toolkitPrimitives:RelativeAnimatingContentControl>
</ControlTemplate>
</ProgressBar.Template>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisibilityStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.25" To="Normal"/>
<VisualTransition GeneratedDuration="0:0:0.75" To="Hidden"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="Hidden">
<Storyboard>
<DoubleAnimation To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="EmbeddedProgressBar"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</ProgressBar>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
For example just set Widht = "2" Height = "2" May be it's what you need!
<Rectangle x:Name="R1" CacheMode="BitmapCache" Fill="{TemplateBinding Foreground}" Height="2" IsHitTestVisible="False" Opacity="0" Width="2">
You also can use any shape, not only rectangles.
Do not forget assign this style for your ProgresBar.
Hope its help.
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>
I'm trying to create an animation in one of my apps.
The animation is a Control that has a StoryBoard defined in its Resources and starts this StoryBoard after it's been loaded. Here's the (somewhat stripped) XAML:
<UserControl x:Class="LernInsel.Resources.Assets.Water" x:Name="UserControl">
<UserControl.Resources>
<Storyboard x:Key="BaseAnimation" x:Name="BaseAnimation" RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="waveLeft">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="0.45"/>
<EasingDoubleKeyFrame KeyTime="0:0:2.3" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="waveRight">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="0.45"/>
<EasingDoubleKeyFrame KeyTime="0:0:2.3" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="waveLeft_Copy">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.39"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="waveRight_Copy">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.39"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="waveLeft_Copy1">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0.41"/>
<EasingDoubleKeyFrame KeyTime="0:0:2.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="waveRight_Copy1">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0.41"/>
<EasingDoubleKeyFrame KeyTime="0:0:2.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="waveLeft_Copy2">
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.9" Value="0.35"/>
<EasingDoubleKeyFrame KeyTime="0:0:2.9" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="waveRight_Copy2">
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.9" Value="0.35"/>
<EasingDoubleKeyFrame KeyTime="0:0:2.9" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource BaseAnimation}"/>
</EventTrigger>
</UserControl.Triggers>
<Grid>
<Rectangle x:Name="Background" Fill="#FF0B5FBC" Height="88" VerticalAlignment="Top"/>
<Rectangle x:Name="waveLeft" Fill="{DynamicResource ResourceKey=waveBright}" Height="60" Margin="25.5,6,286.5,0" VerticalAlignment="Top" Opacity="0" RenderTransformOrigin="0.5,0.5"/>
<Rectangle x:Name="waveRight" Fill="{DynamicResource ResourceKey=waveBright}" Height="60" Margin="308.5,6,3.5,0" VerticalAlignment="Top" Opacity="0" RenderTransformOrigin="0.5,0.5"/>
<Rectangle x:Name="waveLeft_Copy" Fill="{DynamicResource ResourceKey=waveBright}" Height="60" Margin="-3.5,15,315.5,0" VerticalAlignment="Top" Opacity="0" RenderTransformOrigin="0.5,0.5"/>
<Rectangle x:Name="waveRight_Copy" Fill="{DynamicResource ResourceKey=waveBright}" Height="60" Margin="279.5,15,32.5,0" VerticalAlignment="Top" Opacity="0" RenderTransformOrigin="0.5,0.5"/>
<Rectangle x:Name="waveLeft_Copy1" Fill="{DynamicResource ResourceKey=waveBright}" Height="60" Margin="45.5,25,266.5,0" VerticalAlignment="Top" Opacity="0" RenderTransformOrigin="0.5,0.5"/>
<Rectangle x:Name="waveRight_Copy1" Fill="{DynamicResource ResourceKey=waveBright}" Height="60" Margin="0,25,-16.5,0" VerticalAlignment="Top" Opacity="0" RenderTransformOrigin="0.5,0.5"/>
<Rectangle x:Name="waveLeft_Copy2" Fill="{DynamicResource ResourceKey=waveBright}" Height="60" Margin="-3.5,38,315.5,0" VerticalAlignment="Top" Opacity="0" RenderTransformOrigin="0.5,0.5"/>
<Rectangle x:Name="waveRight_Copy2" Fill="{DynamicResource ResourceKey=waveBright}" Height="60" Margin="279.5,38,32.5,0" VerticalAlignment="Top" Opacity="0" RenderTransformOrigin="0.5,0.5"/>
</Grid>
</UserControl>
When I create an instance of this on my Window, this looks fine in the designer, even the animation is being displayed. At Runtime, the Control is displayed as a unicolor Box (background color), but the animation never starts. Do you see anything wrong with the way Blend created the Trigger that might keep it from working?
Thanks a lot in advance!
Sebi
Cannot reproduce this, given that waveBright is actually defined in a reachable scope of your UserControl. This might be the only weakness of that code.