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();
Related
This is the scenario:
I Have a Grid and an Button. the Grid have a Show Boolean property. When user click on button, if Show=false then Grid become Visible. and when Show=true Grid become Collapse.
when it's visibility change, I do an animation for grid's Height with StoryBoard.
OK. every thing is fine. when user click the button, Grid appearing with animation. but when click again, the animation doesn't show and just Collapse occurred.
This is my code:
Storyboard growUpStory = new Storyboard();
Storyboard growDownStory = new Storyboard();
DoubleAnimation growUp, growDown;
In any method:
height = Container.DesiredSize.Height;
growUp = new DoubleAnimation
{
From = 0,
To = height > MaxHeight ? MaxHeight : height,
Duration = new Duration(TimeSpan.FromSeconds(1)),
AutoReverse = false
};
Container.Visibility = Visibility.Collapsed;
growDown = new DoubleAnimation
{
From = height > MaxHeight ? MaxHeight : height,
To = 0,
Duration = new Duration(TimeSpan.FromSeconds(1)),
AutoReverse = false
};
growUpStory.Children.Add(growUp);
growDownStory.Children.Add(growDown);
and when I invoke the event:
if (Show)
{
Storyboard.SetTarget(growUpStory, Container);
Storyboard.SetTargetProperty(growUpStory, new PropertyPath(Grid.HeightProperty));
growUpStory.Begin();
Container.Visibility = Visibility.Visible;
}
else
{
Storyboard.SetTarget(growDownStory, Container);
Storyboard.SetTargetProperty(growDownStory, new PropertyPath(Grid.HeightProperty));
growDownStory.Begin();
Container.Visibility = Visibility.Collapsed;
}
I Try many ways but was unable to resolve. Where is my problem? have you any idea? thanks.
I Can't use XAML here
Animations are asynchronous, which means you are collapsing the Visibility at the same time that you are starting the "growDownStory" animation.
Add some delay, based on how long you expect your "growDownStory" animation to run.
Example:
growDownStory.Begin();
await Task.Delay(1000); // allow time for the animation to perform its visual
Container.Visibility = Visibility.Collapsed;
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 am working to create a Move Animation in windows. I want to move and object from one location to the other. Basically what I am trying to do is to FLIP the selected rectangle and then randomly swap the positions of two Rectangle objects the movement should be shown as an animation.
I have tried and achieved FLIP animation. But now if there are 4 rectangles in a grid, random two rectangles should exchange their positions followed by a move animation. I tried to use the below code. But it is not working.
It just creates a Rectangle in the center of the screen and nothing else.
1) Created a new project
2) Added the below code to the MainPage.xaml.cs file.
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
Loaded += Create_And_Run_Animation;
// Sample code to localize the ApplicationBar
//BuildLocalizedApplicationBar();
}
private void Create_And_Run_Animation(object sender, EventArgs e)
{
// Create a red rectangle that will be the target
// of the animation.
Rectangle myRectangle = new Rectangle();
myRectangle.Width = 200;
myRectangle.Height = 200;
Color myColor = Color.FromArgb(255, 255, 0, 0);
SolidColorBrush myBrush = new SolidColorBrush();
myBrush.Color = myColor;
myRectangle.Fill = myBrush;
// Add the rectangle to the tree.
ContentPanel.Children.Add(myRectangle);
// Create a duration of 2 seconds.
Duration duration = new Duration(TimeSpan.FromSeconds(2));
// Create two DoubleAnimations and set their properties.
DoubleAnimation myDoubleAnimation1 = new DoubleAnimation();
DoubleAnimation myDoubleAnimation2 = new DoubleAnimation();
myDoubleAnimation1.Duration = duration;
myDoubleAnimation2.Duration = duration;
Storyboard sb = new Storyboard();
sb.Duration = duration;
sb.Children.Add(myDoubleAnimation1);
sb.Children.Add(myDoubleAnimation2);
Storyboard.SetTarget(myDoubleAnimation1, myRectangle);
Storyboard.SetTarget(myDoubleAnimation2, myRectangle);
// Set the attached properties of Canvas.Left and Canvas.Top
// to be the target properties of the two respective DoubleAnimations.
Storyboard.SetTargetProperty(myDoubleAnimation1, new PropertyPath("(Canvas.Left)"));
Storyboard.SetTargetProperty(myDoubleAnimation2, new PropertyPath("(Canvas.Top)"));
myDoubleAnimation1.To = 200;
myDoubleAnimation2.To = 200;
// Make the Storyboard a resource.
ContentPanel.Resources.Add("unique_id", sb);
// Begin the animation.
sb.Begin();
}
}
I haven't added anything in the xaml file. that is just as it is. Is there anything that i need to add to the xaml file for the animation to run properly. ?
Please Help
Better late than never ;-).
Just got the problem myself, you need to add
myDoubleAnimation1.EnableDependentAnimation = true;
myDoubleAnimation2.EnableDependentAnimation = true;
to your code to force WinRT to do execute animation - otherwise it deems your animation to be not worthy due to possible performance issues ... sigh.
Source: https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.media.animation.doubleanimation.enabledependentanimation.aspx
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>
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.