WPF enlarge a rectangle using storyboard - c#

Hi i have a Window>grid>rectangle named as (rect1)
how do i enlarge this using storyboard
Error:Additional information: No applicable name scope exists to resolve the name 'rect1'
private void Window_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
{
Storyboard buttonEnlargeStoryboard = new Storyboard();
DoubleAnimation da = new DoubleAnimation();
da.SetValue(Storyboard.TargetNameProperty, rect1.Name);
da.BeginTime = new TimeSpan(0);
da.Duration = TimeSpan.FromSeconds(1);
buttonEnlargeStoryboard.Children.Add(da);
buttonEnlargeStoryboard.Begin();
}

You should animate width and height properties like this:
DoubleAnimation widthAnimation = new DoubleAnimation
{
From = 0,
To = rect1.ActualWidth*2,
Duration = TimeSpan.FromSeconds(5)
};
DoubleAnimation heightAnimation = new DoubleAnimation
{
From = 0,
To = rect1.ActualHeight*2,
Duration = TimeSpan.FromSeconds(5)
};
Storyboard.SetTargetProperty(widthAnimation, new PropertyPath(Rectangle.WidthProperty));
Storyboard.SetTarget(widthAnimation, rect1);
Storyboard.SetTargetProperty(heightAnimation, new PropertyPath(Rectangle.HeightProperty));
Storyboard.SetTarget(heightAnimation, rect1);
Storyboard buttonEnlargeStoryboard = new Storyboard();
buttonEnlargeStoryboard.SpeedRatio = 1;
buttonEnlargeStoryboard.Children.Add(widthAnimation);
buttonEnlargeStoryboard.Children.Add(heightAnimation);
buttonEnlargeStoryboard.Begin();

Related

How can use as code?

hi I wrote allready a working code;
private void baslangic_gridler(UIElement element)
{
DoubleAnimation opaklk = new DoubleAnimation();
opaklk.From = 0;
opaklk.To = 1;
opaklk.Duration = new TimeSpan(0, 0, 0, 0, 300);
Thickness to_margin = (element as Grid).Margin;
Thickness from_margin = to_margin;
from_margin.Left = from_margin.Left - 25;
ThicknessAnimation kaydır = new ThicknessAnimation();
kaydır.From = from_margin;
kaydır.To = to_margin;
kaydır.Duration = new TimeSpan(00,0,0,0,300);
element.BeginAnimation(MarginProperty, kaydır);
element.BeginAnimation(OpacityProperty, opaklk);
}
but I want to use all type of forms element like button or image
Thickness to_margin = (element as Grid).Margin;
what can I use instead of grid for all the elements?
Per MSDN, the Grid class (System.Windows.Controls) inherits it's Margin property from FrameworkElement so you should use that to cover all your bases.
Margin: Gets or sets the outer margin of an element.(Inherited from FrameworkElement.)
Note that a FrameworkElement is a UIElement so you could just take the FrameworkElement as the parameter to your method instead of the UIElement like so:
private void baslangic_gridler(FrameworkElement element)
{
DoubleAnimation opaklk = new DoubleAnimation();
opaklk.From = 0;
opaklk.To = 1;
opaklk.Duration = new TimeSpan(0, 0, 0, 0, 300);
Thickness to_margin = element.Margin;
Thickness from_margin = to_margin;
from_margin.Left = from_margin.Left - 25;
ThicknessAnimation kaydır = new ThicknessAnimation();
kaydır.From = from_margin;
kaydır.To = to_margin;
kaydır.Duration = new TimeSpan(00,0,0,0,300);
element.BeginAnimation(MarginProperty, kaydır);
element.BeginAnimation(OpacityProperty, opaklk);
}

WPF RotateTransform not working

