animation

Hi,

please run the below code and see my animation i created for scale transformation in listview,When u click the listitem, the popup will display but it display fast,i want it to display very slowly in such a way that the popup should expand and collapse slowly that the user should see the expanding and collapsing,this is my first program ,so please help me in doing this.

<Window x:Class="WpfApplication4.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="List_View Example" Height="301" Width="361" WindowStartupLocation="Manual"

xmlns:sys="clr-namespace:System;assembly=mscorlib" >

<Window.Resources>

<XmlDataProvider x:Key="employee_DS" Source="data.xml"

x:Name="empdata" />

Style>

Window.Resources>

<Window.Background>

<LinearGradientBrush.GradientStops>

LinearGradientBrush.GradientStops>

LinearGradientBrush>

Window.Background>

<Grid>

<ListView Name="lstvwEmployees" Margin="25,0,21,-156" ItemTemplate="{DynamicResource EmployeeTemplate}"

ItemsSource="{Binding Source={StaticResource employee_DS},

XPath=/wipro_employee/employee}" SelectionChanged="ListView_SelectionChanged" Cursor="Hand" MouseEnter ="lstvwEmployees_MouseEnter" Height="99" VerticalAlignment="Bottom">

<ListView.ItemContainerStyle>

<Style.Triggers>

<Setter.Value>

Setter.Value>

Setter>

<Trigger.EnterActions>

ParallelTimeline>

Storyboard>

BeginStoryboard>

Trigger.EnterActions>

<Trigger.ExitActions>

ParallelTimeline>

Storyboard>

BeginStoryboard>

Trigger.ExitActions>

Trigger>

Style.Triggers>

Style>

ListView.ItemContainerStyle>

<ListView.BitmapEffect>

BitmapEffectGroup>

ListView.BitmapEffect>

<ListView.View>

GridView>

ListView.View>

ListView>

<Button Height="34" Name="button1" Width="77" HorizontalAlignment="Right" Margin="0,0,21,-201" VerticalAlignment="Bottom" Click="button1_Click">Close WindowButton>

Grid>

<Popup Placement="Mouse" Name="popup" PopupAnimation="Slide"

DataContext="{StaticResource employee_DS}" AllowsTransparency="True">

<TextBlock Margin="20,27,10,22" >Details of the EmployeeTextBlock>

<Label Margin="20,48,172,0" Content="Code" Height="24" VerticalAlignment="Top">Label>

<Label Content="Name" Margin="20,86,0,132" HorizontalAlignment="Left" Width="43">Label>

<Label Content="Country" Margin="20,124,0,106" HorizontalAlignment="Left" Width=" 50">Label>

<Button Background="ForestGreen" Margin="0,0,10,0" Name="ex" Content="Exit" Click="Button_Click_1" HorizontalAlignment="Right" Width="69" Height="26" VerticalAlignment="Bottom">Button>

<Label HorizontalAlignment="Left" Margin="20,158,0,142" Name="Label1" Width="83">AgeLabel>

<Label Height="32" HorizontalAlignment="Left" Margin="21,0,0,90" Name="label2" VerticalAlignment="Bottom" Width="94">Job StatusLabel>

<Label Height="32" HorizontalAlignment="Left" Margin="21,0,0,30" Name="label3" VerticalAlignment="Bottom" Width="83">DetailsLabel>

<Label Content="{Binding XPath=details}" Height="63" Margin="93,0,18,22" Name="label4" VerticalAlignment="Bottom">Label>

Grid>

Popup>

<Grid>

<Grid.Triggers>

<EventTrigger.Actions>

<DoubleAnimation

Storyboard.TargetName="lstvwEmployees"

Storyboard.TargetProperty="Opacity"

To="1.0" Duration="0:0:1"/>

Storyboard>

BeginStoryboard>

EventTrigger.Actions>

EventTrigger>

<EventTrigger.Actions>

<DoubleAnimation

Storyboard.TargetName="lstvwEmployees"

Storyboard.TargetProperty="Opacity"

To="0.3" Duration="0:0:2"/>

Storyboard>

BeginStoryboard>

EventTrigger.Actions>

EventTrigger>

