Im just studing silverlight(in C#) and i got a problem.
I have 14 rectangles and their width/Height are set to "Auto". I want to creat animation on MouseEnter/MouseLeave. Animation will be just changing the width/Height. I did it using Expression Blend for Silverlight 5, and everything is ok but it made HUGE code. Can i make some resourse animation for all rectangles ?
This is the XAML code made by Blend, and i have 14 such blocks
<Storyboard x:Name="BigTableOne_MouseEnter">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="Table1">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1.04"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Table1">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1.04"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="BigTableOne_MouseLeave">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="Table1">
<EasingDoubleKeyFrame KeyTime="0" Value="1.04"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Table1">
<EasingDoubleKeyFrame KeyTime="0" Value="1.04"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
All your storyboards have same content besides "Storyboard.TargetName" property.So you can just delete this property and set it at runtime dynamically.
You can find more detail here.
Related
How can I disable the circle/ripple checkbox animation in MaterialDesignInXAML?
I have tried the following settings without success:
md:RippleAssist.IsDisabled="True"
md:RippleAssist.Feedback="Transparent"
md:TransitionAssist.DisableTransitions="True"
Assuming you like all the rest of the functionality in there, I think you will need to re template.
If you take a look at the source for materialdesigninxaml here:
https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/blob/master/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.CheckBox.xaml
( Which is massive or I'd paste it all here.)
You will notice there's an ellipse called "InteractionEllipse". You can copy the template and rip that out.
<Ellipse x:Name="InteractionEllipse" Fill="{TemplateBinding Foreground}" Width="0" Height="0" Canvas.Top="12" Canvas.Left="12" Opacity="0" RenderTransformOrigin="0.5,0.5"
IsHitTestVisible="False">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
And there's a storyboard invoked on click, you will want to modify. Or maybe just remove.
<Storyboard x:Key="Click">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="InteractionEllipse">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="48"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="InteractionEllipse">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="48"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="InteractionEllipse">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-24"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="InteractionEllipse">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-24"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="InteractionEllipse">
<EasingDoubleKeyFrame KeyTime="0" Value="0.3"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
Then either use your new template on your checkboxes of choice or "over write" their version with your own from a resource dictionary you merge after the material design stuff.
Alteratively.
You could perhaps make it use a different brush for fill. You could add an attached dependency property or a dynamicresource. That way you could choose transparent for some or all of your checkboxes and I think it'd disappear.
It template binds to foreground
Fill="{TemplateBinding Foreground}
The VisualState tools in Blend / WPF / Silverlight are great but I think we can all agree that that are trés buggy on occasion. Here is an example and I would like some clarification / a workaround / fix.
Consider a bunch of visual states defined like this:
<VisualState x:Name="Hidden">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="contentPresenter">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="contentPresenter">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Revealed">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="contentPresenter">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="contentPresenter">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
Now create a series of trigger to kick switch to these states but select to ignore transition.
The transitions still play. It seems that the visual state manager sees storyboard with more than one contiguous keyframe and plays the whole thing rather than skipping-to-fill when transitions are not used.
The effect I am going for is a 2 stage hide/reveal where the content is faded out and then shrunk. Unfortunately, this means that the state 'transition' will always be played, regardless of my decision to ignore transitions.
Am I being stupid or is this a bug? Is there a workaround?
EDIT - is it better in this case to use an acute easing function to "delay" a transition?
The Storyboard declared inside a VisualState is the Storyboard that plays while the VSM is in that state.
The transitions you're talking about ignoring are Storyboards that play while transitioning from VisualState to VisualState. These are specified separately in a VisualStateGroup.Transitions section.
So, something like:
<VisualStateGroup x:Name="Something">
<VisualState x:Name="Hidden">
<VisualState x:Name="Revealed">
<VisualStateGroup.Transitions>
<VisualTransition From="Hidden" To="Revealed">
<Storyboard>
...
<Storyboard>
</VisualTransition>
<VisualTransition From="Revealed" To="Hidden">
<Storyboard>
...
<Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
</VisualStateGroup>
And fill in the appropriate animations inside the Storyboards.
After this, when you pass in false to the useTransitions parameter of the VisualStateManager's GoToState or GoToElementState methods, you won't see the transitions.
I've created a button which changes its appearance when in different states, the way I do this (as a single example) when the button is being clicked down on:
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.Background).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="Green"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.RenderTransform). (TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.94"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.RenderTransform). (TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.94"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
Is there a way I could accomplish this using less code? I Just want the scale and colour to both instantly change to green when pressed, is there a way to do it without using keyframes?
Thanks for any help!
This can be written so:
<ColorAnimation Duration="0" To="Green" Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.Background).(SolidColorBrush.Color)" />
<DoubleAnimation Duration="0" To="0.94" Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" />
<DoubleAnimation Duration="0" To="0.94" Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" />
General animations are easier to understand and to use, and there is very few cases when frame animations can be used isnted of general animations.
i want to know how to change target name dynamicaly with same animation
Please find Below is my code of WPF for xaml and c# code
XAML code
<Storyboard x:Key="deepanshu">
<DoubleAnimationUsingKeyFrames x:Name="gupta"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
Storyboard.TargetName="image1">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.641"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
Storyboard.TargetName="image1">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.689"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"
Storyboard.TargetName="image1">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"
Storyboard.TargetName="image1">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.5"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
c#
Storyboard sb = (Storyboard)FindResource("deepanshu");
Now how to change storyboaname from image1 to image2?
Thanks
Regards,
Deepanshu
Storyboard sb = (Storyboard)FindResource("deepanshu");
foreach (var animation in sb.Children)
{
Storyboard.SetTargetName(animation, "image2");
}
What H.B. said is working perfectly fine. In XAML put storyboard without specifying TargetName like this
<Storyboard x:Key="OpacityUpAnim">
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:1.3">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
for C# I wrote a custom function to call Animation.
private void RunStoryBoardFromName(string animName, string targetName = null)
{
Storyboard storyBoard = (Storyboard)this.Resources[animName];
if (targetName != null)
{
foreach (var anim in storyBoard.Children)
{
Storyboard.SetTargetName(anim, targetName);
}
}
storyBoard.Begin();
}
then I called it in C# like
RunStoryBoardFromName("OpacityUpAnim", "PopupGrid");
Is it possible to animate the StartPoint or EndPoint of a LinearGradientBrush? If so, what is the type of the Storyboard object used to animate the Points, as when I try the following I get "0,1" is not a valid value for Double, and I do realize I shouldn't be using the DoubleAnimationUsingKeyFrames type.
Current Code:
<UserControl.Triggers>
<EventTrigger RoutedEvent="UserControl.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="Path1"
Storyboard.TargetProperty="(Path.Stroke).(LinearGradientBrush.StartPoint)">
<SplineDoubleKeyFrame KeyTime="00:00:0" Value="0,1"/>
<SplineDoubleKeyFrame KeyTime="00:00:2" Value=".5,.5"/>
<SplineDoubleKeyFrame KeyTime="00:00:4" Value="1,0"/>
<SplineDoubleKeyFrame KeyTime="00:00:6" Value=".5,.5"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="Path1"
Storyboard.TargetProperty="(Path.Stroke).(LinearGradientBrush.EndPoint)">
<SplineDoubleKeyFrame KeyTime="00:00:0" Value="1,0"/>
<SplineDoubleKeyFrame KeyTime="00:00:2" Value=".5,.5"/>
<SplineDoubleKeyFrame KeyTime="00:00:4" Value="0,1"/>
<SplineDoubleKeyFrame KeyTime="00:00:6" Value=".5,.5"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</UserControl.Triggers>
Yes. Just use "PointAnimationUsingKeyFrames" and "SplinePointKeyFrame" in your example above. It should work.