In my project when program starts polygon is moving on set path
What should I change to stop polygon moving, when the mouse cursor on it (when mouse cursor out of polygon, polygon must continue it's moving)
<Window x:Class="aqua3.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:aqua3"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<PathGeometry x:Key="pathg">
<PathFigure IsClosed="True">
<PolyLineSegment Points="0,0 200,0 200,80 0,80" />
</PathFigure>
</PathGeometry>
</Window.Resources>
<Grid Background="LightBlue">
<Canvas Margin="10" Background="LightBlue">
<Path Stroke="Red" Data="{StaticResource pathg}" Canvas.Top="10" Canvas.Left="10" />
<Polygon Name="polygon1" Stroke="Yellow" Fill="Yellow" Points="100,150 120,140 120,120 165,150 120,180 120,160 ">
<Polygon.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingPath Storyboard.TargetProperty="(Canvas.Top)"
Duration="0:0:15" RepeatBehavior="Forever"
PathGeometry="{StaticResource pathg}" Source="Y" >
</DoubleAnimationUsingPath>
<DoubleAnimationUsingPath Storyboard.TargetProperty="(Canvas.Left)"
Duration="0:0:15" RepeatBehavior="Forever"
PathGeometry="{StaticResource pathg}" Source="X" >
</DoubleAnimationUsingPath>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Polygon.Triggers>
</Polygon>
</Canvas>
</Grid>
Assign a name to your BeginStoryboard
<BeginStoryboard x:Name="Move">
To pause, add this
<EventTrigger RoutedEvent="MouseEnter">
<PauseStoryboard BeginStoryboardName="Move"/>
</EventTrigger>
To resume, add this
<EventTrigger RoutedEvent="MouseLeave">
<ResumeStoryboard BeginStoryboardName="Move"/>
</EventTrigger>
Related
This piece of code animates the movement of an ellipse if click on this. How can I return (in an animated way - as the storyboard does) the ellipse in the initial position by clicking again on its new position. Is that possible? (preferably only in XAML)
<Ellipse x:Name="circle_button" HorizontalAlignment="Left" Height="100" Margin="30,40,0,0" VerticalAlignment="Top" Width="100" Fill="#FF33D3A7" >
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.MouseDown" >
<BeginStoryboard>
<Storyboard>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="30,40,0,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00.4" Value="95,120,0,0" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
An alternative is to use visual states and simply switch between them in code-behind. That might be more clearer approach compared to holding animations as resources.
xaml:
<Ellipse x:Name="circle_button"
HorizontalAlignment="Left"
Height="100"
Margin="30,40,0,0"
VerticalAlignment="Top"
Width="100"
Fill="#FF33D3A7"
MouseDown="circle_button_MouseDown">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="A">
<Storyboard>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin">
<SplineThicknessKeyFrame KeyTime="0:0:0.4" Value="95,120,0,0" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="B">
<Storyboard>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin">
<SplineThicknessKeyFrame KeyTime="0:0:0.4" Value="30,40,0,0" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Ellipse>
cs:
bool _isStateB;
void circle_button_MouseDown(object sender, MouseButtonEventArgs e)
{
_isStateB = !_isStateB;
VisualStateManager.GoToElementState(circle_button, _isStateB ? "B" : "A", true);
}
Demo:
Instead of Ellipse a Button can be used (with style containing such ellipse), then you'll have Click event and ability to focus and click element with keyboard.
P.S.: after writing the answer I suddenly have a though.. ToggleButton has 2 states, you can in fact use IsChecked to toggle between 2 positions (and run different animations)... until you add third, then solution with visual states is preferable.
I think that one of possible ways is to define to storyboard and use some code behind to trigger animations.
Here is an example:
Xaml:
<Window x:Class="WpfApplication1.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:WpfApplication1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Storyboard x:Key="ElipseStoryboard">
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="30,40,0,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00.4" Value="95,120,0,0" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="ElipseStoryboardReversed">
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="95,120,0,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00.4" Value="30,40,0,0" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Grid x:Name="CP">
<Ellipse x:Name="circle_button" MouseDown="Circle_button_OnMouseDown" HorizontalAlignment="Left" Height="100" Margin="30,40,0,0" VerticalAlignment="Top" Width="100" Fill="#FF33D3A7" >
</Ellipse>
</Grid>
</Window>
Code behind:
namespace WpfApplication1
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private bool flag = false;
private void Circle_button_OnMouseDown(object sender, MouseButtonEventArgs e)
{
if (flag)
{
var storyboard = this.Resources["ElipseStoryboard"] as Storyboard;
if (storyboard != null)
storyboard.Begin(circle_button);
}
else
{
var storyboard = this.Resources["ElipseStoryboardReversed"] as Storyboard;
if (storyboard != null)
storyboard.Begin(circle_button);
}
flag = !flag;
}
}
}
Please try it.
Alternative only Xaml solution :
<Window x:Class="WpfApplication1.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:WpfApplication1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid x:Name="CP">
<Ellipse x:Name="circle_button" HorizontalAlignment="Left" Height="100" Margin="30,40,0,0" VerticalAlignment="Top" Width="100" Fill="#FF33D3A7" >
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.MouseDown" >
<BeginStoryboard>
<Storyboard>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="30,40,0,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00.4" Value="95,120,0,0" />
</ThicknessAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="circle_button"
From="1.0" To="0.0" Duration="0:0:0" BeginTime="00:00:00.4"></DoubleAnimation>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="circle_button2"
From="0.0" To="1.0" Duration="0:0:0" BeginTime="00:00:00.4"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
<Ellipse x:Name="circle_button2" Opacity="0" HorizontalAlignment="Left" Height="100" Margin="95,120,0,0" VerticalAlignment="Top" Width="100" Fill="#FF33D3A7" >
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.MouseDown" >
<BeginStoryboard>
<Storyboard>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" BeginTime="00:00:00" Storyboard.TargetName="circle_button">
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="95,120,0,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00.4" Value="30,40,0,0" />
</ThicknessAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="circle_button2"
From="1.0" To="0.0" Duration="0:0:0" ></DoubleAnimation>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="circle_button"
From="0.0" To="1.0" Duration="0:0:0"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
</Grid>
</Window>
YO,
I have a long image (125x8000 pixls) that i am translating downwards, once it reaches a certain point, i want to use the same image and place it directly on top of the translating image, so it appears to be a continuous stream, perpetually coming downward. so like halfway through its translation, i add a copy of the image at the top of the first image. and repeat.
OR if i could somehow use ONE image and cycle it, as if it were circular, or a wheel. This is a slot machine. I won't give the code behind because its top secret(not really) but this is my xaml so far:
<Window x:Class="WpfApplication3.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:WpfApplication3"
mc:Ignorable="d"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
Title="MainWindow" Height="422.846" Width="581.652">
<Window.Resources>
<x:ArrayExtension Type="sys:Int32" x:Key="arr">
<sys:Int32>2100</sys:Int32>
<sys:Int32>3000</sys:Int32>
<sys:Int32>4200</sys:Int32>
<sys:Int32>6000</sys:Int32>
<sys:Int32>6800</sys:Int32>
<sys:Int32>1500</sys:Int32>
<sys:Int32>500</sys:Int32>
<sys:Int32>8000</sys:Int32>
</x:ArrayExtension>
<Storyboard x:Key="SB2">
<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"
Duration="0:0:4"
To="2900">
<DoubleAnimation.EasingFunction>
<SineEase EasingMode="EaseOut">
</SineEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
<Storyboard x:Key="SB3">
<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"
Duration="0:0:3"
To="2100">
<DoubleAnimation.EasingFunction>
<SineEase EasingMode="EaseOut">
</SineEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
<Storyboard x:Key="SBName">
<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"
Duration="0:0:6"
To="4111">
<DoubleAnimation.EasingFunction>
<SineEase EasingMode="EaseOut">
</SineEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</Window.Resources>
<Grid>
<Image x:Name="im" Source="E:/fruit_roll.png" Stretch="None" Width="125" Height="8210" Margin="76,-7705,374.2,-109.8">
<Image.RenderTransform>
<TranslateTransform/>
</Image.RenderTransform>
</Image>
<Image x:Name="im1" Source="E:/fruit_roll.png" Stretch="None" Width="125" Height="8210" Margin="223,-7705,227.2,-109.8">
<Image.RenderTransform>
<TranslateTransform/>
</Image.RenderTransform>
</Image>
<Image x:Name="im2" Source="E:/fruit_roll.png" Stretch="none" Width="125" Height="8210" UseLayoutRounding="True" SnapsToDevicePixels="True" Margin="370,-7705,80.2,-109.8">
<Image.RenderTransform>
<TranslateTransform/>
</Image.RenderTransform>
</Image>
<Image x:Name="slot" Source="E:/Slot-Machine.png" Margin="-50,-187,-63.8,-166.8"/>
<Button x:Name="button1" Content="Button" Click="button_Click_2" Margin="235,302,283.2,61.2" Background="#FFB00000" AllowDrop="True" BorderBrush="#FFFF8484" Opacity="0.15"/>
</Grid>
</Window>
Any ideas or suggestions on how to make this appear to be continuous would be great.
Something like this should work:
<Rectangle>
<Rectangle.Fill>
<ImageBrush
ImageSource="E:/fruit_roll.png" TileMode="Tile"
Viewport="0,0,125,8000" ViewportUnits="Absolute">
<ImageBrush.Transform>
<TranslateTransform/>
</ImageBrush.Transform>
</ImageBrush>
</Rectangle.Fill>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Fill.Transform.Y"
To="-8000" Duration="0:0:5"
RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
I'm looking to create an animation similar to the 'wipe' animation in Microsoft PowerPoint using WPF.
Put simply, I'd like an image to fade in from left to right over 1 second.
This is the XAML I have so far, which fades the image in all at once:
<Window x:Class="WpfApplication2.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:WpfApplication2"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525" Background="Purple" Loaded="Window_Loaded">
<Window.Resources>
<Storyboard x:Key="fade">
<DoubleAnimation From="0" To="1" Duration="0:0:1"
Storyboard.TargetName="logo"
Storyboard.TargetProperty="Opacity"/>
</Storyboard>
</Window.Resources>
<Grid>
<Image Source="image.png" x:Name="logo"/>
</Grid>
</Window>
In the code behind, I just play the animation when window has loaded:
private void Window_Loaded(object sender, RoutedEventArgs e)
{
BeginStoryboard((Storyboard)FindResource("fade"));
}
What do I need to add to the Storyboard tag in order to make the image fade in similar to the wipe animation on PowerPoint?
Found the answer myself from this blog post. The code I needed to achieve the effect I needed is identical to the code in the post, but I don't need the first image. (UFO.jpg)
<Window x:Class="LearnWPF.WipeEffect.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="LearnWPF.WipeEffect" Height="500" Width="700" Name="mainWindow">
<Grid>
<!--First image not needed.-->
<!--<Image Source="Images/UFO.jpg" />-->
<Image Source="Images/ladder.jpg">
<Image.OpacityMask>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Offset="0" Color="Black" x:Name="BlackStop"/>
<GradientStop Offset="0" Color="Transparent" x:Name="TransparentStop"/>
</LinearGradientBrush>
</Image.OpacityMask>
</Image>
</Grid>
<Window.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<!--Duration changed to half a second as this is what I need. -->
<DoubleAnimation Storyboard.TargetName="TransparentStop"
Storyboard.TargetProperty="Offset" By="1" Duration="0:0:0.5" />
<DoubleAnimation Storyboard.TargetName="BlackStop"
Storyboard.TargetProperty="Offset" By="1" Duration="0:0:0.5"
BeginTime="0:0:0.05" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Window.Triggers>
</Window>
I have set of images which are placed in pivot control.i want zoom in the image to a specific point and then go back to its normal size through animation.how can i do that.Any help will be appreciated.
<StackPanel>
<StackPanel.Resources>
<Storyboard x:Name="story">
<DoubleAnimation Storyboard.TargetName="img"
Storyboard.TargetProperty="Height"
From="300"
To="600"
Duration="0:0:2">
</DoubleAnimation>
</Storyboard>
</StackPanel.Resources>
<Button Height="100" Width="100" Click="Button_Click"></Button>
<Image x:Name="img" Height="300" Width="200" Source="/Assets/10.png"></Image>
</StackPanel>
first tip:-
avoid writing Resources into specific control. Instead define all resources into <Page.Resources>
Now, if you want to animate some control, then you have to use Scaling property of an element.
Check below code. here, I'm pointing out how to zoom the image on any event handler.
XAML code of control
<Image x:Name="img" Source="/Assets/image1.png" RenderTransformOrigin="0.5 0.5" >
<Image.RenderTransform>
<CompositeTransform x:Name="compositeTransform" />
</Image.RenderTransform>
</Image>
Defining Storyborad
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="story">
<DoubleAnimation Storyboard.TargetName="compositeTransform"
Storyboard.TargetProperty="ScaleX"
From="0" To="5"
Duration="0:0:2" />
<DoubleAnimation Storyboard.TargetName="compositeTransform"
Storyboard.TargetProperty="ScaleY"
From="0" To="5"
Duration="0:0:2" />
</Storyboard>
</phone:PhoneApplicationPage.Resources>
On any of the event handler
story.Begin();
Hope that helps..
If I understand your problem, then you should use the Storyboard, EventTrigger and ScaleX Instead of Height for Resize image.
Storyboarded and trigger animations
Here is one option for the loaded event.
<StackPanel>
<Button Height="100" Width="100" Click="Button_Click"></Button>
<Image x:Name="img" Height="300" Width="200" Source="/Assets/10.png">
<Image.RenderTransform>
<ScaleTransform x:Name="ImageScale" ScaleX="1" ScaleY="1"/>
</Image.RenderTransform>
<Image.Triggers>
<EventTrigger RoutedEvent="Image.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ImageScale" Storyboard.TargetProperty="(ScaleTransform.ScaleX)" To="1.5" Duration="0:0:0.7" AutoReverse="True"/>
<DoubleAnimation Storyboard.TargetName="ImageScale" Storyboard.TargetProperty="(ScaleTransform.ScaleY)" To="1.5" Duration="0:0:0.7" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
</StackPanel>
I want to create roulette game in WPF C# below mentioned code is working properly but I want to stop wheel after 3 second but I am not getting the way to do it. Kindly help me out with same
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="WpfApplication2.MainWindow" Title="MainWindow" WindowState="Maximized">
<Canvas>
<Canvas.Background>
<ImageBrush ImageSource="Image/Background.jpg" AlignmentX="Right" AlignmentY="Bottom" Stretch="None"/>
</Canvas.Background>
<Ellipse Height="250" Width="250" Margin="200,100,-200,-100">
<Ellipse.Fill>
<ImageBrush x:Name="p2" ImageSource="Image/p2.png"/>
</Ellipse.Fill>
<Ellipse.RenderTransform>
<RotateTransform x:Name="TransRotate11" CenterX="125" CenterY="125"/>
</Ellipse.RenderTransform>
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Image.Loaded">
<BeginStoryboard>
<Storyboard x:Uid="s1" TargetProperty="Angle" RepeatBehavior="Forever">
<DoubleAnimation By="360" Duration="0:0:0.1" Storyboard.TargetName="TransRotate11" Storyboard.TargetProperty="Angle" FillBehavior="Stop"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
</Canvas>
If the duration of the animation is 0.1 seconds and you want it to run for 3 seconds, why not simply set its RepeatBehavior to 30 times:
<Storyboard x:Uid="s1">
<DoubleAnimation Storyboard.TargetName="TransRotate11"
Storyboard.TargetProperty="Angle"
By="360" Duration="0:0:0.1"
RepeatBehavior="30x" FillBehavior="Stop" />
</Storyboard>