Develop Reference

Storyboard DoubleAnimation programmatically

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.

C#.net - Convert animation style to code behind

I have a Style code define in ResourceDirectory to animate my popup. this is WPF code:
<Style x:Key="Hardwarepopups" TargetType="Popup">
<Style.Triggers>
<Trigger Property="IsOpen" Value="True">
<Trigger.EnterActions>
<BeginStoryboard >
<Storyboard>
<DoubleAnimation Duration="0:0:.3" Storyboard.TargetProperty="Width" From="0" To="100" AccelerationRatio=".1"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
This is Popup:
<Popup Height="Auto" Width="Auto" Name="HardwareToolTip" StaysOpen="True" AllowsTransparency="True" Style="{StaticResource Hardwarepopups}">
It works well by handle all in XAML. I have decided to convert it to C# code like this:
void SetHarwareStyle(Popup B) {
var RightToLeft = new DoubleAnimation()
{
From = 0,
To = 100,
Duration = TimeSpan.FromMilliseconds(300),
AccelerationRatio = 0.1
};
Storyboard.SetTargetProperty(RightToLeft, new PropertyPath(WidthProperty));
Storyboard C = new Storyboard();
C.Children.Add(RightToLeft);
var action = new BeginStoryboard();
action.Storyboard = C;
Trigger A = new Trigger { Property = Popup.IsOpenProperty, Value = true };
A.EnterActions.Add(action);
B.Triggers.Add(A);
}
But this line B.Triggers.Add(A); gives the error System.InvalidOperationException: 'Triggers collection members must be of type EventTrigger.'
How can I solve this problem?
The propose of this conversion is to change To property of DoubleAnimation in runtime.

The code in the question does not reflect the XAML completely: the style is missing.
I renamed some of the variables to make it easier to read (and prevent mistakes like these)
BTW: the rightToLeftAnimation should be named leftToRightAnimation.
void SetHarwareStyle(Popup popup)
{
var rightToLeftAnimation = new DoubleAnimation()
{
From = 0,
To = 100,
Duration = TimeSpan.FromMilliseconds(300),
AccelerationRatio = 0.1
};
Storyboard.SetTargetProperty(rightToLeftAnimation, new PropertyPath(WidthProperty));
var storyboard = new Storyboard();
storyboard.Children.Add(rightToLeftAnimation);
var beginStoryboard = new BeginStoryboard();
beginStoryboard.Storyboard = storyboard;
var trigger = new Trigger { Property = Popup.IsOpenProperty, Value = true };
trigger.EnterActions.Add(beginStoryboard);
var style= new Style();
style.TargetType = typeof(Popup);
style.Triggers.Add(trigger);
popup.Style = style;
}

How can I programmatically change the border of a rectangle in WPF (storyboard animation)?

