Develop Reference

WPF Re-using \ Replacing an Image; animation

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>

Creating a 'wipe' animation in WPF

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>

How to Zoom in and zoom out through animation

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>

how to move UI element with storyboard?

I've worked with Opacity property in storyboard
but I cant figure it out how to move an UI element like grid stackpanel button ..... in c#?
(I am writing the storyboard in c# not in xaml )

Well, that depends on your actual layout: Do you want to animate a button in a Grid or in a Canvas (could animate the Margin property or the Canvas.Left attached property, respectively)? Do you want to animate the property itself or a transform (the latter would animate a RenderTransform - specifically a TranslateTransform). You would use the RenderTransform if you still want to refer to the "old" position.
One simple way is:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Grid.Triggers>
<EventTrigger RoutedEvent="Grid.Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation Storyboard.TargetName="myButton"
Storyboard.TargetProperty="(Canvas.Left)" From="1" To="350"
Duration="0:0:10" BeginTime="0:0:0"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
<Canvas x:Name="myCanvas" Background="Yellow">
<Button x:Name="myButton" Width="100" Height="30" Canvas.Left="100" Canvas.Top="100" />
</Canvas>
</Grid>
</Window>

it would be better if you use blend for storyboard ..i have genrated a code for stackpanel movement towards right ..just check it..
you can go through this video aslo it's very good it will perfectly work in your case
<Page.Resources>
<Storyboard x:Name="Storyboard1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="hello">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="100"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Page.Resources>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<StackPanel Name="hello" Orientation="Vertical" HorizontalAlignment="Left" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5" >
<StackPanel.RenderTransform>
<CompositeTransform/>
</StackPanel.RenderTransform>
<TextBlock Text="hello1" FontSize="50" />
<Button Content="Button" FontSize="50" Click="Button_Click_1" />
</StackPanel>
</Grid>
and to start do this on button click..
private void Button_Click_1(object sender, RoutedEventArgs e)
{
Storyboard1.Begin();
}
for better understand just read about how to use blend..

WPF Triggers: Changing an out-of-scope control's style in a trigger

I can't come up with a solution for this problem in XAML:
I want to animate the width of the right button to a certain value when IsMouseOver of the left button is true. I dont know where to put this: in a style or template of one of the buttons or in a style on the grid. Is it even possible?
<Border Style="{StaticResource ContentBodyStyle}" x:Name="Border" >
<Grid Width="Auto" Height="Auto" Style="{DynamicResource GridStyle1}">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Margin="0,0,0,0" Content="Button" Grid.Row="0" x:Name="BtnLeft" Style="{DynamicResource ButtonStyle1}"/>
<Button Margin="0,0,0,0" Content="Button" Grid.Column="1" x:Name="BtnRight" Width="0"/>
</Grid>
</Border>
Thanks

I am not sure you can set properties for controls outside of the scope of a control with a style assigned to it. Even if it is possible, it doesn't seem right to do so.
What you can do in your scenario is to use event triggers and storyboards, defined anywhere they'd be visible to both buttons. Here's an example of how to modify BtnLeft, although I'd prefer to put the storyboards a bit further up the tree to allow for reuse if necessary:
<Button Margin="0,0,0,0" Content="Button" Grid.Row="0" x:Name="BtnLeft" Style="{DynamicResource ButtonStyle1}">
<Button.Resources>
<Storyboard x:Key="OnMouseEnter1">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="BtnRight"
Storyboard.TargetProperty="Width">
<SplineDoubleKeyFrame KeyTime="00:00:00.5" Value="75"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="OnMouseLeave1">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="BtnRight"
Storyboard.TargetProperty="Width">
<SplineDoubleKeyFrame KeyTime="00:00:00.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Button.Resources>
<Button.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="BtnLeft">
<BeginStoryboard Storyboard="{StaticResource OnMouseEnter1}"/>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave" SourceName="BtnLeft">
<BeginStoryboard Storyboard="{StaticResource OnMouseLeave1}"/>
</EventTrigger>
</Button.Triggers>
</Button>
Instead of the IsMouseOver property, you can use MouseEnter and MouseLeave events. That should give you the same functionality.
Edit: The SourceName property can be omitted from the EventTrigger when that trigger is defined within the scope of the button.