Hey all I am pretty new at creating a WPF in VS 2013. I am wanting this box to bounce & ease in/out.
The current code i have:
<BeginStoryboard x:Name="FadeInStoryBoard">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ZWindow" From="0.01" To="0.85" Storyboard.TargetProperty="Opacity" Duration="0:0:0.8">
<DoubleAnimation.EasingFunction>
<ElasticEase Oscillations="5" Springiness="5" EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="ZWindow" From="0.85" To="0" Storyboard.TargetProperty="Opacity" Duration="0:0:0.8" BeginTime="0:0:20" Name="boxFader">
<DoubleAnimation.EasingFunction>
<ElasticEase Oscillations="3" Springiness="5" EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
It currently looks very odd when showing due to it fading in/out. How can i take off the fading and just have it fade in when bouncing in/out?
Please try this,
<Rectangle Width="100"
Height="100"
VerticalAlignment="Bottom"
Fill="Red">
<Rectangle.RenderTransform>
<TranslateTransform />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)">
<EasingDoubleKeyFrame KeyTime="0:0:1"
Value="-200">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
Related
I am developing a Windows phone game appsand I need to animate multiple buttons on certain event say Page_loaded. What i can achieve is that
<Storyboard Storyboard.TargetName="scaButton" Storyboard.TargetProperty="Angle" >
<DoubleAnimation Storyboard.TargetProperty="ScaleY"
From="-1" To="1"
BeginTime="0:0:0"
Duration="0:0:0.5"
AutoReverse="False" />
</Storyboard>
And in the XAML in a single button
<Button Height="100" Width="200" Margin="10,495,270,103" Content="{Binding Path=ListOfValues[0]}" RenderTransformOrigin="0.5,0.5" Click="Button_Click">
<Button.RenderTransform>
<ScaleTransform x:Name="scaButton" ScaleX="1" ScaleY="1" CenterX="50" CenterY="25" />
</Button.RenderTransform>
</Button>
But the problem is how do I define it for Multiple buttons. I want all the buttons will flipAnimation at the sametime. But how do I achieve it?
please help.
In windows Phone <Style.Triggers> is also not present.
You can accomplish this by setting the TargetName inside the DoubleAnimation
<Grid.Resources>
<Storyboard x:Name="FlipButtonStory">
<DoubleAnimation Storyboard.TargetName="scaButton1"
Storyboard.TargetProperty="ScaleY"
From="-1" To="1"
BeginTime="0:0:0"
Duration="0:0:0.5"
AutoReverse="False" />
<DoubleAnimation Storyboard.TargetName="scaButton2"
Storyboard.TargetProperty="ScaleY"
From="-1" To="1"
BeginTime="0:0:0"
Duration="0:0:0.5"
AutoReverse="False" />
<DoubleAnimation Storyboard.TargetName="scaButton3"
Storyboard.TargetProperty="ScaleY"
From="-1" To="1"
BeginTime="0:0:0"
Duration="0:0:0.5"
AutoReverse="False" />
</Storyboard>
<Grid.Resouces>
You can begin the story by calling the BeginStoryboard method.
FlipButtonStory.BeginStoryboard();
I can fade in / out using the following code
<Storyboard x:Name="EnterStoryboard">
<FadeOutThemeAnimation Storyboard.TargetName="PauseImage" />
</Storyboard>
<Storyboard x:Name="ExitStoryboard">
<FadeInThemeAnimation Storyboard.TargetName="PauseImage" />
</Storyboard>
To fadein:
EnterStoryboard.Begin();
To fadeout:
ExitStoryboard.Begin();
How can I fadein if the element is hidden from the beginning (I tried to set opacity=0 and visibility=collapsed).
EDIT:
based on AstiK solution, here's the new Storyboards (Instead of the built-in FadeInThemeAnimation / FadeOutThemeAnimation)
<Storyboard x:Name="EnterStoryboard">
<DoubleAnimation BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" From="0" To="1" Duration="00:00:00.3" Storyboard.TargetName="Image"/>
</Storyboard>
<Storyboard x:Name="ExitStoryboard">
<DoubleAnimation BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" From="1" To="0" Duration="00:00:00.3" Storyboard.TargetName="Image"/>
</Storyboard>
In your original approach, you should have kept Opacity ="0" and Visibility="Visible" from the beginning. I think you are looking for something like this:
<Grid Height="50" Width="100" Background="Red" Opacity="0">
<Grid.Style>
<Style TargetType="Grid">
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<Storyboard >
<DoubleAnimation BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" From="0" To="1" Duration="00:00:03"/>
</Storyboard>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
</Grid>
use this:
<Storyboard x:Name="EnterStoryboard">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="PauseImage">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<FadeOutThemeAnimation Storyboard.TargetName="PauseImage" />
set to collapsed in the same way for ExitStoryboard
I like to use this ColorAnimationUsingKeyFrames
<Color x:Key="HighlightedColor">Yellow</Color>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00.0000000"
Duration="00:00:00.1000000"
Storyboard.TargetName="HighlightAnimatedColorBrush"
Storyboard.TargetProperty="Color"
FillBehavior="HoldEnd">
<ColorAnimationUsingKeyFrames.KeyFrames>
<LinearColorKeyFrame Value="{StaticResource HighlightedColor}" KeyTime="00:00:00.5000000"/>
</ColorAnimationUsingKeyFrames.KeyFrames>
</ColorAnimationUsingKeyFrames>
multiple times.
At the moment I had this workaround
<shapes:MirrorTile InnerXRadius="5.0"
InnerYRadius="5.0"
OuterXRadius="57.0"
OuterYRadius="57.0"
MirrorTileAngle="45.0"
Fill="Green"
StrokeThickness="2"
CentrePoint="181.0, 181.0">
<shapes:MirrorTile.Stroke>
<SolidColorBrush x:Name="HighlightAnimatedColorBrush" Color="{StaticResource DefaultColor}"/>
</shapes:MirrorTile.Stroke>
<shapes:MirrorTile.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00.0000000"
Duration="00:00:00.1000000"
Storyboard.TargetName="HighlightAnimatedColorBrush"
Storyboard.TargetProperty="Color"
FillBehavior="HoldEnd">
<ColorAnimationUsingKeyFrames.KeyFrames>
<LinearColorKeyFrame Value="{StaticResource HighlightedColor}" KeyTime="00:00:00.5000000"/>
</ColorAnimationUsingKeyFrames.KeyFrames>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</shapes:MirrorTile.Triggers>
</shapes:MirrorTile>
<shapes:MirrorTile InnerXRadius="5.0"
InnerYRadius="5.0"
OuterXRadius="57.0"
OuterYRadius="57.0"
MirrorTileAngle="45.0"
StrokeThickness="2"
Fill="Green"
CentrePoint="181.0, 181.0"
OffsetAngle="45.0">
<shapes:MirrorTile.Stroke>
<SolidColorBrush x:Name="HighlightAnimatedColorBrush2" Color="{StaticResource DefaultColor}"/>
</shapes:MirrorTile.Stroke>
<shapes:MirrorTile.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00.0000000"
Duration="00:00:00.1000000"
Storyboard.TargetName="HighlightAnimatedColorBrush2"
Storyboard.TargetProperty="Color"
FillBehavior="HoldEnd">
<ColorAnimationUsingKeyFrames.KeyFrames>
<LinearColorKeyFrame Value="{StaticResource HighlightedColor}" KeyTime="00:00:00.5000000"/>
</ColorAnimationUsingKeyFrames.KeyFrames>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</shapes:MirrorTile.Triggers>
</shapes:MirrorTile>
I like to move the animation into the resources and just want to bind it to any object (at the end there will be 40 MirrorTile's).
I'm not sure which ResourceDictionary you mean, but you should be able to write something like this. Note that there is no Storyboard.TargetName any more.
<!-- somewhere in Resources -->
<Storyboard x:Key="HighlightedColorStoryboard">
<ColorAnimationUsingKeyFrames Duration="0:0:0.1"
Storyboard.TargetProperty="Stroke.Color">
<ColorAnimationUsingKeyFrames.KeyFrames>
<LinearColorKeyFrame Value="{StaticResource HighlightedColor}"
KeyTime="0:0:0.5"/>
</ColorAnimationUsingKeyFrames.KeyFrames>
</ColorAnimationUsingKeyFrames>
</Storyboard>
and then use it like this (without binding):
<shapes:MirrorTile.Stroke>
<SolidColorBrush Color="{StaticResource DefaultColor}"/>
</shapes:MirrorTile.Stroke>
<shapes:MirrorTile.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard
Storyboard="{StaticResource HighlightedColorStoryboard}"/>
</EventTrigger>
...
</shapes:MirrorTile.Triggers>
I am using the template below to render a semi-transparent 'label' to display certain data. as you can see the the display is elliptical (i'm using Border.CornerRadius for this). I am now trying to popout and contract the label when based on mouse enter/exist. this works, but the problem is, when popped out, the text displayed appears in rectanble, not elipse..and furthermore it seems that while the text itself is expanded, the border is not, making causing some of the text to become cut off. So to summarize...how can i make get the pop out to also show as an elipse and not cut any text off?
<DataTemplate x:Key="LabelTmplt" >
<Border Name="myBorder" BorderThickness="0" CornerRadius="9" RenderTransformOrigin="0.5,0.5" >
<Border.Background>
<SolidColorBrush Opacity=".3" Color="Red"/>
</Border.Background>
<TextBlock Text="{Binding Path=Text}" Padding="5,1,5,1.5" Margin="0,0,0,0"/>
<Border.RenderTransform>
<ScaleTransform />
</Border.RenderTransform>
<Border.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard TargetName="myBorder">
<DoubleAnimation Duration="0:0:0.25" To="1.5" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)">
<DoubleAnimation.EasingFunction>
<BackEase Amplitude="2" EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Duration="0:0:0.25" To="1.5" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
<DoubleAnimation.EasingFunction>
<BackEase Amplitude="2" EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard TargetName="myBorder">
<DoubleAnimation Duration="0:0:0.5" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)">
<DoubleAnimation.EasingFunction>
<CircleEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Duration="0:0:0.5" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
<DoubleAnimation.EasingFunction>
<CircleEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Border.Triggers>
</Border>
</DataTemplate>
If you don't mind the text actually shrinking and growing with the popup you could put it inside a ViewBox
<Viewbox Margin="0,0,0,0">
<TextBlock Text="{Binding Path=Text}" Padding="5,1,5,1.5"/>
</Viewbox>
Hi I have wpf xaml code as shown below
<Image Source="/MyProject;component/Resources/Icons/button_cancel_256.png"
DockPanel.Dock="Right"
Margin="0,1,10,1"
RenderTransformOrigin="0.5,0.5"
>
<Image.RenderTransform>
<ScaleTransform x:Name="ImageScaleTransform"
ScaleX="1" ScaleY="1"
/>
</Image.RenderTransform>
<Image.Effect>
<DropShadowEffect x:Name="ImageGlowEffect"
BlurRadius="20"
ShadowDepth="0"
Color="White">
</DropShadowEffect>
</Image.Effect>
<Image.Triggers>
<EventTrigger RoutedEvent="Image.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="ImageGlowEffect"
Storyboard.TargetProperty="Color"
From="White"
To="Red"
Duration="0:0:1">
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="ImageGlowEffect"
Storyboard.TargetProperty="Color"
From="Red"
To="White"
Duration="0:0:1">
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeftButtonDown">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="ImageScaleTransform"
Storyboard.TargetProperty="ScaleX"
From="1"
To=".9"
Duration="0:0:0.1">
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetName="ImageScaleTransform"
Storyboard.TargetProperty="ScaleY"
From="1"
To=".9"
Duration="0:0:0.1">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeftButtonUp">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="ImageScaleTransform"
Storyboard.TargetProperty="ScaleX"
From=".9"
To="1"
Duration="0:0:0.1">
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetName="ImageScaleTransform"
Storyboard.TargetProperty="ScaleY"
From=".9"
To="1"
Duration="0:0:0.1">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Image.Triggers>
Now i want to create a style or template so that I can apply this to other images where i can specify the color.
Please help i have not been able to do it after various tries.
Adding to what EvAlex posted, you can dynamically change the colors specific to an Image then use DynamicResource and Opacity double animation (in place of ColorAnimation) as below...
<Style TargetType="{x:Type Image}"
x:Key="DropShadowImageStyle">
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform
ScaleX="1"
ScaleY="1" />
</Setter.Value>
</Setter>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect
BlurRadius="20"
ShadowDepth="0"
Opacity="0"
Color="{DynamicResource MyToColor}">
</DropShadowEffect>
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="Image.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Effect.Opacity"
From="0"
To="1"
Duration="0:0:1">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Effect.Opacity"
From="1"
To="0"
Duration="0:0:1">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeftButtonDown">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.ScaleX"
From="1"
To=".9"
Duration="0:0:0.1">
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.ScaleY"
From="1"
To=".9"
Duration="0:0:0.1">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeftButtonUp">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.ScaleX"
From=".9"
To="1"
Duration="0:0:0.1">
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.ScaleY"
From=".9"
To="1"
Duration="0:0:0.1">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
<StackPanel Orientation="Horizontal">
<Image Source="MyImage1.JPG"
Width="50" Height="50" Margin="5"
Style="{StaticResource DropShadowImageStyle}">
<Image.Resources>
<Color x:Key="MyToColor">Red</Color>
</Image.Resources>
</Image>
<Image Source="MyImage2.JPG"
Width="50" Height="50" Margin="5"
Style="{StaticResource DropShadowImageStyle}">
<Image.Resources>
<Color x:Key="MyToColor">Blue</Color>
</Image.Resources>
</Image>
<Image Source="MyImage3.JPG"
Width="50" Height="50" Margin="5"
Style="{StaticResource DropShadowImageStyle}">
<Image.Resources>
<Color x:Key="MyToColor">Orange</Color>
</Image.Resources>
</Image>
</StackPanel>
Here's the style - works well. The problem was with Storyboard.TargetName property. I just removed it and modified Storyboard.TargetProperty. That's why I asked you in a comment what was your problem. It would be much easier for me if you specified additional information from the beginning.
<Style TargetType="Image">
<Setter Property="Margin" Value="0,1,10,1"/>
<Setter Property="DockPanel.Dock" Value="Right"/>
<Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="1" ScaleY="1" />
</Setter.Value>
</Setter>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="20" ShadowDepth="0" Color="White"/>
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="Image.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="Effect.Color"
From="White"
To="Red"
Duration="0:0:1">
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="Effect.Color"
From="Red"
To="White"
Duration="0:0:1">
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeftButtonDown">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.ScaleX"
From="1"
To=".9"
Duration="0:0:0.1">
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.ScaleY"
From="1"
To=".9"
Duration="0:0:0.1">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeftButtonUp">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.ScaleX"
From=".9"
To="1"
Duration="0:0:0.1">
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.ScaleY"
From=".9"
To="1"
Duration="0:0:0.1">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>