In order to change a color of a rectangle in code behind I can use:
InitializeComponent();
StackPanel myStackPanel = new StackPanel();
myStackPanel.Margin = new Thickness(20);
Rectangle myRectangle = new Rectangle();
myRectangle.Name = "MyRectangle";
// Create a name scope for the page.
NameScope.SetNameScope(this, new NameScope());
this.RegisterName(myRectangle.Name, myRectangle);
myRectangle.Width = 100;
myRectangle.Height = 100;
SolidColorBrush mySolidColorBrush = new SolidColorBrush(Colors.Blue);
this.RegisterName("MySolidColorBrush", mySolidColorBrush);
myRectangle.Fill = mySolidColorBrush;
SolidColorBrush blackBrush = new SolidColorBrush();
blackBrush.Color = Colors.Black;
myRectangle.StrokeThickness = 4;
myRectangle.Stroke = blackBrush;
ColorAnimation myColorAnimation = new ColorAnimation();
myColorAnimation.From = Colors.Blue;
myColorAnimation.To = Colors.Red;
myColorAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
Storyboard.SetTargetName(myColorAnimation, "MySolidColorBrush");
Storyboard.SetTargetProperty(myColorAnimation,
new PropertyPath(SolidColorBrush.ColorProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myColorAnimation);
myRectangle.MouseEnter += delegate(object sender, MouseEventArgs e)
{
myStoryboard.Begin(this);
};
myStackPanel.Children.Add(myRectangle);
this.Content = myStackPanel;
How can I do the same for the border of the rectangle (actually I'm looking more for a blinking-border effect than the fading one, maybe by changing Stroke property)?

Modify your Stroke:
SolidColorBrush mySolidColorBrush = new SolidColorBrush(Colors.Blue);
this.RegisterName("MySolidColorBrush", mySolidColorBrush);
myRectangle.Fill = mySolidColorBrush;
SolidColorBrush blackBrush = new SolidColorBrush(Colors.Black);
this.RegisterName("MySolidColorBorderBrush", blackBrush);
myRectangle.StrokeThickness = 4;
myRectangle.Stroke = blackBrush;
And storyboard setup
ColorAnimation myColorAnimation = new ColorAnimation();
myColorAnimation.From = Colors.Black;
myColorAnimation.To = Colors.Blue;
myColorAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
Storyboard.SetTargetName(myColorAnimation, "MySolidColorBorderBrush");
Storyboard.SetTargetProperty(myColorAnimation,
new PropertyPath(SolidColorBrush.ColorProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myColorAnimation);
Just for the archive (xaml)
<StackPanel Margin="20">
<Rectangle x:Name="MyRectangle" Width="100" Height="100" StrokeThickness="4">
<Rectangle.Fill>
<SolidColorBrush x:Name="MySolidColorBrush" Color="Blue" />
</Rectangle.Fill>
<Rectangle.Stroke>
<SolidColorBrush x:Name="MySolidColorBorderBrush" Color="Black" />
</Rectangle.Stroke>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard Duration="0:0:1">
<ColorAnimation Storyboard.TargetName="MySolidColorBrush" Storyboard.TargetProperty="Color" From="Blue" To="Red" />
<ColorAnimation Storyboard.TargetName="MySolidColorBorderBrush" Storyboard.TargetProperty="Color" From="Black" To="Blue" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</StackPanel>

WPF Label how to update width for proper animation

I am trying to achieve a simple label scroller(found the idea here: Scroller StackOverflow. I have a label, which I want to animate with help of DoubleAnimation class like this:
In constructor I implement event for Loaded:
public Web()
{
InitializeComponent();
SetDefaultBrowser();
SetDefaultWebsite();
//TextBlockSong.Text = GetSongName(GetBrowserName(), GetWebsiteName());
Loaded += Window1_Loaded;
}
Event:
void Window1_Loaded(object sender, RoutedEventArgs e)
{
DoubleAnimation doubleAnimation = new DoubleAnimation();
doubleAnimation.From = -LabelNameSong.ActualWidth;
doubleAnimation.To = canMain.ActualWidth;
doubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
doubleAnimation.Duration = new Duration(TimeSpan.Parse("0:0:10"));
LabelNameSong.BeginAnimation(Canvas.RightProperty, doubleAnimation);
}
Everything works until I update my LabelNameSong content. The LabelNameSong width stays the same as before, and my animation doesn't work properly from the start anymore(with updated text).
I update my LabelNameSong with ListBox_SelectionChanged event:
private void ListBoxWebsite_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
double k = LabelNameSong.Width;
double z = LabelNameSong.ActualWidth;
LabelWebsiteName.Content = "Now on " + GetWebsiteName();
LabelNameSong.Content = GetSongName(GetBrowserName(), GetWebsiteName());
k = LabelNameSong.Width;
z = LabelNameSong.ActualWidth;
}
I used those to measure width, and found out that it doesn't update the width of LabelNameSong. I am new here, don't even know if it should.
This is my xaml:
<Canvas Background="White" Margin="0,182,58,0" >
<Canvas ClipToBounds="True" Name="canMain" Height="80" Width="346" >
<Label FontSize="25" Foreground="#666666" Name="LabelNameSong" Canvas.Top="27" Height="30" Width="Auto" Content="This is very long text, I am testing it!" FontFamily="Calibri Light"/>
</Canvas>
</Canvas>
So my question is, what could I do to update the width of my LabelNameSong, and how should I re-call Window1_Loaded event so new instance of DoubleAnimation would work with updated ActualWidth?
doubleAnimation.From = -LabelNameSong.ActualWidth;
doubleAnimation.To = canMain.ActualWidth;
Thank you.

You can just wrap the Animation logic into a method and call from Loaded event and any other event you need
private void CreateAnimation()
{
DoubleAnimation doubleAnimation = new DoubleAnimation();
doubleAnimation.From = -LabelNameSong.ActualWidth;
doubleAnimation.To = canMain.ActualWidth;
doubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
doubleAnimation.Duration = new Duration(TimeSpan.Parse("0:0:10"));
LabelNameSong.BeginAnimation(Canvas.RightProperty, doubleAnimation);
}
void Window1_Loaded(object sender, RoutedEventArgs e)
{
CreateAnimation();
}
private void LabelNameSong_SizeChanged(object sender, RoutedEventArgs e)
{
CreateAnimation();
}
But you can probably do it all in Xaml using Triggers and get rid of all that code behind.
In the example below the animation will start on Load and restart when the Size changes
Example:
<Label x:Name="LabelNameSong" Content="Hello" >
<Label.Resources>
<Storyboard x:Key="scroll">
<DoubleAnimation To="{Binding ActualWidth, ElementName=LabelNameSong}" Duration="00:00:10"
Storyboard.TargetProperty="(Canvas.Right)"
Storyboard.TargetName="LabelNameSong"
RepeatBehavior="Forever"/>
</Storyboard>
</Label.Resources>
<Label.Triggers>
<EventTrigger RoutedEvent="Label.Loaded">
<BeginStoryboard Storyboard="{StaticResource scroll}" />
</EventTrigger>
<EventTrigger RoutedEvent="Label.SizeChanged">
<BeginStoryboard Storyboard="{StaticResource scroll}" />
</EventTrigger>
</Label.Triggers>
</Label>

Animate Grid from one position to another

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>