Use two storyboards to control the slidein and slideout
<UserControl x:Class='SilverlightApplication3.MainPage'
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'
mc:Ignorable='d'
d:DesignWidth='640' d:DesignHeight='480'>
<Canvas x:Name="LayoutRoot" Background="White" >
<Canvas Height="142" Width="190" Canvas.Left="-165" Canvas.Top="182" x:Name="Slider" RenderTransformOrigin="0.5,0.5" Cursor="Hand">
<Canvas.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Canvas.RenderTransform>
<Rectangle Height="142" Width="190" RadiusX="13" RadiusY="13" Fill="#FF494949"/>
<Path Height="15" Width="12.5" Canvas.Left="171" Canvas.Top="62.5" Fill="Red" Stretch="Fill" Data="M6.5,236 L6.5,250 L18,243.5 z"/>
</Canvas>
</Canvas>
</UserControl>
//File: Page.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SilverlightApplication3
{
public partial class MainPage : UserControl
{
private Storyboard SlideOut = new Storyboard();
private Storyboard SlideIn = new Storyboard();
public MainPage()
{
InitializeComponent();
SlideOut.Children.Add(CreateSlidingAnim("Slider", 150));
LayoutRoot.Resources.Add("SlideOut", SlideOut);
SlideIn.Children.Add(CreateSlidingAnim("Slider", 0));
LayoutRoot.Resources.Add("SlideIn", SlideIn);
Slider.MouseEnter += new MouseEventHandler(Slider_MouseEnter);
Slider.MouseLeave += new MouseEventHandler(Slider_MouseLeave);
}
private DoubleAnimation CreateSlidingAnim(string elementName, double toValue)
{
DoubleAnimation animation = new DoubleAnimation();
animation.SetValue(Storyboard.TargetNameProperty, elementName);
animation.SetValue(Storyboard.TargetPropertyProperty, new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"));
animation.Duration = new Duration(TimeSpan.FromSeconds(0.5));
animation.To = toValue;
return animation;
}
private void Slider_MouseLeave(object sender, MouseEventArgs e)
{
SlideIn.Begin();
}
private void Slider_MouseEnter(object sender, MouseEventArgs e)
{
SlideOut.Begin();
}
}
}
Related examples in the same category
