I have read How can I make an Image grow in size (give the illusion of selection) through a WPF animation? and tried to change the height of an image with a DoubleAnimation but it does not work.
<Image Name="image" Height="100" Source="http://www.online-image-editor.com/styles/2013/images/example_image.png" Stretch="None">
<Image.Resources>
<Storyboard x:Name="show">
<DoubleAnimation
Storyboard.TargetName="image"
Storyboard.TargetProperty="Height"
From="100" To="400" Duration="0:0:1"
/>
</Storyboard>
</Image.Resources>
</Image>
<Button Content="image stretch" Click="button_clicked" />
This is the button_clicked function:
private void button_clicked(object sender, RoutedEventArgs e)
{
show.Begin();
}
[edit]: Because Johan Falk´s answer I tried the above code with the Windows Phone Silverlight toolkit and it works. So the solution is to use Windows Phone Silverlight.
You just have a small error in your code, by setting Stretch="None" you don't allow the image to stretch in any direction, hence Always keeping its original size. Change Stretch to for example Uniform and it should work.
Here is the sample code I used to verify it with:
<StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Image Source="/Assets/ApplicationIcon.png" x:Name="testImage" Stretch="Uniform">
<Image.Resources>
<Storyboard x:Name="Animation">
<DoubleAnimation Storyboard.TargetName="testImage" Storyboard.TargetProperty="Height" From="100" To="200" Duration="0:0:1" />
</Storyboard>
</Image.Resources>
</Image>
<Button Content="Expand image" Grid.Row="1" Click="Button_Click"></Button>
</StackPanel>
private void Button_Click(object sender, RoutedEventArgs e)
{
Animation.Begin();
}
Related
There's a lot of questions around this on the net, but after reading them, and the MS docs on animation control, I'm unable to mimic storyboard control from XAML event triggers in C# code.
In this XAML file, I have a canvas that I am rotating. I'd like to add interactivity to the rotation,
<Window x:Class="GraphicsBook.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:k="clr-namespace:GraphicsBook;assembly=Testbed2D"
Title="2D Testbed"
KeyDown="KeyDownHandler"
Height="600"
Width="600" >
<DockPanel LastChildFill="True">
<StackPanel x:Name="stack" DockPanel.Dock ="Top" Orientation="Vertical" Background="#ECE9D8">
<Button Name="StartAnimationClick">Start animation</Button>
<Button Name="StopAnimationClick" Click="stopAnimationClick">Stop animation</Button>
<Canvas x:Name="Grid">
<Canvas.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="CanvasRotation" CenterX="300" CenterY="300" Angle="0"/>
</TransformGroup>
</Canvas.RenderTransform>
</Canvas>
<StackPanel.Triggers>
<EventTrigger RoutedEvent="Button.Click" SourceName="StartAnimationClick">
<BeginStoryboard Name="GridRotationStoryboard">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="CanvasRotation"
Storyboard.TargetProperty="Angle"
From="0.0" To="360.0"
Duration="00:00:10.00" RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<!--<EventTrigger RoutedEvent="Button.Click" SourceName="StopAnimationClick">
<StopStoryboard BeginStoryboardName="GridRotationStoryboard"/>
</EventTrigger>-->
</StackPanel.Triggers>
</StackPanel>
</DockPanel>
</Window>
The commented event trigger,
<!--<EventTrigger RoutedEvent="Button.Click" SourceName="StopAnimationClick">
<StopStoryboard BeginStoryboardName="GridRotationStoryboard"/>
</EventTrigger>-->
Does indeed work as expected, that is, if I click the button, the animation stops. However, the version of the XAML above tries to replicate this functionality in C#, but this doesn't work. The click handler looks like this,
private void stopAnimationClick(object sender, RoutedEventArgs e)
{
Debug.Print("Stop animation");
// ???
}
I'm unable to control the animation object in ???, not matter what technique I try to get a handle on it. I must be plumbing the pieces incorrectly somehow, but I can't see what is wrong.
You can mimic what the EventTrigger does by calling BeginAnimation with a second argument of null:
private void stopAnimationClick(object sender, RoutedEventArgs e)
{
CanvasRotation.BeginAnimation(RotateTransform.AngleProperty, null);
}
How to animate the text from bottom to top in UWP. Is there any better way to trigger style properties in UWP.
How to make text moving Animation from bottom to top in UWP
You could use DoubleAnimation to approach, Please refer the following code.
<Grid>
<Grid.Resources>
<Storyboard x:Name="MoveStoryboard">
<DoubleAnimation Storyboard.TargetName="Tbk"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
From="0" Windows10version1903:To="{x:Bind TbkY, Mode=TwoWay}" Duration="0:0:2">
</DoubleAnimation>
</Storyboard>
</Grid.Resources>
<TextBlock Loaded="Tbk_Loaded"
Name="Tbk"
Text="hello Nico"
VerticalAlignment="Bottom"
Visibility="Visible"
HorizontalAlignment="Center"
FontSize="22"
TextLineBounds="Full" >
<TextBlock.RenderTransform>
<CompositeTransform/>
</TextBlock.RenderTransform>
</TextBlock>
<Button Content="Move" Click="Button_Click"/>
</Grid>
Code Behind
private void Button_Click(object sender, RoutedEventArgs e)
{
MoveStoryboard.Begin();
}
public double TbkY { get; set; }
private void Tbk_Loaded(object sender, RoutedEventArgs e)
{
TbkY = -Tbk.ActualOffset.Y;
}
MVVM aproach to trigger story bord on datachange
We can also trigger the story board on Data change. I tried the below code its works for me. Use the below namespace before going to start . The nuget package will be availble on the link Microsoft.Xaml.Behaviors.Uwp.Managed
xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
xmlns:Media ="using:Microsoft.Xaml.Interactions.Media"
<Page.Resources>
<Storyboard x:Name="MoveStoryboard">
<DoubleAnimation Storyboard.TargetName="txttext1"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
From="0" To="-200" Duration="0:0:2">
</DoubleAnimation>
</Storyboard>
</Page.Resources>
<Grid>
<TextBlock Text="Sample text to Animate">
<interactivity:Interaction.Behaviors>
<core:DataTriggerBehavior Binding ={Binding AnimateText} Value = true>
<Media:ControlStoryboardAction Storyboard="{StaticResource MoveStoryboard}"/>
</core:DataTriggerBehavior>
</interactivity:Interaction.Behaviors>
<TextBlock.RenderTransform>
<CompositeTransform/>
</TextBlock.RenderTransform>
</TextBlock>
</Grid>
I have changed the AnimateText property in ViewModel. Whenever the property value is changed .The textblock will move bottom to top based on(- Y value that is To="-200").
I have set of images which are placed in pivot control.i want zoom in the image to a specific point and then go back to its normal size through animation.how can i do that.Any help will be appreciated.
<StackPanel>
<StackPanel.Resources>
<Storyboard x:Name="story">
<DoubleAnimation Storyboard.TargetName="img"
Storyboard.TargetProperty="Height"
From="300"
To="600"
Duration="0:0:2">
</DoubleAnimation>
</Storyboard>
</StackPanel.Resources>
<Button Height="100" Width="100" Click="Button_Click"></Button>
<Image x:Name="img" Height="300" Width="200" Source="/Assets/10.png"></Image>
</StackPanel>
first tip:-
avoid writing Resources into specific control. Instead define all resources into <Page.Resources>
Now, if you want to animate some control, then you have to use Scaling property of an element.
Check below code. here, I'm pointing out how to zoom the image on any event handler.
XAML code of control
<Image x:Name="img" Source="/Assets/image1.png" RenderTransformOrigin="0.5 0.5" >
<Image.RenderTransform>
<CompositeTransform x:Name="compositeTransform" />
</Image.RenderTransform>
</Image>
Defining Storyborad
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="story">
<DoubleAnimation Storyboard.TargetName="compositeTransform"
Storyboard.TargetProperty="ScaleX"
From="0" To="5"
Duration="0:0:2" />
<DoubleAnimation Storyboard.TargetName="compositeTransform"
Storyboard.TargetProperty="ScaleY"
From="0" To="5"
Duration="0:0:2" />
</Storyboard>
</phone:PhoneApplicationPage.Resources>
On any of the event handler
story.Begin();
Hope that helps..
If I understand your problem, then you should use the Storyboard, EventTrigger and ScaleX Instead of Height for Resize image.
Storyboarded and trigger animations
Here is one option for the loaded event.
<StackPanel>
<Button Height="100" Width="100" Click="Button_Click"></Button>
<Image x:Name="img" Height="300" Width="200" Source="/Assets/10.png">
<Image.RenderTransform>
<ScaleTransform x:Name="ImageScale" ScaleX="1" ScaleY="1"/>
</Image.RenderTransform>
<Image.Triggers>
<EventTrigger RoutedEvent="Image.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ImageScale" Storyboard.TargetProperty="(ScaleTransform.ScaleX)" To="1.5" Duration="0:0:0.7" AutoReverse="True"/>
<DoubleAnimation Storyboard.TargetName="ImageScale" Storyboard.TargetProperty="(ScaleTransform.ScaleY)" To="1.5" Duration="0:0:0.7" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
</StackPanel>
I have a image that rotates, and when you tap on it, it stops and gathers the rotation on it. But for some reason, sometimes it jerks back (or around) from the position it was tapped. Does anyone know how to fix this:
XAML:
<StackPanel>
<StackPanel.Resources>
<Storyboard x:Name="AttackCircleAnimation">
<DoubleAnimation x:Name="combatCircleRotation"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)"
Storyboard.TargetName="combatCircleSword" Duration="0:0:1" From="0" To="360" RepeatBehavior="Forever" />
</Storyboard>
</StackPanel.Resources>
</StackPanel>
<Image x:Name="combatCircleSword" RenderTransformOrigin="0.5,0.5" Tap="TapProcessAttack">
<Image.RenderTransform>
<CompositeTransform Rotation="0"/>
</Image.RenderTransform>
</Image>
CODE:
private void TapProcessAttack(object sender, System.Windows.Input.GestureEventArgs e)
{
AttackCircleAnimation.Pause();
CompositeTransform t = combatCircleSword.RenderTransform as CompositeTransform;
spinFinalValue = t.Rotation;
}
I've worked with Opacity property in storyboard
but I cant figure it out how to move an UI element like grid stackpanel button ..... in c#?
(I am writing the storyboard in c# not in xaml )
Well, that depends on your actual layout: Do you want to animate a button in a Grid or in a Canvas (could animate the Margin property or the Canvas.Left attached property, respectively)? Do you want to animate the property itself or a transform (the latter would animate a RenderTransform - specifically a TranslateTransform). You would use the RenderTransform if you still want to refer to the "old" position.
One simple way is:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Grid.Triggers>
<EventTrigger RoutedEvent="Grid.Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation Storyboard.TargetName="myButton"
Storyboard.TargetProperty="(Canvas.Left)" From="1" To="350"
Duration="0:0:10" BeginTime="0:0:0"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
<Canvas x:Name="myCanvas" Background="Yellow">
<Button x:Name="myButton" Width="100" Height="30" Canvas.Left="100" Canvas.Top="100" />
</Canvas>
</Grid>
</Window>
it would be better if you use blend for storyboard ..i have genrated a code for stackpanel movement towards right ..just check it..
you can go through this video aslo it's very good it will perfectly work in your case
<Page.Resources>
<Storyboard x:Name="Storyboard1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="hello">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="100"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Page.Resources>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<StackPanel Name="hello" Orientation="Vertical" HorizontalAlignment="Left" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5" >
<StackPanel.RenderTransform>
<CompositeTransform/>
</StackPanel.RenderTransform>
<TextBlock Text="hello1" FontSize="50" />
<Button Content="Button" FontSize="50" Click="Button_Click_1" />
</StackPanel>
</Grid>
and to start do this on button click..
private void Button_Click_1(object sender, RoutedEventArgs e)
{
Storyboard1.Begin();
}
for better understand just read about how to use blend..