Doubleanimation does not work, because the typ is an integer. Are there any Integeranimation class? Or doing it in a different manner.
I'm not interested in static animations, but event-driven (preferably
programmatic) animations.
public static void Swap(UIElement ui1, UIElement ui2, double seconds)
{
var z2 = (int)ui1.GetValue(Canvas.ZIndexProperty);
var z3 = (int)ui2.GetValue(Canvas.ZIndexProperty);
DoubleAnimation da1 = new DoubleAnimation();
DoubleAnimation da2 = new DoubleAnimation();
Duration d = new Duration(TimeSpan.FromSeconds(seconds));
da1.Duration = d;
da2.Duration = d;
Storyboard sb = new Storyboard();
Storyboard.SetTarget(da1, ui1);
Storyboard.SetTarget(da2, ui2);
Storyboard.SetTargetProperty(da1, new PropertyPath("(Canvas.ZIndex)"));
Storyboard.SetTargetProperty(da2, new PropertyPath("(Canvas.ZIndex)"));
sb.Duration = d;
sb.Children.Add(da1);
sb.Children.Add(da2);
da1.To = (double)z3;
da2.To = (double)z2;
sb.Begin();
}
private void Btn1_Click_1(object sender, RoutedEventArgs e)
{
var z2 = (int)Image2.GetValue(Canvas.ZIndexProperty);
var z3 = (int)Image3.GetValue(Canvas.ZIndexProperty);
Swap(Image2, Image3, 3);
}
You can animate discreet values using ObjectAnimationUsingKeyFrames with DiscreteObjectKeyFrame.
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.ZIndex)" Storyboard.TargetName="MyObject">
<DiscreteObjectKeyFrame KeyTime="0" Value="250"/>
</ObjectAnimationUsingKeyFrames>
or you can do it in code.
You can't animate an int property. Think about what it would actually mean.
What might come close (visually) is animating the Opacity. And maybe change a Zindex at an animation-complete event.
Related
i try to do this xaml code programmatically
<Grid.Triggers>
<EventTrigger RoutedEvent="UIElement.MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="tranny" Storyboard.TargetProperty="ScaleX" To="1.2" Duration="0:0:1">
<DoubleAnimation.EasingFunction>
<ElasticEase Oscillations="1" Springiness="8"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="tranny" Storyboard.TargetProperty="ScaleY" To="1.2" Duration="0:0:1">
<DoubleAnimation.EasingFunction>
<ElasticEase Oscillations="1" Springiness="8" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
it do it but it didn't work with i don't know why but there is no errors if there is any onwe can write this xaml in C# programmatically answer me
please if you have answer can help me add it if no please don't give -1 that is programmatically code that i wrote
var secondryGrid = new Grid();
var elasticEase = new ElasticEase();
elasticEase.Oscillations = 1;
elasticEase.Springiness = 8;
var timeSpan = new TimeSpan(0, 0, 0, 100);
var duration = new Duration(timeSpan);
var doubleAnimation = new DoubleAnimation();
doubleAnimation.To = 1.2;
doubleAnimation.Duration = duration;
doubleAnimation.EasingFunction = elasticEase;
var path = new PropertyPath("ScaleX");
var storyBoard = new Storyboard();
Storyboard.SetTargetProperty(doubleAnimation, path);
storyBoard.Children.Add(doubleAnimation);
var beginStoryBoard = new BeginStoryboard();
beginStoryBoard.Storyboard = storyBoard;
elasticEase = new ElasticEase();
elasticEase.Oscillations = 1;
elasticEase.Springiness = 8;
timeSpan = new TimeSpan(0, 0, 0, 100);
duration = new Duration(timeSpan);
doubleAnimation = new DoubleAnimation();
doubleAnimation.To = 1.2;
doubleAnimation.Duration = duration;
doubleAnimation.EasingFunction = elasticEase;
path = new PropertyPath("ScaleY");
Storyboard.SetTargetProperty(doubleAnimation, path);
storyBoard.Children.Add(doubleAnimation);
var gridEventTrigger = new EventTrigger();
gridEventTrigger.RoutedEvent = MouseEnterEvent;
gridEventTrigger.Actions.Add(beginStoryBoard);
secondryGrid.Triggers.Add(gridEventTrigger);
sorry for my bad language
In code, this is done somewhat easier.
You don't need to instantiate BeginStoryboard and Storyboard; these classes are designed to make it easier to use animations in XAML.
In code, you can set the animation directly to the desired property.
This requires significantly less code.
Example:
{
Grid grid = new Grid();
grid.MouseEnter += OnGridMouseEnter;
}
// An animation instance is created once and can then be reused.
private static readonly DoubleAnimation xyAnimation = new DoubleAnimation(1.2, TimeSpan.FromSeconds(1))
{
EasingFunction = new ElasticEase()
{
Oscillations = 1,
Springiness = 8
}
};
private void OnGridMouseEnter(object sender, MouseEventArgs e)
{
tranny.BeginAnimation(ScaleTransform.ScaleXProperty, xyAnimation);
tranny.BeginAnimation(ScaleTransform.ScaleYProperty, xyAnimation);
}
P.S. It is not clear from your code how you create the tranny transformation.
My example is created on the assumption that there is a tranny field that contains the transformation that needs to be animated.
I want to make a bubble window that GRADUALLY appears and vanishes after having displayed a message. I want its position to be near the tray and in the constructor I use for that:
var screenSize = System.Windows.SystemParameters.WorkArea;
this.Left = screenSize.Right - this.Width;
this.Top = screenSize.Bottom - this.Height;
this has worked properly other times but now it doesn't.
Strangely enough also the opacity doesn't change. So to put it in a nutshell the window appear all of a sudden with no gradual transition at the center of the screen instead than near the tray.
This is the code:
public BubbleWindow(string strMessage, double milliseconds)
{
InitializeComponent();
btYes.Content = strMessage;
var screenSize = System.Windows.SystemParameters.WorkArea;
this.Left = screenSize.Right - this.Width;
this.Top = screenSize.Bottom - this.Height;
int interval = (int)(milliseconds / 25);
for (double iii = 0; iii <= 1; iii += .1)
{
Thread.Sleep(interval);
this.Opacity = iii;
Dispatcher.Invoke((Action)(() => { }), DispatcherPriority.Render);
this.UpdateLayout();
}
this.Opacity = 1;
}
Thanks for any help
You can use this code in your XAML
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
This is pure XAML way
Or you can use
<Storyboard x:Name="anim">
<DoubleAnimation
Storyboard.TargetName="MyRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:5" />
</Storyboard>
and then start the animation from c#
you can take reference from here
As for the position problem I had put the WindowPosition=CenterScreen in my xaml code. That overrode the .left and .top command.
For the sake of completeness this is the complete Fade IN - wait - Fade out cycle:
private Storyboard myStoryboard;
public MainWindow()
{
InitializeComponent();
DoubleAnimation fadeInAnimation = new DoubleAnimation() { From = 0.0, To = 1.0, Duration = new Duration(TimeSpan.FromSeconds(1)) };
fadeInAnimation.Completed += FadeInAnimation_Completed;
myStoryboard = new Storyboard();
myStoryboard.Children.Add(fadeInAnimation);
Storyboard.SetTargetName(fadeInAnimation, MyRectangle.Name);
Storyboard.SetTargetProperty(fadeInAnimation, new PropertyPath(Rectangle.OpacityProperty));
// Use the Loaded event to start the Storyboard.
MyRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);
}
private void myRectangleLoaded(object sender, RoutedEventArgs e)
{
myStoryboard.Begin(this);
}
private void FadeInAnimation_Completed(object sender, EventArgs e)
{
DispatcherTimer timerFadeOut = new DispatcherTimer();
timerFadeOut.Interval = TimeSpan.FromSeconds(2);
timerFadeOut.Tick += TimerFadeOut_Tick;
timerFadeOut.Start();
}
private void TimerFadeOut_Tick(object sender, EventArgs e)
{
DoubleAnimation fadeOutAnimation = new DoubleAnimation() { From = 1.0, To = 0.0, Duration = new Duration(TimeSpan.FromSeconds(1)) };
myStoryboard = new Storyboard();
myStoryboard.Children.Add(fadeOutAnimation);
Storyboard.SetTargetName(fadeOutAnimation, MyRectangle.Name);
Storyboard.SetTargetProperty(fadeOutAnimation, new PropertyPath(Rectangle.OpacityProperty));
myStoryboard.Begin(this);
}
This works. That being said I am open to corrections.
I cannot to synchronize WPF animation of the position and size at the same time.
Please have a look at my code and let me know if something is wrong there.
Thank you!
void AnimatePlugin(double fromTop, double toTop, double fromLeft, double toLeft,
double fromH, double toH, double fromW, double toW, UIElement control)
{
Storyboard sb = new Storyboard();
#region Top
DoubleAnimation daTop = new DoubleAnimation();
daTop.From = fromTop;
daTop.To = toTop;
daTop.Duration = new Duration(TimeSpan.FromSeconds(1));
sb.Children.Add(daTop);
Storyboard.SetTargetProperty(daTop, new PropertyPath("(Canvas.Top)"));
Storyboard.SetTarget(daTop, control);
#endregion
#region Left
DoubleAnimation daLeft = new DoubleAnimation();
daLeft.From = fromLeft;
daLeft.To = toLeft;
daLeft.Duration = new Duration(TimeSpan.FromSeconds(1));
sb.Children.Add(daLeft);
Storyboard.SetTargetProperty(daLeft, new PropertyPath("(Canvas.Left)"));
Storyboard.SetTarget(daLeft, control);
#endregion
#region Heigh
DoubleAnimation daH = new DoubleAnimation();
daH.From = fromH;
daH.To = toH;
daH.Duration = new Duration(TimeSpan.FromSeconds(1));
sb.Children.Add(daH);
Storyboard.SetTargetProperty(daH, new PropertyPath("(Canvas.Height)"));
Storyboard.SetTarget(daH, control);
#endregion
#region Width
DoubleAnimation daW = new DoubleAnimation();
daW.From = fromW;
daW.To = toW;
daW.Duration = new Duration(TimeSpan.FromSeconds(1));
sb.Children.Add(daW);
Storyboard.SetTargetProperty(daW, new PropertyPath("(Canvas.Width)"));
Storyboard.SetTarget(daW, control);
#endregion
sb.Completed += (w, r) => { control.UpdateLayout(); };
sb.Begin();
}
Only Canvas.Left and and Canvas.Top are attached properties....(and you are specifying them correctly with brackets).
However, "Width" and "Height" are not attached properties they are base properties of FrameworkElement......just use PropertyPath("Width") and PropertyPath("Height")
Instead of using a string to specify the path to the property, you can use the PropertyPath that takes a DependencyProperty type.....so use PropertyPath(Canvas.TopProperty), PropertyPath(Canvas.LeftProperty), PropertyPath(Canvas.WidthProperty), PropertyPath(Canvas.HeightProperty).
This way you don't need to worry yourself with using the correct syntax for the PropertyPath string, which is different depending on if the property is attached or not.
I have a grid of images and buttons, and I want to animate motion from one position to another (actually a few spaces to the left) automatically, but it hasn't worked. I've tried using a storyboard in xaml and programatically as in the code below, but its now working. Please help!!!
public static void MoveTo(Grid target)
{
Canvas.SetLeft(target, 0);
var top = Canvas.GetTop(target);
var left = Canvas.GetLeft(target);
TranslateTransform trans = new TranslateTransform();
target.RenderTransform = trans;
double newX = (double)(left - 300);
double newY = (double)top;
DoubleAnimation anim1 = new DoubleAnimation(top, -15, TimeSpan.FromSeconds(10));
//DoubleAnimation anim1 = new DoubleAnimation(top, newY - top, TimeSpan.FromSeconds(10));
DoubleAnimation anim2 = new DoubleAnimation(left, newX - left, TimeSpan.FromSeconds(10));
anim1.AutoReverse = true;
anim1.RepeatBehavior = RepeatBehavior.Forever;
trans.BeginAnimation(TranslateTransform.XProperty, anim1);
trans.BeginAnimation(TranslateTransform.YProperty, anim2);
}
totally TranslateTransform isnt good for that you want .better to use thinkness animation
i advise you dont use canavas and change it to grid but if you use canavas use this code
private void Animationsss(Grid grd)
{
//create an animation
DoubleAnimation da = new DoubleAnimation();
//set from animation to start position
//dont forget set canvas.left for grid if u dont u will get error
da.From = Canvas.GetLeft(grd);
//set second position of grid
da.To = -100;
//set duration
da.Duration = new Duration(TimeSpan.FromSeconds(2));
//run animation if u want stop ,start etc use story board
grd.BeginAnimation(Canvas.LeftProperty, da);
}
if you use grid code is this :
private void Animation(Grid grd)
{
ThicknessAnimation ta = new ThicknessAnimation();
//your first place
ta.From = grd.Margin;
//this move your grid 1000 over from left side
//you can use -1000 to move to left side
ta.To = new Thickness(1000, 0, 0, 0);
//time the animation playes
ta.Duration = new Duration(TimeSpan.FromSeconds(10));
//dont need to use story board but if you want pause,stop etc use story board
grd.BeginAnimation(Grid.MarginProperty, ta);
}
you can use opacity animation for fade your grid ... it show good if move and fade !
private void Animationsss(Grid grd)
{
DoubleAnimation da = new DoubleAnimation(1, 0, new Duration(TimeSpan.FromSeconds(2)));
grd.BeginAnimation(Grid.OpacityProperty, da);
}
if there isnt any reason u can change canavas to grid and also better use TranslateTransform for resize controls like code below this code resize control if mouse enter in it :
private void grid1_MouseEnter(object sender, MouseEventArgs e)
{
//at first its normal size
ScaleTransform st = new ScaleTransform(1, 1);
//animation size to 1.25 persent of real size
DoubleAnimation da = new DoubleAnimation(1,1.25, new Duration(TimeSpan.FromSeconds(2)));
//set transform to control
grid1.RenderTransform = st;
//animation transform now From Y And X
st.BeginAnimation(ScaleTransform.ScaleXProperty, da);
st.BeginAnimation(ScaleTransform.ScaleYProperty, da);
}
if you animation for width or height do same work like scale transform :)
hope i can help you ...:))
leave comment for me please
You can also use xaml for this:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="TestBed.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Window.Resources>
<Storyboard x:Key="MoveGrid">
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="grid">
<EasingThicknessKeyFrame KeyTime="0:0:1" Value="-300,0,0,0"/>
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="button">
<BeginStoryboard x:Name="MoveGrid_BeginStoryboard" Storyboard="{StaticResource MoveGrid}"/>
</EventTrigger>
</Window.Triggers>
<Canvas>
<Grid x:Name="grid" Height="300" Width="300" Background="Black">
<Button x:Name="button" Content="Move the gird!" Height="30" Margin="10,0" />
</Grid>
</Canvas>
</Window>
I have the following problem to solve: I have some ellipses in my xaml that work as buttons, and some of them may open in 2 new buttons when clicked. I put them in separate canvas, in a way that this buttons to be generated already exist with opacity 0. What I want is to have an effect to set this buttons opacity to 1 when I click their parent button, in a transition. How can I achieve that?
C#
private void ExpandHarborButtons(object sender, MouseButtonEventArgs e)
{
Ellipse thisPath = (Ellipse)sender;
String test = (String)thisPath.DataContext;
for(int i = 0; i < DoubleHarbors.Children.Count; i++)
{
Ellipse button = (Ellipse)VisualTreeHelper.GetChild(DoubleHarbors, i);
if (test.Contains((String)button.DataContext))
{
button.Opacity = 1;
}
}
}
That's the way I'm doing right now, but it doesn't work as I want. The buttons are shown, but not with the effect I told before.
Create a DoubleAnimation and start it from the click. Something like this:
<Storyboard x:Name="fadeIn">
<DoubleAnimation Storyboard.TargetName="ButtonName" From="0.0" To="0.1" Duration="0:0:0.5"
Soryboard.TargetProperty="Opacity"/>
</Storyboard>
Then in Code:
fadeIn.Begin();
--EDIT--
Here's how to do an animation in C#. It's actually easier to define in XAML, but if this is really what you want, this is a way to do it.
Storyboard sb = new Storyboard();
DoubleAnimation da = new DoubleAnimation();
da.From = 0;
da.To = 1.0;
da.Duration = new Duration(new TimeSpan(0, 0, 0, 0, 500));
sb.Children.Add(da);
Storyboard.SetTarget(sb, sender as Button);
Storyboard.SetTargetProperty(Button1, new PropertyPath("Opacity"));
sb.Begin();