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>
Related
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>
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 am making an UserControl with XAML which is a simple border with a Dock Panel inside it. And inside the Dock there is an image and text bellow as properties ( i got that all figured out already).
However i need the Border that contains everything to change color on the MouseEnter event of the DockPanel and change it again to default when the MouseLeave event is triggered.
It compiles just fine. The problem is that when i use it on a normal window the Triggers are not even working and the mouse cursor doesnt change when i hover the DockPanel.
<UserControl x:Name="StartBtn" x:Class="NMis.Controls.StartCenterButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="155" d:DesignWidth="155" FontFamily="Open Sans" TextOptions.TextFormattingMode="Display" ScrollViewer.VerticalScrollBarVisibility="Disabled" UseLayoutRounding="True" IsHitTestVisible="False">
<Border BorderThickness="1.5" Height="155" Width="155" CornerRadius="2">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop x:Name="Grad1" Color="#FF151515" Offset="0"/>
<GradientStop x:Name="Grad2" Color="#E54D9EA9" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<DockPanel x:Name="Condominio_Dock" Margin="5,10,5,5" Cursor="Hand" Background="#FFF" MouseDown="DockPanel_MouseDown">
<DockPanel.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="Condominio_Dock">
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="#5fb357" Storyboard.TargetName="Grad1" Duration="0:0:0.5" Storyboard.TargetProperty="Color" From="#FF151515"></ColorAnimation>
<ColorAnimation To="#FF151515" Storyboard.TargetName="Grad2" Duration="0:0:0.5" Storyboard.TargetProperty="Color" From="#E54D9EA9"></ColorAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave" SourceName="Condominio_Dock">
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="#FF151515" Storyboard.TargetName="Grad1" Duration="0:0:0.5" Storyboard.TargetProperty="Color" From="#5fb357"></ColorAnimation>
<ColorAnimation To="#E54D9EA9" Storyboard.TargetName="Grad2" Duration="0:0:0.5" Storyboard.TargetProperty="Color" From="#FF151515"></ColorAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</DockPanel.Triggers>
<Image UseLayoutRounding="True" Stretch="Uniform" Source="{Binding ElementName=StartBtn, Path=Image}" Height="104" DockPanel.Dock="Top"></Image>
<TextBlock Text="{Binding ElementName=StartBtn, Path=Text}" DockPanel.Dock="Top" TextTrimming="WordEllipsis" Margin="0,5,0,0" TextAlignment="Center" FontWeight="SemiBold"></TextBlock>
</DockPanel>
</Border>
</UserControl>
You can also get this problem is the dock panel doesn't have a brush. Because then its transparent it doesn't get found by the hit test.
Fixed it.
Apparently IsHitTestVisible must be true for the DockPanel use Triggers
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>
When using a color binding like
Background="{Binding Design.LeftBarColor}"
and executing an animation like
<DoubleAnimation From="1" To="0.5" Storyboard.TargetName="appName"
Storyboard.TargetProperty="(Label.Background).(SolidColorBrush.Opacity)"
Duration="0:0:0.25"/>
all of the controls Binding to "Design.LeftBarColor" are refreshed. But I only want to refresh the label's (appName) background color. I just tried to change the binding mode, but this did not work. What am I doing wrong?
Instead of directly using the Design.LeftBarColor Brush for the Background of the Label, you could create a new Background brush for every Label, and bind the new Brush's Color to Design.LeftBarColor.Color.
<Label Name="appName" ...>
<Label.Background>
<SolidColorBrush Color="{Binding Design.LeftBarColor.Color}"/>
</Label.Background>
...
</Label>
Not sure if i am correct about what you are trying to do. I would say if you want to fade out a control on animation, do not target the brush's opacity. Put a border control on top of the label, and modify the border's opacity.
Sample code here:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<SolidColorBrush x:Key="MyBrush" Color="Red"/>
</Window.Resources>
<Grid>
<Border Name="Container">
<Label Background="{StaticResource MyBrush}">
<Label.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="Container"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:5"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Label.Triggers>
Lorem ipsum
</Label>
</Border>
</Grid>
</Window>