Am trying to animate the line in UWP . But unable to achieve it.
I have achieved the same using below WPF code,
<Line X1="10" X2="10" Y1="10" Y2="10" Stroke="Black" StrokeThickness="3" HorizontalAlignment="Left" VerticalAlignment="Stretch" Margin="100,100,0,0">
<Line.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="X2" To="100" Duration="0:0:2"/>
<DoubleAnimation Storyboard.TargetProperty="Y2" To="100" Duration="0:0:2"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Line.Triggers>
</Line>
Can anyone please tell me the equivalent code in UWP for the above .
Thanks in Advance.
Try this
<Line x:Name="MyLine"
X1="10"
X2="10"
Y1="10"
Y2="10"
Stroke="Black"
StrokeThickness="3"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
Margin="100,100,0,0">
<Line.Triggers>
<EventTrigger>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="MyLine"
Storyboard.TargetProperty="X2"
EnableDependentAnimation="True"
To="100"
Duration="0:0:2" />
<DoubleAnimation Storyboard.TargetName="MyLine"
Storyboard.TargetProperty="Y2"
EnableDependentAnimation="True"
To="100"
Duration="0:0:2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Line.Triggers>
</Line>
I have named your Line, set TargetName and enabled EnableDependentAnimation. You will also have to remove RoutedEvent="Loaded" but the animation will be kicked off automatically.
Related
I'm trying to do slide animation for whole grid, but having an exception: "Cannot resolve TargetName translateTransform." What's wrong?
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RenderTransform>
<TranslateTransform x:Name="translateTransform" X="500" />
</Grid.RenderTransform>
<Grid.Resources>
<Storyboard x:Name="StoryBoard1">
<DoubleAnimation Storyboard.TargetName="ContentPanel"
Storyboard.TargetProperty="Opacity"
From="0" To="1" Duration="0:0:1"
/>
<DoubleAnimation Storyboard.TargetName="translateTransform"
Storyboard.TargetProperty="X"
From="500" To="200" Duration="0:0:1"/>
</Storyboard>
</Grid.Resources>
<TextBlock x:Name="Txt2" Text="foo">
</TextBlock>
You are missing x:Key from the Storyboard resource, all the resources needs to have x:Key. My VS2013 says that.
<Grid x:Name="ContentPanel"
Background="Purple"
Grid.Row="1" Margin="12,0,12,0">
<Grid.RenderTransform>
<TranslateTransform x:Name="translateTransform" X="500" />
</Grid.RenderTransform>
<Grid.Resources>
<Storyboard x:Key="hey" x:Name="StoryBoard1">
<DoubleAnimation Storyboard.TargetName="ContentPanel"
Storyboard.TargetProperty="Opacity"
From="0" To="1" Duration="0:0:10"
/>
<DoubleAnimation Storyboard.TargetName="translateTransform"
Storyboard.TargetProperty="X"
From="500" To="0" Duration="0:0:10"/>
</Storyboard>
</Grid.Resources>
<TextBlock x:Name="Txt2" Text="foo">
</TextBlock>
</Grid>
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>
In my project I want marquee n number of images. I have tried but not succeeded. when I give the Duration in same it all images are combined and moving.
My XAML -
<Grid>
<Canvas x:Name="MyCanvas" VerticalAlignment="Center">
<Canvas.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard >
<Storyboard Storyboard.TargetName="img1" Storyboard.TargetProperty="(Canvas.Left)">
<DoubleAnimation From="0" To="514" Duration="0:0:20" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard >
<Storyboard Storyboard.TargetName="img2" Storyboard.TargetProperty="(Canvas.Left)">
<DoubleAnimation From="0" To="514" Duration="0:0:20" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard >
<Storyboard Storyboard.TargetName="img3" Storyboard.TargetProperty="(Canvas.Left)">
<DoubleAnimation From="0" To="514" Duration="0:0:20" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
<Image Name="img1" Source="/Images/01.jpg" Height="180" Width="120" />
<Image Name="img2" Source="/Images/02.jpg" Height="180" Width="120" />
<Image Name="img3" Source="/Images/03.jpg" Height="180" Width="120" />
</Canvas>
</Grid>
My Model is -
Refer the following link and apply it in your case.
http://weblogs.asp.net/razan/archive/2009/10/01/creating-marquee-scrolling-text-in-wpf.aspx
Update 1:
Modified your code as follows seems to meet your requirement
<Grid>
<Canvas x:Name="MyCanvas" VerticalAlignment="Center">
<Canvas.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard >
<Storyboard Storyboard.TargetName="panel" Storyboard.TargetProperty="(Canvas.Left)">
<DoubleAnimation From="0" To="514" Duration="0:0:20" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
<StackPanel x:Name="panel" Orientation="Horizontal">
<Image Name="img1" Source="/Images/01.jpg" Height="180" Width="120" />
<Image Name="img2" Source="/Images/02.jpg" Height="180" Width="120" />
<Image Name="img3" Source="/Images/03.jpg" Height="180" Width="120" />
</StackPanel>
</Canvas>
</Grid>
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 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>