I would like to swing an ellipse to one place and then shrink it. After the first storyboard stops, I intend to stretch the ellipse with the ellipse. However the shrinking process doesn't work at all. Hard to firgure out why~ Any help or tips will be appreciated. Thanks~
<Window.Resources>
<Storyboard x:Key="Swing" Duration="0:0:7">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="Leg" AutoReverse="True" RepeatBehavior="Forever">
<EasingDoubleKeyFrame KeyTime="0" Value="27.081"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-25.783"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="Leg">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:6" Value="489.676"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="Leg">
<EasingDoubleKeyFrame KeyTime="0:0:6" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:7" Value="0.2"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Swing2" BeginTime="0:0:7">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="Leg">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="0.2"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard x:Name="Swing_BeginStoryboard" Storyboard="{StaticResource Swing}"/>
<BeginStoryboard x:Name="Swing_BeginStoryboard1" Storyboard="{StaticResource Swing2}"/>
</EventTrigger>
</Window.Triggers>
<Grid x:Name="LayoutRoot">
<Ellipse x:Name="Leg" Fill="#FFF4F4F5" HorizontalAlignment="Left" Margin="156,204,0,147" Stroke="Black" Width="33" RenderTransformOrigin="0.464,-0.014">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="27.081"/>
<TranslateTransform/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
</Grid>
If I change the second storyboard as below, the ellipse will be shinking from the beginning.
<Storyboard x:Key="Swing2">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="Leg">
<EasingDoubleKeyFrame KeyTime="0:0:7" Value="0.2"/>
<EasingDoubleKeyFrame KeyTime="0:0:9" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
Related
I want to create the Hamburger Menu Transition Animation in XAML only.
I only found tutorials and examples of how to do this with code-behind.
But this is something I want to avoid at all costs.
This is how the animation looks like:
Animation (no direct GIF possible at the moment)
One example I found
XAML:
<Window.Resources>
<Storyboard x:Key="OpenMenu">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="rectangle">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="43.5"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="rectangle1">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-43.5"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="rectangle2">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="GridMenu">
<EasingDoubleKeyFrame KeyTime="0" Value="70"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="200"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="CloseMenu">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="rectangle">
<EasingDoubleKeyFrame KeyTime="0" Value="43.5"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="rectangle1">
<EasingDoubleKeyFrame KeyTime="0" Value="-43.5"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="rectangle2">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="GridMenu">
<EasingDoubleKeyFrame KeyTime="0" Value="200"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="70"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
code-behind:
private void ButtonMenu_Click(object sender, RoutedEventArgs e)
{
if(StateClosed)
{
Storyboard sb = this.FindResource("OpenMenu") as Storyboard;
sb.Begin();
}
else
{
Storyboard sb = this.FindResource("CloseMenu") as Storyboard;
sb.Begin();
}
StateClosed = !StateClosed;
}
Is there anyway to achive the same result using XAML-only.
I dont want any code-behind for this animation...
I know how to create each Storyboard for the animation itself.
But the same button has to execute two different Storyboards,
depending on the state of the menu?
Here is an example using a ToggleButton instead. Since the ToggleButton has built in Checked / Unchecked events, you can use those in EventTriggers to run your storyboards.
<ToggleButton ... >
<!-- Your menu icon XAML/rectangles go here -->
<ToggleButton.Triggers>
<EventTrigger RoutedEvent="ToggleButton.Checked">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource OpenMenu}" />
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="ToggleButton.Unchecked">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource CloseMenu}" />
</EventTrigger.Actions>
</EventTrigger>
</ToggleButton.Triggers>
</ToggleButton>
I am trying to create a similar project with what this guy has made Youtube Video
Of course, not that awesome, it is way beyond my skills. But what I am trying to make now is very simple (compared to the video)
this is what I have done so far
This is what I've made, With Drag and drop of course, cant figure out how to create a shape (Rectangle or any other shape) in a short distance from the specific button, and then connected with an other shape or something similar.
This what I've done is just when you press the button to show those two Rectangles.
Also, trying to make it in different Angles too. for example like in this pic
To give you a better understanding in the project I am making, please read bellow.
This is a school project I am making, I have some data in a database in SQL and want to demonstrate those not in a table or any label, but as in the photos I show you. For example. When the form loads, it gets the first row, and lists items like Name (will be the button) then the other rectangles will be created from the information listed. for example. When you click the Name of the person(button) it will show 2-3 Rectangles(the green rectangles) with the labels of Age, School, Gender or anything else.
How can I do this? Is it able to be done? I know its really hard, but can any one refer me in any tutorial for this? What I've searched on google, most of the tutorials are outdated, 6-7 years old.
Thanks for your Consideration
Ya I know what you're trying to accomplish, but like I said it's the type of reason places hire specialty front-end "devigner" guys to make that stuff.
So I apologize for the delayed response but I had to get my normal workday stuff out of the way first, and I spent about 15mins on this little example before I head off for the day soon to get you started with an idea or two.
I did however leave out the Exit actions for when Toggle IsChecked=False. There's also a lot of other ways I might do things if it was my project but something like this could eat up most of a day or more real easily (especially depending how cool you make it) so this is just a pseudo example but I hope it helps.
As a ToggleButton template (SUPER SIMPLE CONCEPT EXAMPLE);
<ToggleButton Content="Boaty McBoatFace" HorizontalAlignment="Center" VerticalAlignment="Center">
<ToggleButton.Template>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<ControlTemplate.Resources>
<Storyboard x:Key="bubbleAnim">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="bubble1">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="55"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" Storyboard.TargetName="bubble1">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="55"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" Storyboard.TargetName="bubble2">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="55"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="bubble3">
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="210"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" Storyboard.TargetName="bubble3">
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="55"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="bubble4">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="210"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" Storyboard.TargetName="bubble4">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="133"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="bubble5">
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="210"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" Storyboard.TargetName="bubble5">
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="205"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" Storyboard.TargetName="bubble6">
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="205"/>
</DoubleAnimationUsingKeyFrames>
<Int32AnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.ZIndex)" Storyboard.TargetName="bubble6">
<EasingInt32KeyFrame KeyTime="0:0:0.7" Value="-5"/>
</Int32AnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="bubble7">
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="55"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" Storyboard.TargetName="bubble7">
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="205"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="bubble8">
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="55"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" Storyboard.TargetName="bubble8">
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="133"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="bubble1">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="bubble2">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="bubble3">
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="bubble4">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="bubble5">
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="bubble6">
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.985"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="bubble7">
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="bubble8">
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="line1">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="line2">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="line3">
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="line4">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="line5">
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="line6">
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="line7">
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="line8">
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Border Height="300" Width="300">
<Canvas>
<Canvas.Resources>
<Style TargetType="Line">
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Stroke" Value="Red"/>
<Setter Property="StrokeThickness" Value="2"/>
</Style>
<Style TargetType="Border">
<Setter Property="Background" Value="White"/>
<Setter Property="BorderBrush" Value="Purple"/>
<Setter Property="BorderThickness" Value="3"/>
<Setter Property="CornerRadius" Value="50"/>
<Setter Property="Padding" Value="10,5"/>
</Style>
</Canvas.Resources>
<Line x:Name="line1" Opacity="0"
X1="75" Y1="75"
X2="150" Y2="150"/>
<Line x:Name="line2" Opacity="0"
X1="150" Y1="75"
X2="150" Y2="150" Stroke="Blue"/>
<Line x:Name="line3" Opacity="0"
X1="225" Y1="75"
X2="150" Y2="150"/>
<Line x:Name="line4" Opacity="0"
X1="225" Y1="150"
X2="150" Y2="150" Stroke="Blue"/>
<Line x:Name="line5" Opacity="0"
X1="150" Y1="150"
X2="75" Y2="225"/>
<Line x:Name="line6" Opacity="0"
X1="150" Y1="150"
X2="150" Y2="225" Stroke="Blue"/>
<Line x:Name="line7" Opacity="0"
X1="150" Y1="150"
X2="225" Y2="225"/>
<Line x:Name="line8" Opacity="0"
X1="150" Y1="150"
X2="75" Y2="150" Stroke="Blue"/>
<Border x:Name="bubble1" Opacity="0"
Canvas.Left="133" Canvas.Top="134">
<TextBlock Text="1"/>
</Border>
<Border x:Name="bubble2" Opacity="0"
Canvas.Left="133" Canvas.Top="134">
<TextBlock Text="2"/>
</Border>
<Border x:Name="bubble3" Opacity="0"
Canvas.Left="133" Canvas.Top="134">
<TextBlock Text="3"/>
</Border>
<Border x:Name="bubble4" Opacity="0"
Canvas.Left="133" Canvas.Top="134">
<TextBlock Text="4"/>
</Border>
<Border x:Name="bubble5" Opacity="0"
Canvas.Left="133" Canvas.Top="134">
<TextBlock Text="5"/>
</Border>
<Border x:Name="bubble6" Opacity="0"
Canvas.Left="133" Canvas.Top="134">
<TextBlock Text="6"/>
</Border>
<Border x:Name="bubble7" Opacity="0"
Canvas.Left="133" Canvas.Top="134">
<TextBlock Text="7"/>
</Border>
<Border x:Name="bubble8" Opacity="0"
Canvas.Left="133" Canvas.Top="134">
<TextBlock Text="8"/>
</Border>
<Border CornerRadius="3" Background="{TemplateBinding Background}"
Canvas.Left="95" Canvas.Top="138" Padding="1">
<ContentPresenter />
</Border>
</Canvas>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource bubbleAnim}"/>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
I want to make a kind of custom ListView in WPF. It consists of a Header and a stack panel which contains all entries.
I want to be able to minimize the ListView, so I added a little Triangle before the header that triggers an Storyboard. This should minimize/maximize the Listview.
Anything works well except that I don't have a static height. So in my Storyboard I can't set a Keyframe with a specific static Value. I tried a Binding with a custom converter that adds to the height of the stack panel the height of the header. But it seems like it always returns "0".
My current code:
<UserControl
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:GenericWPF="clr-namespace:GenericWPF"
mc:Ignorable="d"
x:Class="Vertretungsplan.UserElements.VertretungsPlan"
x:Name="UserControl" Width="824" SizeChanged="VertretungsPlan_OnSizeChanged" Height="40">
<UserControl.Resources>
<GenericWPF:AddValueConverter x:Key="AddConverter"/>
<Style x:Key="HeaderTextBlockLinkStyle" TargetType="{x:Type TextBlock}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="#FF3C66C1"/>
</Trigger>
</Style.Triggers>
<Setter Property="TextWrapping" Value="NoWrap"/>
<Setter Property="TextTrimming" Value="None"/>
</Style>
<Storyboard x:Key="Maximize">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="UserControl">
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="900"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="NotExpandedTriangle">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ExpandedTriangle">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.995"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="NotExpandedTriangle">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.7" Value="{x:Static Visibility.Hidden}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ExpandedTriangle">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.4" Value="{x:Static Visibility.Visible}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:1" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Minimize">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="UserControl">
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="40"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ExpandedTriangle">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.7" Value="{x:Static Visibility.Visible}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:1" Value="{x:Static Visibility.Hidden}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ExpandedTriangle">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="NotExpandedTriangle">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="NotExpandedTriangle">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.4" Value="{x:Static Visibility.Visible}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:1" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="UIElement.MouseDown" SourceName="NotExpandedTriangle">
<BeginStoryboard x:Name="Maximize_BeginStoryboard" Storyboard="{StaticResource Maximize}"/>
</EventTrigger>
<EventTrigger RoutedEvent="UIElement.MouseDown" SourceName="ExpandedTriangle">
<BeginStoryboard x:Name="Minimize_BeginStoryboard" Storyboard="{StaticResource Minimize}"/>
</EventTrigger>
</UserControl.Triggers>
<Grid x:Name="LayoutRoot" Height="Auto">
<TextBlock x:Name="Header" TextWrapping="Wrap" VerticalAlignment="Top" Margin="60,10,10,0" TextAlignment="Center" FontSize="20" FontWeight="Bold" MouseDown="Header_MouseDown" Style="{DynamicResource HeaderTextBlockLinkStyle}" Cursor="Hand"><Run Text="XX.XX.XXXX XXXXXXX, Woche X"/></TextBlock>
<StackPanel x:Name="RowStackPanel" Margin="0,41.6,0,0" MinHeight="100"/>
<Path x:Name="NotExpandedTriangle" Data="M0,0 L26,26 0,26 z" Fill="Black" HorizontalAlignment="Left" Height="20" Margin="10,12.5,0,0" Stretch="Fill" SnapsToDevicePixels="True" Stroke="Black" StrokeThickness="0" VerticalAlignment="Top" Width="20" RenderTransformOrigin="0.5,0.5" >
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-134.855"/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
<Path x:Name="ExpandedTriangle" Data="M0,0 L26,26 0,26 z" Fill="Black" HorizontalAlignment="Left" Height="20" Margin="10,12.5,0,0" Stretch="Fill" SnapsToDevicePixels="True" Stroke="Black" StrokeThickness="0" VerticalAlignment="Top" Width="20" RenderTransformOrigin="0.5,0.5" Opacity="0" Visibility="Hidden" >
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-44.898"/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
</UserControl>
Please help me out how I can get a dynamic Value for the Keyframe that represents the total Heigth of the stackPanel + the Header + Spacing. Thanks!
It's possible to set the value of that key frame from code.
At a point you feel is best, possibly via the SizeChanged event, search for the storyboard in the resources. I have code that looks something like the following...
maximizeStoryboard = (Storyboard)FindResource("Maximize");
After you have that you can grab the timeline collection from its Children. And the first child in your case will be
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="UserControl">
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="900"/>
</DoubleAnimationUsingKeyFrames>
Once you have that, you can gain access to the key frames via the DoubleAnimationUsingKeyFrames property KeyFrames. Which again is a collection. As you only have one EasingDoubleKeyFrame, grab a hold of that one frame and from that you can set its value via its Value property.
Hope this helps.
I want to show progress in my Desktop apps like Windows 8 ProgressRing. This type of progress is shown at times of installation or when Windows Start, but this control can be used in many applications as its very clean and modern, but I don't know how to achieve that. The progress ring image is here.
Please see the image:
May I know how do I code for it may be in XAML or in Code? I have seen that in WPF ProgressRing control is not present, so I have to go to some custom control. Idea link or suggestions please how can I proceed.
Using MahApps.Metro would be much simpler, but given below is a simple Metro-like wait indicator showing how it would be done in XAML.
<Viewbox>
<Canvas Width="50" Height="50"
HorizontalAlignment="Left"
VerticalAlignment="Top">
<Path Data="M50,27.5 C50,24.23333 45,24.23333 45,27.5 C45,30.83333 50,30.83333 50,27.5"
Fill="#FFFFFFFF"
RenderTransformOrigin="0.5,0.83333">
<Path.RenderTransform >
<RotateTransform x:Name="_rot1" Angle="0"/>
</Path.RenderTransform>
<Path.Triggers>
<EventTrigger RoutedEvent="Path.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="_rot1"
Storyboard.TargetProperty="Angle"
RepeatBehavior="Forever">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="360"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<PowerEase Power="1.3" EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
<Path Data="M50,27.5 C50,24.23333 45,24.23333 45,27.5 C45,30.83333 50,30.83333 50,27.5"
Fill="#DDFFFFFF"
RenderTransformOrigin="0.5,0.83333">
<Path.RenderTransform>
<RotateTransform x:Name="_rot2" Angle="13"/>
</Path.RenderTransform>
<Path.Triggers>
<EventTrigger RoutedEvent="Path.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="_rot2"
Storyboard.TargetProperty="Angle"
RepeatBehavior="Forever">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="13"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="13"/>
<EasingDoubleKeyFrame KeyTime="0:0:2.2" Value="-347">
<EasingDoubleKeyFrame.EasingFunction>
<PowerEase Power="1.3" EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="-347"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
<Path Data="M50,27.5 C50,24.23333 45,24.23333 45,27.5 C45,30.83333 50,30.83333 50,27.5"
Fill="#BBFFFFFF"
RenderTransformOrigin="0.5,0.83333">
<Path.RenderTransform>
<RotateTransform x:Name="_rot3" Angle="26"/>
</Path.RenderTransform>
<Path.Triggers>
<EventTrigger RoutedEvent="Path.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="_rot3"
Storyboard.TargetProperty="Angle"
RepeatBehavior="Forever">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="26"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="26"/>
<EasingDoubleKeyFrame KeyTime="0:0:2.4" Value="-334">
<EasingDoubleKeyFrame.EasingFunction>
<PowerEase Power="1.3" EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="-334"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
<Path Data="M50,27.5 C50,24.23333 45,24.23333 45,27.5 C45,30.83333 50,30.83333 50,27.5"
Fill="#99FFFFFF"
RenderTransformOrigin="0.5,0.83333">
<Path.RenderTransform>
<RotateTransform x:Name="_rot4" Angle="39"/>
</Path.RenderTransform>
<Path.Triggers>
<EventTrigger RoutedEvent="Path.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="_rot4"
Storyboard.TargetProperty="Angle"
RepeatBehavior="Forever">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="39"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="39"/>
<EasingDoubleKeyFrame KeyTime="0:0:2.6" Value="-321">
<EasingDoubleKeyFrame.EasingFunction>
<PowerEase Power="1.3" EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="-321"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
<Path Data="M50,27.5 C50,24.23333 45,24.23333 45,27.5 C45,30.83333 50,30.83333 50,27.5"
Fill="#77FFFFFF"
RenderTransformOrigin="0.5,0.83333">
<Path.RenderTransform>
<RotateTransform x:Name="_rot5" Angle="52"/>
</Path.RenderTransform>
<Path.Triggers>
<EventTrigger RoutedEvent="Path.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="_rot5"
Storyboard.TargetProperty="Angle"
RepeatBehavior="Forever">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="52"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="52"/>
<EasingDoubleKeyFrame KeyTime="0:0:2.8" Value="-308">
<EasingDoubleKeyFrame.EasingFunction>
<PowerEase Power="1.3" EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="-308"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
</Canvas>
</Viewbox>
It's essentially the same Path object, a filled circle, used 5 times, at 5 different rotation angles and 5 different opacity values for the fill.
Doubtless, there is a more efficient way to do this, but this method shows the animation and timings, as well as the easing to give it more natural, less abrupt feel, when the circles spin around and stop.
Use ProgressRing from MahApps.Metro:
The ProgressRing control is styled after a similar control in Windows 8 to indicate activity rather than a percentage of progress completed.
Example:
<Controls:ProgressRing IsActive="True" />
To change the size of the rings, you need to set Width and Height. Also, you can set a different color for each ring and set the size less than the established. To do this and get this Control without install full MahApps.Metro pack, look at my previous answer:
Make the ProgressRing in MahApps.Metro Smaller
Here is my UserControl
<Grid x:Name="Grid">
<Path Name="Path1" Data="M0.5,0.5 L179.5,0.5 L179.5,249.5 L0.5,249.5 z" Stretch="Fill" Stroke="Purple" StrokeThickness="1">
<Path.Fill>
<SolidColorBrush Color="Blue" Opacity="0.4"/>
</Path.Fill>
</Path>
<Grid.Resources>
<Storyboard x:Key="Path_Ani">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="Path1">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="-58.515"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="Path1">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="-129.167"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="Path1">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.544"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Path1">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.806"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleX)" Storyboard.TargetName="Path1">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="5.628"/>
</DoubleAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(LineSegment.Point)" Storyboard.TargetName="Path1">
<EasingPointKeyFrame KeyTime="0" Value="100.5,140.5"/>
<EasingPointKeyFrame KeyTime="0:0:0.2" Value="104.175476605516,140.5"/>
</PointAnimationUsingKeyFrames>
</Storyboard>
</Grid.Resources>
</Grid>
And i call the StoryBoard like that:
private void MyTest_MouseDown(object sender, MouseButtonEventArgs e)
{
Storyboard sbdCardAnim = (Storyboard)MyTest.Grid.Resources["Path_Ani"];
sbdCardAnim.Begin();
}
And i get this error when i click:
'[Unknown]' property does not point to a DependencyObject in path '(0).(1)[3].(2)'.
How do I solve the problem that is causing this error?
Your animation expects the path to have a bunch of transformations defined as the RenderTransform, however your path's actual RenderTransform seems to be null (as it is not defined).
<!-- The RenderTransform which is expected looks something like this
(while no animation targets the third and therefore unknown transform
it only makes sense for it to be a RotateTransform) -->
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform />
<TranslateTransform />
</TransformGroup>
</Path.RenderTransform>
The path in the PointAnimation also does not seem to fit the actual data in the path as there will still be an error if the RenderTransform is defined as expected.