Grid.Triggers>

Grid>

StackPanel>

Window>

Thanks in advance to all .Net lovers,

regards,

vinoth

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

vv vvv17y ago
Accepted answer
hi,

thanks a lot for ur kind help as this is my first program in wpf.

regards,

vinoth
vv vvv17y ago

Hi,

please run the below code and see my animation i created for scale transformation in listview,When u click the listitem, the popup will display but it display fast,i want it to display very slowly in such a way that the popup should expand and collapse slowly that the user should see the expanding and collapsing,this is my first program ,so please help me in doing this.

<Window x:Class="WpfApplication4.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="List_View Example" Height="301" Width="361" WindowStartupLocation="Manual"

xmlns:sys="clr-namespace:System;assembly=mscorlib" >

<Window.Resources>

<XmlDataProvider x:Key="employee_DS" Source="data.xml"

x:Name="empdata" />

<Style x:Key="{x:Type Button }" TargetType="{x:Type Button}">

<Setter Property="FontFamily" Value="Tahoma" />

<Setter Property="FontSize" Value="10" />

<Setter Property="Height" Value="65" />

<Setter Property="Margin" Value="20,20,20,0" />

Style>

Window.Resources>

<Window.Background>

<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

<LinearGradientBrush.GradientStops>

<GradientStop Color="Aqua" Offset="0" />

<GradientStop Color="BlanchedAlmond" Offset="0.5" />

<GradientStop Color="Chocolate" Offset="0.9" />

<GradientStop Color="DarkOrange" Offset="1" />

LinearGradientBrush.GradientStops>

LinearGradientBrush>

Window.Background>

<StackPanel >

<Grid>

<ListView Name="lstvwEmployees" Margin="25,0,21,-156" ItemTemplate="{DynamicResource EmployeeTemplate}"

ItemsSource="{Binding Source={StaticResource employee_DS},

XPath=/wipro_employee/employee}" SelectionChanged="ListView_SelectionChanged" Cursor="Hand" MouseEnter ="lstvwEmployees_MouseEnter" Height="99" VerticalAlignment="Bottom">

<ListView.ItemContainerStyle>

<Style TargetType="ListViewItem">

<Style.Triggers>

<Trigger Property="IsMouseOver" Value="True">

<Setter Property="Panel.ZIndex" Value="{x:Static sys:Int32.MaxValue}"/>

<Setter Property="RenderTransform">

<Setter.Value>

<ScaleTransform ScaleX="1" ScaleY="1"/>

Setter.Value>

Setter>

<Trigger.EnterActions>

<BeginStoryboard>

<Storyboard>

<ParallelTimeline BeginTime="0:0:0">

<DoubleAnimation Duration="00:00:00.3000000" To="1.5" Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleY)"/>

<DoubleAnimation Duration="00:00:00.3000000" To="1.5" Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)"/>

ParallelTimeline>

Storyboard>

BeginStoryboard>

Trigger.EnterActions>

<Trigger.ExitActions>

<BeginStoryboard>

<Storyboard>

<ParallelTimeline BeginTime="0:0:0">

<DoubleAnimation Duration="00:00:00.3000000" To="2" Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleY)"/>

<DoubleAnimation Duration="00:00:00.3000000" To="2" Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)"/>

ParallelTimeline>

Storyboard>

BeginStoryboard>

Trigger.ExitActions>

Trigger>

Style.Triggers>

Style>

ListView.ItemContainerStyle>

<ListView.BitmapEffect>

<BitmapEffectGroup>

<OuterGlowBitmapEffect GlowColor="CornflowerBlue" GlowSize="15"/>

<DropShadowBitmapEffect ShadowDepth="10" Softness="5"/>

<BevelBitmapEffect BevelWidth="15"/>

BitmapEffectGroup>

ListView.BitmapEffect>

<ListView.View>

<GridView >

<GridViewColumn Header="Code" Width="50" DisplayMemberBinding="{Binding XPath=Code}" />

<GridViewColumn Header="Name" Width="100" DisplayMemberBinding="{Binding XPath=Name}"/>

<GridViewColumn Header="Country" DisplayMemberBinding="{Binding XPath=Country}"/>

