i have a spherical image i want to rotate around its z-axis. I tried the following code, it works but image is rotating around x-axis.
<Image Name="logo" Grid.Column="1" Source="MyLogo.png"
Width="140" Height="140" VerticalAlignment="Top"
HorizontalAlignment="Left" Margin="80,10,0,0" Grid.Row="1"
>
<Image.RenderTransform>
<RotateTransform x:Name="TransRotate" CenterX="70" CenterY="70" />
</Image.RenderTransform>
<Image.Triggers>
<EventTrigger RoutedEvent="Image.Loaded">
<BeginStoryboard>
<Storyboard TargetProperty="Angle">
<DoubleAnimation
Storyboard.TargetName="TransRotate"
Storyboard.TargetProperty="Angle"
By="360"
Duration="0:0:10"
AutoReverse="False"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
If RotateTransform doesn't rotate around the right axis then try ScaleTransform
<Image Name="logo" Grid.Column="1" Source="MyLogo.png"
Width="140" Height="140" VerticalAlignment="Top"
HorizontalAlignment="Left" Margin="80,10,0,0" Grid.Row="1"
RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<ScaleTransform x:Name="TransScale" />
</Image.RenderTransform>
<Image.Triggers>
<EventTrigger RoutedEvent="Image.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="ScaleX"
Storyboard.TargetName="TransScale"
To="-1"
Duration="0:0:10"
AutoReverse="True"
RepeatBehavior="Forever">
<DoubleAnimation.EasingFunction>
<SineEase EasingMode="EaseInOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
I've used RenderTransformOrigin on Image control instead of CenterX and CenterY because it's size independent. And I've added a sinusoidal EasingFunction for smoother animation.
Related
I'm trying to animate an <img/> by throwing 3 animations at it at the same time:
Opacity, Rotate and Scale.
First I got it to FadeIn just like I wanted. Then I managed to make it rotate too. But when I got into Scaling it that's when everything started to get messed up.
It's no throwing any exceptions, and it's kind of "working".... but no. Now it does the fadeIn, but it doesn't do the rotation at all. The scaling is doing "something", but definetely not what it was supposed to. It's doing a super slow scaling when, or at least that's what a thought, 0:0:0:5 isn't precisely much time...
So summarizing, it's not throwing any exceptions, it does animate opacity, it doesnt animate rotation, and animates scaling in a wrong way.
I'm pretty new to xaml/wpf, and after hours seeing examples and threads i Realize i'm stuck. I'm missing something, but can't figure it out. Thanks in advance.
<Window x:Class="TestWPF.MainWindow"
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:local="clr-namespace:TestWPF"
mc:Ignorable="d"
Title="TBNews" Height="400" Width="400" Background="{x:Null}" WindowStartupLocation="CenterScreen" WindowStyle="None" AllowsTransparency="True" Topmost="True">
<Canvas>
<Image Source="logo_planeta.png" Height="400" Width="400" MaxHeight="400" MaxWidth="400" Name="planeta_img" RenderTransformOrigin="0.5, 0.5">
<Image.RenderTransform>
<TransformGroup>
<RotateTransform CenterX="0.5" CenterY="0.5" />
<ScaleTransform x:Name="ImageScale" ScaleX="1" ScaleY="1" />
</TransformGroup>
</Image.RenderTransform>
<Image.Triggers>
<EventTrigger RoutedEvent="Image.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="planeta_img"
Storyboard.TargetProperty="Opacity"
From="0.0" To="1.0" Duration="0:0:3" />
<DoubleAnimation
Storyboard.TargetName="planeta_img"
Storyboard.TargetProperty="(Image.RenderTransform).(RotateTransform.Angle)"
To="-360" Duration="0:0:3" RepeatBehavior="Forever" />
<DoubleAnimation
Storyboard.TargetName="ImageScale"
Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
To="1.5" Duration="0:0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
<DoubleAnimation
Storyboard.TargetName="ImageScale"
Storyboard.TargetProperty="(ScaleTransform.ScaleY)"
To="1.5" Duration="0:0:1:0" AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
<Image Source="logo_letras.png" MaxHeight="400" MaxWidth="400" Name="tbnews_img">
<Image.Triggers>
<EventTrigger RoutedEvent="Image.Loaded">
<BeginStoryboard>
<Storyboard>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
</Canvas>
</Window>
There are multiple things wrong.
CenterX and CenterY are in absolute units, not relative like RenderTransformOrigin. You don't need to set them at all
A Duration of 0:0:0:5 is not 0.5 seconds, but 5.
(Image.RenderTransform).(RotateTransform.Angle) is an invalid target property path when there is no RotateTransform (but a TransformGroup) in the RenderTransform property.
For a repeated rotation better set By instead of To.
Without all the AutoReverse and RepeatBehavior stuff, and all Durations set equally to 1.5 seconds, this should give you a starting point:
<Image ... RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<TransformGroup>
<RotateTransform/>
<ScaleTransform/>
</TransformGroup>
</Image.RenderTransform>
<Image.Style>
<Style TargetType="Image">
<Style.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
From="0" To="1" Duration="0:0:1.5"/>
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.Children[0].Angle"
By="360" Duration="0:0:1.5"/>
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.Children[1].ScaleX"
To="1.5" Duration="0:0:1.5"/>
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.Children[1].ScaleY"
To="1.5" Duration="0:0:1.5"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
I have a tabControl that Contain several TabHeaders,I made it so that the text size of the TabHeader will shrink a little when mouse is over and will become bigger when the TabHeader is selected. I want to add an image into the TabHeader that will act the same way and to act as one item with the text so that both the text and the image will shrink a little when mouse is over and get bigger when TabHeader is selected. Right now both do that but separately meaning that they animate when I hover or click either of them and I want them to act as one
here is the xaml of the TabHeader
<TabItem.Header>
<StackPanel>
<Grid ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" x:Name="SalesImg" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Images/Sales.png">
<Image.RenderTransform>
<ScaleTransform x:Name="scale" CenterX="50" CenterY="50" ScaleX="1" ScaleY="1" />
</Image.RenderTransform>
<Image.Triggers>
<EventTrigger RoutedEvent="Image.MouseEnter">
<BeginStoryboard>
<BeginStoryboard.Storyboard>
<Storyboard Duration="0:0:0.2">
<DoubleAnimation Storyboard.TargetName="scale" Storyboard.TargetProperty="ScaleX" To="1.5" />
<DoubleAnimation Storyboard.TargetName="scale" Storyboard.TargetProperty="ScaleY" To="1.5" />
</Storyboard>
</BeginStoryboard.Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeave">
<BeginStoryboard>
<BeginStoryboard.Storyboard>
<Storyboard Duration="0:0:0.2">
<DoubleAnimation Storyboard.TargetName="scale" Storyboard.TargetProperty="ScaleX" To="1" />
<DoubleAnimation Storyboard.TargetName="scale" Storyboard.TargetProperty="ScaleY" To="1" />
</Storyboard>
</BeginStoryboard.Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
<TextBlock Grid.Column="1" Text="Sales" HorizontalAlignment="Center" />
</Grid>
</StackPanel>
</TabItem.Header>
You can put the container of the image and text - in this case, a grid - into a ViewBox, and animate on the ViewBox.
ViewBox takes the all the contents inside it as a single child, so both image and text will grow and shrink in size as a whole.
<TabItem.Header>
<Grid Width="126" Height="48">
<Grid.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<BeginStoryboard.Storyboard>
<Storyboard Duration="0:0:0.2">
<DoubleAnimation Storyboard.TargetName="scale" Storyboard.TargetProperty="ScaleX" To="1.5" />
<DoubleAnimation Storyboard.TargetName="scale" Storyboard.TargetProperty="ScaleY" To="1.5" />
</Storyboard>
</BeginStoryboard.Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<BeginStoryboard.Storyboard>
<Storyboard Duration="0:0:0.2">
<DoubleAnimation Storyboard.TargetName="scale" Storyboard.TargetProperty="ScaleX" To="1" />
<DoubleAnimation Storyboard.TargetName="scale" Storyboard.TargetProperty="ScaleY" To="1" />
</Storyboard>
</BeginStoryboard.Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
<Viewbox Width="84" Height="32">
<Viewbox.RenderTransform>
<ScaleTransform x:Name="scale" CenterX="42" CenterY="16" ScaleX="1" ScaleY="1" />
</Viewbox.RenderTransform>
<Grid ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" x:Name="SalesImg" HorizontalAlignment="Center" VerticalAlignment="Center"
Source="Images/Sales.png"/>
<TextBlock Grid.Column="1" Text="Sales" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</Viewbox>
</Grid>
</TabItem.Header>
There is a great example of a simple rotation animation of a rectangle here: WPF Rotate rectangle animation in XAML
However, I only want to rotate my rectangle on mouse over, and stop on mouse out. Here is my xaml so far:
<Button Command="{Binding SettingsCommand}" Style="{DynamicResource SettingButton}">
<Rectangle Width="15" Height="15" RenderTransformOrigin="0.5, 0.5">
<Rectangle.RenderTransform>
<RotateTransform/>
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Rectangle.RenderTransform).(RotateTransform.Angle)" To="-360" Duration="0:0:1" RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
<Rectangle.Fill>
<VisualBrush Stretch="Fill" Visual="{StaticResource appbar_cog}"/>
</Rectangle.Fill>
</Rectangle>
</Button>
How can I modify this to only work on mouse over?
Thanks!
You may use triggers for the MouseEnter and MouseLeave events:
<Button Command="{Binding SettingsCommand}" Style="{DynamicResource SettingButton}">
<Rectangle Width="15" Height="15" RenderTransformOrigin="0.5, 0.5">
<Rectangle.RenderTransform>
<RotateTransform/>
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.Angle"
To="-360" Duration="0:0:1" RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.Angle"
To="0" Duration="0:0:0"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
<Rectangle.Fill>
<VisualBrush Stretch="Fill" Visual="{StaticResource appbar_cog}"/>
</Rectangle.Fill>
</Rectangle>
</Button>
hi guyz i saw and tried the code using scaletransform from andrej blog on how to popout the image smoothly and it's nice. here's the code
<Window.Resources>
<Storyboard x:Key="expandStoryboard">
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX"
To="2" Duration="0:0:0.2" />
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY"
To="2" Duration="0:0:0.2" />
</Storyboard>
<!-- This storyboard will make the image revert to its original size -->
<Storyboard x:Key="shrinkStoryboard">
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX"
To="1" Duration="0:0:0.2" />
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY"
To="1" Duration="0:0:0.2" />
</Storyboard>
</Window.Resources>
and in grid area, something like this:
<Image Name="image2" Source="C:\Documents and Settings\My Documents\Visual Studio 2010\settings_256.png" Margin="23,44,372,221" HorizontalAlignment=" center" VerticalAlignment="Center" >
<Image.Triggers>
<EventTrigger RoutedEvent="Image.MouseEnter">
<BeginStoryboard Storyboard="{StaticResource expandStoryboard}" />
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeave">
<BeginStoryboard Storyboard="{StaticResource shrinkStoryboard}" />
</EventTrigger>
</Image.Triggers>
<Image.RenderTransform>
<ScaleTransform ScaleX="1" ScaleY="1"/>
</Image.RenderTransform>
</Image>
so when im going to point my mouse in the image it will resize the height and the width of the image smoothly. but what i want to do also is if im going to do mouseover, i want my left and top of the image will change the position like decreasing the margin something like image1.margin(left-5,top-5). so it will pop the image out as width++ height++ left-- top--
anyone? thanks and God bless :)
You could use UIElement.RenderTransformOrigin Property:
<Image RenderTransformOrigin="0.5, 0.5"
Name="image2" Source="C:\Documents and Settings\My Documents\Visual Studio 2010\settings_256.png"
Margin="23,44,372,221" HorizontalAlignment="center" VerticalAlignment="Center">
<Image.Triggers>
<EventTrigger RoutedEvent="Image.MouseEnter">
<BeginStoryboard Storyboard="{StaticResource expandStoryboard}" />
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeave">
<BeginStoryboard Storyboard="{StaticResource shrinkStoryboard}" />
</EventTrigger>
</Image.Triggers>
<Image.RenderTransform>
<ScaleTransform ScaleX="1" ScaleY="1"/>
</Image.RenderTransform>
</Image>
I have a problem in wpf xaml and i'm pretty new on this so it may be something basic
i want to rotate a ellipse 360 degree
<Ellipse Name="test" Fill="Black" StrokeThickness="5" Margin="0,0,0,0" Height="66">
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.Loaded" SourceName="test">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="test"
Storyboard.TargetProperty="(Ellipse.RenderTransform).(RotateTransform.Angle)"
From="0"
To="360"
Duration="0:0:0.5"
RepeatBehavior="1x" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
But nothing happens, what is wrong?
First of all. you will need the RotateTransform object in your ellipse:
<Ellipse.RenderTransform>
<RotateTransform x:Name="transform" />
</Ellipse.RenderTransform>
Change these properties in your Storyboard:
Storyboard.TargetName="transform"
Storyboard.TargetProperty="Angle"
And it should work!
You can also only change the TargetProperty, and leave the TargetName on test:
Storyboard.TargetName="test"
Storyboard.TargetProperty="RenderTransform.Angle"
That way, your RotateTransform object does not need a name!
Putting it all together:
<Ellipse Name="test" Fill="Black" StrokeThickness="5" Margin="0,0,0,0" Height="66">
<Ellipse.RenderTransform>
<RotateTransform />
</Ellipse.RenderTransform>
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.Loaded" SourceName="test">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="test"
Storyboard.TargetProperty="RenderTransform.Angle"
From="0" To="360" Duration="0:0:0.5" RepeatBehavior="1x" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>