Trouble In Animation

[vinothkumar124]

Hi,
please copy paste and run this code below and help me in doing the animation in popup when you click on the listview items, the popup should expand very slowly when the mouse enter and collapse back when the mouse leave, expecting your reply :). i tried with the time duration found in the popup say some 5 secs, but it displaying only after 5 secs suddenly, i dont want the popup to display suddenlt, hope ui understand my problem, please rply soon ;-)

<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>
<!-- background gradient -->
<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">
<!-- for mouse enter event ,it triggers the scaletransform-->
<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>
<!-- for listview to show animation as outer glow effect-->
<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 Window</Button>
</Grid>
<!-- button to show animation as outer glow effect-->

<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 Employee</TextBlock>
<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">Age</Label>
<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 Status</Label>
<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">Details</Label>
<Label Content="{Binding XPath=details}" Height="63" Margin="93,0,18,22" Name="label4" VerticalAlignment="Bottom"></Label>
</Grid>
</Popup>
<Grid>
<Grid.Triggers>
<!-- story board for mouse enter animation-->
<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>


for refer : please visit MSDN home page and see the top right corner where you find Microsofft.com on moving the mouse over that you can see some popup amination which slowly opens and cllose on mouse enter and leave event,

Expecting reply from all other people who loves .Net :)

[kirupa]

Are you using your own popup, or are you using your one of the built-in popup classes?

The easiest way to do this would be to have two storyboards. One storyboard animates the popup appearing. Another storyboard animates the popup disappearing.

:)

[vinothkumar124]

Are you using your own popup, or are you using your one of the built-in popup classes?

The easiest way to do this would be to have two storyboards. One storyboard animates the popup appearing. Another storyboard animates the popup disappearing.

:)


-------------------------------------------------------------------------------------

Hi kirupa,
i am using the build-in popup classes as the popup by default on clicking the mouse over the item in the listview,it will popup soon and when on clicking EXIT button in that popup window the popup will disappears soon.But please tell me as how to make that slowly expanding and collapsing as you said to make it two story board.this is didnt understand ,please dont mistake me as i am the beginner for this WPF world,let me clear in coding samples.If possible let me by using my code itself.
thanks ,
vinoth

[vinothkumar124]

expecting ur reply soon

[vinothkumar124]

Hi,
i got help from ym friends and they giving suggestion to use blend expression.

in Blend, create a storyboard which make the the control opacity to 0 at 0sec and after 5 sec set opacity to 5sec. On load of the popup play the storyboard.

But i want to do it in VS-08 and by the same time,on mouse over to the list item the popup shuld appear as i mentioned in my query.
please try the above solution and let me know soon

regards,
vinoth

[docsnydertexas]

Hello Vinoth,

Please try to comment out the code for the BitmapEffects in your XAML. I made the same bad experiences combining bitmap effects and animations. I've heard that animations in WPF are not hardware accelerated in Win XP, so those animations are very slow and jerking.

Greets, Michael

[vinothkumar124]

hi Micheal,

Thanks for your reply and it is done :)