wpf auto scroll items in databound ItemsControl (like news ticker)

Question

I am creating a messages ticker for my application.

 <UserControl.Resources>
    <DataTemplate x:Key="MessagesDataTemplate">
        <TextBlock 
           FontWeight="Bold" 
           FontSize="12" 
           Text="{Binding Path=Message}" 
           Height="30" 
           Margin="2"/>
    </DataTemplate>
</UserControl.Resources>

<Grid>
    <ItemsControl 
       ItemsSource="{Binding Messages}" 
       ItemTemplate="{StaticResource MessagesDataTemplate}">          
    </ItemsControl>
</Grid>

I want to display a Message item (i.e. the TextBlock) for 5 seconds then move to the next item (vertically).

Can anyone guide me on this please?

You want to highlight an item in the itemscontrol after 5 seconds you want highlight the next item in the items control right..? — Bathineni, Jul 13 '11 at 08:53
Not quite...but you got me thinking that maybe using an ItemsControl is not the right one to use. The reason is because the UserControl will be inside a Border and the height of the border will be set so that only one Message can be seen. What I want is to scroll vertically through the Messages with a 5 second delay...doh...I should have thought this through better before asking the question — empo, Jul 13 '11 at 09:09

Bathineni · Accepted Answer · 2011-07-13T10:18:05.100

I have created a sample here is xaml and code behind for that

<UserControl x:Class="WpfApplication1.MessageTicker"
             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" Height="30">
     <UserControl.Resources>
    <DataTemplate x:Key="MessagesDataTemplate">
        <Grid x:Name="grid" RenderTransformOrigin="0.5,0.5">
            <Grid.Resources>
                <Storyboard x:Key="sb2">
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" >
                        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="2"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" >
                        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="2"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" >
                        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="2"/>
                        <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="2"/>
                        <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </Grid.Resources>
            <Grid.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleX="1" ScaleY="1"/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Grid.RenderTransform>
            <Grid.Style>
                <Style>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ListBoxItem}},Path=IsSelected}" Value="True">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard Storyboard="{StaticResource sb2}"> 

                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Grid.Style>
            <TextBlock 
       FontWeight="Bold" 
       FontSize="12" 
       Text="{Binding Path=Message}" 
       Height="30" 
       Margin="2"/>
        </Grid>
    </DataTemplate>
</UserControl.Resources>

<Grid>
    <ListBox BorderThickness="0" BorderBrush="Transparent" Name="messagesLB"
   ItemsSource="{Binding Messages}" 
   ItemTemplate="{StaticResource MessagesDataTemplate}">
    </ListBox>
</Grid>
</UserControl>

Code Behind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Threading;

namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for MessageTicker.xaml
    /// </summary>
    public partial class MessageTicker : UserControl
    {
        public MessageTicker()
        {
            InitializeComponent();
            List<Temp> Messages = new List<Temp>();
            for (int i = 0; i < 10; i++)
            {
                Messages.Add(new Temp { Message = "Message" + i });
            }
            messagesLB.ItemsSource = Messages;
            DispatcherTimer dt = new DispatcherTimer();
            dt.Tick += new EventHandler(dt_Tick);
            dt.Interval = TimeSpan.FromSeconds(2);
            dt.Start();
        }

        void dt_Tick(object sender, EventArgs e)
        {
            if ((messagesLB.SelectedIndex + 1) < messagesLB.Items.Count)
                messagesLB.SelectedIndex = messagesLB.SelectedIndex + 1;
            else
                messagesLB.SelectedIndex = 0;
            messagesLB.ScrollIntoView(messagesLB.SelectedItem);
        }

        public class Temp
        {
            public string Message { get; set; }
        }
    }


}

nice...how could I animate it so that there is kind of sliding effect? — empo, Jul 13 '11 at 09:52
I have updated xaml file in the answer.... i have added some stupid animation. you can change it as you like.. — Bathineni, Jul 13 '11 at 10:19
Thanks very much for the answer bathineni. Especially the stupid animation ;) — empo, Jul 13 '11 at 10:50
Thanks for marking my answer... i request to put an vote while accepting answer which encourage the user to answer more... thanks — Bathineni, Jul 13 '11 at 11:10

wpf auto scroll items in databound ItemsControl (like news ticker)

1 Answers1