I found below code to let my image(indicator1) rotation.
But it's nothing happened when I click the button.
Anyone know how to solve it?
private void Button_Click(object sender, RoutedEventArgs e)
{
RotateTransform rotateTransform = indicator1.RenderTransform as RotateTransform;
DoubleAnimation doubleAnimation = new DoubleAnimation();
doubleAnimation.From = 0;
doubleAnimation.To = 360;
doubleAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(10000));
Storyboard.SetTarget(doubleAnimation, rotateTransform);
Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath(RotateTransform.AngleProperty));
Storyboard storyboard = new Storyboard();
storyboard.RepeatBehavior = RepeatBehavior.Forever;
storyboard.Children.Add(doubleAnimation);
storyboard.Begin(this);
}
You don't need the Storyboard. Using a Storyboard from code behind requires a workaround to get the target name lookup to to work. I haven't researched the exact cause of this, or whether or not it's always an issue. The code below works.
Note that you'll be setting RepeatBehavior on the DoubleAnimation now.
private void Button_Click(object sender, RoutedEventArgs e)
{
RotateTransform rotateTransform = indicator1.RenderTransform as RotateTransform;
DoubleAnimation doubleAnimation = new DoubleAnimation();
doubleAnimation.From = 0;
doubleAnimation.To = 360;
doubleAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(10000));
doubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
rotateTransform.BeginAnimation(RotateTransform.AngleProperty, doubleAnimation);
}

WPF Translating a rectangle

private void Window_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
{
DoubleAnimation rightAnimation = new DoubleAnimation();
rightAnimation.Duration = TimeSpan.FromSeconds(2);
rightAnimation.From = 0;
rightAnimation.To = 200;
Storyboard.SetTarget(rightAnimation , rect1);
Storyboard.SetTargetProperty(rightAnimation, new PropertyPath("(0).(1)", new DependencyProperty[]{UIElement.RenderTransformProperty, TranslateTransform.XProperty}));
Storyboard sb = new Storyboard();
sb.AccelerationRatio = 0.8;
sb.Children.Add(rightAnimation);
sb.Begin();
}
I want to accelerate the rect1 to the right.. When i run it nothing happens.
You can use TransformGroup to animate all transform types.
DoubleAnimation rightAnimation = new DoubleAnimation();
rightAnimation.Duration = TimeSpan.FromSeconds(2);
rightAnimation.From = 0;
rightAnimation.To = 200;
TransformGroup transGroup = new TransformGroup();
transGroup.Children.Add(new TranslateTransform());
rect1.RenderTransform = transGroup;
Storyboard.SetTarget(rightAnimation, rect1);
Storyboard.SetTargetProperty(rightAnimation, new PropertyPath("RenderTransform.Children[0].X"));
Storyboard sb = new Storyboard();
sb.AccelerationRatio = 0.8;
sb.Children.Add(rightAnimation);
sb.Begin();

In WPF I can't see whats wrong with my C# Storyboard and DoubleAnimation

Im attempting to create a storyboard in C# not XAML to control scaling of an image, so i can easily alter the ScaleTransform.ScaleX and ScaleTransform.ScaleY values in a DoubleAnimation.
So far I believe i have created the animations and added it to a new storyboard, and the appropriate values change in the C# when i check with breakpoints, but it's not actually working.
My C# looks like this:
public void SetStatistics(double[] value)
{
Storyboard sb = new Storyboard();
sb.Duration = new Duration(TimeSpan.FromSeconds(1));
//Wedge Animation X-Axis
DoubleAnimation wax = new DoubleAnimation();
//Wedge Animation Y-Axis
DoubleAnimation way = new DoubleAnimation();
ScaleTransform st = ((ScaleTransform)FindName("wedge1scale"));
wax = new DoubleAnimation();
way = new DoubleAnimation();
wax.Duration = sb.Duration;
way.Duration = sb.Duration;
sb.Children.Add(wax);
sb.Children.Add(way);
Storyboard.SetTargetProperty(wax, new PropertyPath("(ScaleTransform.ScaleX)"));
//End scale from calculation with an Enum value
wax.To = StatMin + (StatPercent * value[1]);
//Start scale from current value
wax.From = st.ScaleX;
Storyboard.SetTargetProperty(way, new PropertyPath("(ScaleTransform.ScaleY)"));
//End scale from calculation with an Enum value
way.To = StatMin + (StatPercent * value[1]);
//Start scale from current value
way.From = st.ScaleY;
Storyboard.SetTarget(wax, Wedge1);
Storyboard.SetTarget(way, Wedge1);
Main.Resources.Add("animation", sb);
sb.Begin();
}
My XAML Image is like this:
<Image x:Name="Wedge1" Source="Images/Wedge.png" RenderTransformOrigin="-0.008,1.027" Height="682" Width="263" Canvas.Left="869.04" Canvas.Top="-158.251" >
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform x:Name="wedge1scale" ScaleX="0.555" ScaleY="0.555"/>
<TranslateTransform X="88.102" Y="-4.381"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
Thanks in advance for any info :)
The problem is your PropertyPath. You would have to write RenderTransform.Children[0].ScaleX and RenderTransform.Children[0].ScaleY in order to animate the ScaleX and ScaleY properties of the first child of the TransformGroup in the Image's RenderTransform.
var wax = new DoubleAnimation { Duration = TimeSpan.FromSeconds(1) };
var way = new DoubleAnimation { Duration = TimeSpan.FromSeconds(1) };
wax.To = ...
way.To = ...
Storyboard.SetTargetProperty(
wax, new PropertyPath("RenderTransform.Children[0].ScaleX"));
Storyboard.SetTargetProperty(
way, new PropertyPath("RenderTransform.Children[0].ScaleY"));
Storyboard.SetTarget(wax, Wedge1);
Storyboard.SetTarget(way, Wedge1);
var sb = new Storyboard();
sb.Children.Add(wax);
sb.Children.Add(way);
sb.Begin();
And it would be less code without the Storyboard:
var wax = new DoubleAnimation { Duration = TimeSpan.FromSeconds(1) };
var way = new DoubleAnimation { Duration = TimeSpan.FromSeconds(1) };
wax.To = ...
way.To = ...
wedge1scale.BeginAnimation(ScaleTransform.ScaleXProperty, wax);
wedge1scale.BeginAnimation(ScaleTransform.ScaleYProperty, way);
And I guess in your case it isn't necessary to set the From property, as the animations start from the current property values by default.