GridView>

ListView.View>

ListView>

<Button Height="34" Name="button1" Width="77" HorizontalAlignment="Right" Margin="0,0,21,-201" VerticalAlignment="Bottom" Click="button1_Click">Close WindowButton>

Grid>

<Popup Placement="Mouse" Name="popup" PopupAnimation="Slide"

DataContext="{StaticResource employee_DS}" AllowsTransparency="True">

<Grid Name="grid1" Background="Gray" DataContext="{Binding}">

<TextBlock Margin="20,27,10,22" >Details of the EmployeeTextBlock>

<Label Margin="20,48,172,0" Content="Code" Height="24" VerticalAlignment="Top">Label>

<Label Content="Name" Margin="20,86,0,132" HorizontalAlignment="Left" Width="43">Label>

<Label Content="Country" Margin="20,124,0,106" HorizontalAlignment="Left" Width=" 50">Label>

<Button Background="ForestGreen" Margin="0,0,10,0" Name="ex" Content="Exit" Click="Button_Click_1" HorizontalAlignment="Right" Width="69" Height="26" VerticalAlignment="Bottom">Button>

<TextBox Text="{Binding XPath=Code}" Height="26" Margin="108,54,32,0" Name="textBox1" VerticalAlignment="Top"/>

<TextBox Text="{Binding XPath=Name}" Height="26" Margin="108,89,32,0" Name="textBox2" VerticalAlignment="Top"/>

<TextBox Text="{Binding XPath=Country}" Height="27" Margin="107,124,32,0" Name="textBox3" VerticalAlignment="Top"/>

<Label HorizontalAlignment="Left" Margin="20,158,0,142" Name="Label1" Width="83">AgeLabel>

<TextBox Text="{Binding XPath=age}" Margin="107,164,32,139" Name="textBox4" />

<Label Height="32" HorizontalAlignment="Left" Margin="21,0,0,90" Name="label2" VerticalAlignment="Bottom" Width="94">Job StatusLabel>

<TextBox Text="{Binding XPath=job}" Height="25" Margin="107,0,30,95" Name="textBox5" VerticalAlignment="Bottom" />

<Label Height="32" HorizontalAlignment="Left" Margin="21,0,0,30" Name="label3" VerticalAlignment="Bottom" Width="83">DetailsLabel>

<Label Content="{Binding XPath=details}" Height="63" Margin="93,0,18,22" Name="label4" VerticalAlignment="Bottom">Label>

Grid>

Popup>

<Grid>

<Grid.Triggers>

<EventTrigger RoutedEvent='Rectangle.MouseEnter' Storyboard.TargetName="popup" Storyboard.TargetProperty="(Popup.IsOpen)">

<EventTrigger.Actions>

<BeginStoryboard>

<Storyboard>

<DoubleAnimation

Storyboard.TargetName="lstvwEmployees"

Storyboard.TargetProperty="Opacity"

To="1.0" Duration="0:0:1"/>

Storyboard>

BeginStoryboard>

EventTrigger.Actions>

EventTrigger>

<EventTrigger RoutedEvent='Rectangle.MouseLeave'>

<EventTrigger.Actions>

<BeginStoryboard>

<Storyboard>

<DoubleAnimation

Storyboard.TargetName="lstvwEmployees"

Storyboard.TargetProperty="Opacity"

To="0.3" Duration="0:0:2"/>

Storyboard>

BeginStoryboard>

EventTrigger.Actions>

EventTrigger>

Grid.Triggers>

Grid>

StackPanel>

Window>

Thanks in advance to all .Net lovers,

regards,

vinoth
Bechir Bejaoui17y ago
Read those article, I wrote them to initialte people to the world of the WPF and Silverlight animations
http://www.c-sharpcorner.com/UploadFile/yougerthen/407232008132712PM/4.aspx
http://www.c-sharpcorner.com/UploadFile/yougerthen/307292008104845AM/3.aspx
http://www.c-sharpcorner.com/UploadFile/yougerthen/307292008110001AM/3.aspx

After reading those three articles, you will be able to create a stronger animation than you have seen, WPF and Silverlight are very strong in that sense, it's for sure