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>
Related
In my example app, I have a inner grid's height binded to the main grid's height. When I maximise and minimise the window, their heights are the same. after I execute an animation that changes the inner grid's height from 100 to binding the main grid's height again, the binding is lost. This is evident because when I maximise the window, the inner grids height remains the same while the main grid's height changes to fit the fill height of the window
Why is this and how can I fix it so the inner grid retains the main grid's height after I've set it back to that after an animation.
Example app:
<Window.Resources>
<Storyboard x:Key="ShrinkSlider" x:Name="ShrinkSlider"
Completed="ShrinkSlider_Completed">
<DoubleAnimation
Storyboard.TargetProperty="Height"
Storyboard.TargetName="gridSlider"
DecelerationRatio="0.9"
From="100"
To="{Binding ActualHeight, ElementName=gridMain}"
Duration="00:00:00.5" />
</Storyboard>
<Storyboard x:Key="ExpandSlider" x:Name="ExpandSlider"
Completed="ExpandSlider_Completed">
<DoubleAnimation
Storyboard.TargetProperty="Height"
Storyboard.TargetName="gridSlider"
DecelerationRatio="0.9"
From="{Binding ActualHeight, ElementName=gridMain}"
To="100"
Duration="00:00:00.5" />
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="ButtonBase.Click"
SourceName="btnShrink">
<BeginStoryboard x:Name="bsbShrinkSlider"
Storyboard="{StaticResource ShrinkSlider}" />
</EventTrigger>
<EventTrigger RoutedEvent="ButtonBase.Click"
SourceName="btnExpand">
<BeginStoryboard x:Name="bsbExpandSlider"
Storyboard="{StaticResource ExpandSlider}" />
</EventTrigger>
</Window.Triggers>
<Grid x:Name="gridMain">
<Grid x:Name="gridSlider"
Background="#1f1f1f"
VerticalAlignment="Top"
Height="{Binding ActualHeight, ElementName=gridMain}">
</Grid>
<StackPanel VerticalAlignment="Bottom">
<Button Content="Shrink"
x:Name="btnShrink"
Height="20"
Click="BtnShrink_Click" />
<Button Content="Expand"
x:Name="btnExpand"
Height="20"
Click="BtnExpand_Click" />
</StackPanel>
</Grid>
Okay so I figured it out. I needed to set Storyboard FillBehaviour = "Stop"
Then I needed to recreate the binding on the Storyboard Completed event:
Binding binding = new Binding();
binding.Source = gridMain;
binding.Path = new PropertyPath(Grid.ActualHeightProperty);
gridSlider.SetBinding(Grid.HeightProperty, binding);
Here is the full code amended:
xaml:
<Window.Resources>
<Storyboard x:Key="ShrinkSlider" x:Name="ShrinkSlider"
Completed="ShrinkSlider_Completed"
FillBehavior="Stop">
<DoubleAnimation
Storyboard.TargetProperty="Height"
Storyboard.TargetName="gridSlider"
DecelerationRatio="0.9"
From="{Binding ActualHeight, ElementName=gridMain}"
To="100"
Duration="00:00:00.5" />
</Storyboard>
<Storyboard x:Key="ExpandSlider" x:Name="ExpandSlider"
Completed="ExpandSlider_Completed"
FillBehavior="Stop">
<DoubleAnimation
Storyboard.TargetProperty="Height"
Storyboard.TargetName="gridSlider"
DecelerationRatio="0.9"
From="100"
To="{Binding ActualHeight, ElementName=gridMain}"
Duration="00:00:00.5" />
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="ButtonBase.Click"
SourceName="btnShrink">
<BeginStoryboard x:Name="bsbShrinkSlider"
Storyboard="{StaticResource ShrinkSlider}" />
</EventTrigger>
<EventTrigger RoutedEvent="ButtonBase.Click"
SourceName="btnExpand">
<BeginStoryboard x:Name="bsbExpandSlider"
Storyboard="{StaticResource ExpandSlider}" />
</EventTrigger>
</Window.Triggers>
<Grid x:Name="gridMain">
<Grid x:Name="gridSlider"
Background="#1f1f1f"
VerticalAlignment="Top"
Height="{Binding ActualHeight, ElementName=gridMain}">
</Grid>
<StackPanel VerticalAlignment="Bottom">
<Button Content="Shrink"
x:Name="btnShrink"
Height="20" />
<Button Content="Expand"
x:Name="btnExpand"
Height="20" />
</StackPanel>
</Grid>
cs:
private void ShrinkSlider_Completed(object sender, EventArgs e)
{
gridSlider.Height = 100;
}
private void ExpandSlider_Completed(object sender, EventArgs e)
{
Binding binding = new Binding();
binding.Source = gridMain;
binding.Path = new PropertyPath(Grid.ActualHeightProperty);
gridSlider.SetBinding(Grid.HeightProperty, binding);
}
As the title says, I want to know how to assign the height(or ActualHeight) of the container to the To parameter/attribute of DoubleAnimation in xaml?
Here is my code:
<Canvas Name="animCanvas">
<Rectangle
Name="animSquare"
Canvas.Left="0"
Fill="AliceBlue"
Stroke="Bisque"
StrokeThickness="5"
Width="100"
Height="100"
>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation
Storyboard.TargetName="animSquare"
Storyboard.TargetProperty="(Canvas.Top)"
From="0"
To="500" <!-- I want to set it to the containers height -->
Duration="0:0:1"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Canvas>
You can apply Binding to the To property of double animation like this :
To="{Binding ElementName=animSquare, Path=Height}"
I think this would solve your issue.
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 having a problem with this code:
<Grid Canvas.ZIndex="1999" VerticalAlignment="Top" HorizontalAlignment="Left" x:Name="filter1" Margin="0,0,0,0" Background="#D8181818" Height="640" Width="400">
<Grid.Resources>
<Storyboard x:Name="FadeStoryboardbefore">
<DoubleAnimation From="0" To="1" Storyboard.TargetName="filter1"
Storyboard.TargetProperty="Opacity" Duration="0:0:0.4"
>
</DoubleAnimation>
</Storyboard>
<Storyboard x:Name="FadeStoryboardafter">
<DoubleAnimation From="1" To="0" Storyboard.TargetName="filter1"
Storyboard.TargetProperty="Opacity" Duration="0:0:0.4"
>
</DoubleAnimation>
</Storyboard>
</Grid.Resources>
<ScrollViewer Canvas.ZIndex="2000" VerticalAlignment="Top" HorizontalAlignment="Left" x:Name="scroll_filter" Height="641" Width="400">
<Grid Height="Auto" Canvas.ZIndex="2001" VerticalAlignment="Top" HorizontalAlignment="Left" x:Name="bottoni_filtro" >
</Grid>
</ScrollViewer>
</Grid>
The problem is that when I add elements with filter1.childrens.add in c#, it works. With the second grid, bottoni_filtro.childrends.add doesn't work. When I start the app, it doesn't show elements on bottoni_filtro..
How can I fix that??
P.S. properties like width are set through code (c#)
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..