WPF: Programatically Animate Rectangle Color in Grid

How can I programatically change the Color of a Rectangle in my Grid?
ColorAnimation myColorAnimation = new ColorAnimation();
myColorAnimation.From = Colors.Red;
myColorAnimation.To = Colors.Blue;
myColorAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(500));
myColorAnimation.AutoReverse = false;
myStoryboard = new Storyboard();
myStoryboard.Children.Add(myColorAnimation);
Storyboard.SetTargetName(myColorAnimation, ?); // What do I put here
Storyboard.SetTargetProperty(myColorAnimation, new PropertyPath //What do I put here?
OK, I found a way to do this:
I create a StoryBoard for each Grid item:
List<Storyboard> _animatableGridRectToGray = new List<Storyboard>();
List<Storyboard> _animatableGridRectToWhite = new List<Storyboard>();
and populate:
private void initAnimatableGridRectangles()
{
int index = 1;
foreach (Rectangle rect in SequenceGrid.Children)
{
SolidColorBrush tempBrush = new SolidColorBrush();
rect.Fill = tempBrush;
string brushName = "Brush" + index;
_gridBrushes.Add(brushName, tempBrush);
this.RegisterName(brushName, tempBrush);
Storyboard tempSBToGray = new Storyboard();
Storyboard tempSBToWhite = new Storyboard();
ColorAnimation tempColAnimToGray = getAnimToGray();
ColorAnimation tempColAnimToWhite = getAnimToWhite();
tempSBToGray.Children.Add(tempColAnimToGray);
tempSBToWhite.Children.Add(tempColAnimToWhite);
Storyboard.SetTargetName(tempColAnimToGray, brushName);
Storyboard.SetTargetName(tempColAnimToWhite, brushName);
Storyboard.SetTargetProperty(tempColAnimToGray, new PropertyPath(SolidColorBrush.ColorProperty));
Storyboard.SetTargetProperty(tempColAnimToWhite, new PropertyPath(SolidColorBrush.ColorProperty));
_animatableGridRectToGray.Add(tempSBToGray);
_animatableGridRectToWhite.Add(tempSBToWhite);
index++;
}
}
private ColorAnimation getAnimToGray()
{
ColorAnimation colAnim = new ColorAnimation();
colAnim.To = Colors.Gray;
colAnim.Duration = new Duration(TimeSpan.FromMilliseconds(500));
colAnim.AutoReverse = false;
return colAnim;
}
private ColorAnimation getAnimToWhite()
{
ColorAnimation colAnim = new ColorAnimation();
colAnim.To = Colors.White;
colAnim.Duration = new Duration(TimeSpan.FromMilliseconds(500));
colAnim.AutoReverse = false;
return colAnim;
}
Then I can animate like so:
_animatableGridRectToGray[index].Begin(this);

Categories