WPF Animation Using DoubleAnimation
Easiest way to animate is using the Double Animation provided by WPF. It is much easier to use the Double Animation as there are only few statements needed and they are quite straight forward to implement. For e.g. Specifying the following parameters will let you start understand the animation easily
• From
• To
• RepeatBehavior
• Duration
After this setup, just calling the BeginAnimation method alongwith which property needs to be animated (in our case it is the right property) will start sliding horizontally.
Animation Setup
For horizontal marquee, we need two controls. One is the outer panel and the sliding label. For horizontal sliding or marquee we can either change the left property or right property using double animation object. For example we are going to try the right property.
If you want the sliding to be faster then reduce the duration. If you want the sliding to be slower, then duration has to be increased.
Animation in Listbox Items
Since we like to have the animation inside the listbox items, I made this label as the UserControl. So, we can either use inside the ListBox or can be used independently. Listbox Items bound to the data and values will be passed to listbox items while binding. We have to get the data and assign it to our Marquee control respectively.
DependencyPropertyChangedEvent
For transferring the values from the listbox to marque slider, we use the dependency property we created and named as MarqueeText. We need to register the property as the dependency property along with the event for property value changed. This event will be triggered whenever there is a change in the event.
We can retrieve the new value i.e the changed value from the event argument DependencyPropertyChangedEventArgs. There is a property named as e.NewValue.
Screen Capture
First Screen Capture
Second Screen Capture
(after few seconds from First Screen Capture)
Source Code
Markup (*.xaml)
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="512" Width="541"
xmlns:uc="clr-namespace:TestAnimation">
<Window.Resources>
<DataTemplate x:Key="CustomerTemplate">
<Border BorderThickness="2" BorderBrush="silver"
CornerRadius="5" Padding="1" Width="500"
HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid>
<TextBlock Text="{Binding CompanyName}" Foreground="#515151"
FontSize="16" HorizontalAlignment="Left"
FontWeight="Bold" />
<TextBlock Text="{Binding ContactTitle}" Foreground="#515151"
Margin="0,25,0,0"
FontSize="10" HorizontalAlignment="Left"
FontWeight="Bold" />
<uc:MarqueeLabel Margin="0,40,0,0" Grid.ColumnSpan="2"
MarqueeText="{Binding Address}"></uc:MarqueeLabel>
</Grid>
</Border>
</DataTemplate>
</Window.Resources>
<Grid>
<uc:MarqueeLabel Margin="0,0,0,442" MarqueeText="Simple Marquee"
></uc:MarqueeLabel>
<ListBox Name="ListBox1" ItemsSource="{Binding}"
ItemTemplate="{StaticResource CustomerTemplate}"
Margin="0,50,0,30" HorizontalAlignment="Left" Width="515">
</ListBox>
<Button HorizontalAlignment="Left" Name="Button1"
Width="75" Height="23" VerticalAlignment="Bottom" >Button</Button>
</Grid>
</Window>
Code Behind(*.xaml.vb)
Imports System.Data
Imports System.Data.SqlClient
Class MainWindow
Private Sub Button1_Click(sender As System.Object,
e As System.Windows.RoutedEventArgs) Handles Button1.Click
BindData()
End Sub
Private Sub BindData()
ListBox1.DataContext = GetData().Tables(0)
MsgBox("DONE")
End Sub
Private Function GetData() As DataSet
Dim NwndConString = "Data Source=.\SQLEXPRESS;Initial Catalog=Northwind;Persist Security Info=True;Trusted_Connection=True "
Dim conNwnd As New SqlConnection(NwndConString)
Dim strSelect As String = "Select * from Customers"
Dim adaNwnd As New SqlDataAdapter(strSelect, NwndConString)
Dim dsNwnd As New DataSet
adaNwnd.Fill(dsNwnd)
Return dsNwnd
End Function
End Class
Markup User Control (*.xaml)
<UserControl x:Class="MarqueeLabel"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="30" d:DesignWidth="100" Height="30">
<Canvas Name="OuterPanel" ClipToBounds ="True">
<Label Name="lblText" Height="30" FontSize="16" >
</Label>
</Canvas>
</UserControl>
Code Behind User Control(*.xaml.vb)
Imports System.Windows.Media.Animation
Public Class MarqueeLabel
Public Shared ReadOnly MarqueeTextProperty As _
DependencyProperty = DependencyProperty.Register("MarqueeText",
GetType(String),
GetType(MarqueeLabel),
New UIPropertyMetadata(String.Empty, AddressOf MarqueeTextChangedCallback))
Public Property MarqueeText As String
Private Sub HorizontalMarquee()
Dim Animator As New DoubleAnimation()
With Animator
.From = -lblText.ActualWidth
.To = OuterPanel.ActualWidth
.RepeatBehavior = RepeatBehavior.Forever
.Duration = New Duration(TimeSpan.FromSeconds(10))
End With
lblText.BeginAnimation(Canvas.RightProperty, Animator)
End Sub
Private Sub MarqueeLabel_Loaded(sender As Object,
e As System.Windows.RoutedEventArgs) Handles Me.Loaded
HorizontalMarquee()
End Sub
Private Shared Sub MarqueeTextChangedCallback(Sender As DependencyObject,
e As DependencyPropertyChangedEventArgs)
Dim MarqueControl = DirectCast(Sender, MarqueeLabel)
MarqueControl.lblText.Content = e.NewValue
End Sub
End Class