Question

I have a simple app where after clicking a button the value of a label is updated every second.I’m doing this as a POC for a progress bar control that I want to develop.

I would like to know if there is a way to apply some kind of scroller animation to the label which will:

1) When the content of a label is updated it will scroll the new value from the top and the old one will be scrolled down and disappear from view(Hope this makes sence).

I know that this could probably be achieved with some kind of animation but I couldn’t find any helpful examples on the web if anyone knows how this can be done please share your expertise:

View:

<Window x:Class="WpfApplication1.ScrollerView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Scroller" DataContext="{StaticResource scrollerVM}" Height="150" Width="300">
    <Grid>
        <ListBox ItemsSource="{Binding Messages}" Width="200" Height="50" BorderThickness="0" VerticalAlignment="Top" HorizontalAlignment="Left">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Label Content="{Binding Text}"  />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ListBox>
        <Button Width="70" Height="24" Content="Add new" Command="{Binding AddNew}" HorizontalAlignment="Left" Margin="0,56,0,30" />
    </Grid>
</Window>

View model:

using System;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Windows.Threading;

namespace WpfApplication1.Scroller
{
    public class Message
    {
        public Message(string _text)
        {
            text = _text;
        }

        private string text;
        public string Text
        {
            get { return text; }
            set {text = value;}
        }
    }

    public class ScrollerViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        public DelegateCommand AddNew { get; protected set; }

        ObservableCollection<Message> _messages = new ObservableCollection<Message>();
        public ObservableCollection<Message> Messages
        {
            get { return _messages; }
            set
            {
                _messages = value;
                OnPropertyChanged("Messages");
            }
        }

        public ScrollerViewModel()
        {
            AddNew = new DelegateCommand(Add);
        }

        private void Add(object parameter)
        {
            DispatcherTimer timer = new DispatcherTimer();
            timer.Tick += new System.EventHandler(timer_Tick);
            timer.Interval = new System.TimeSpan(0, 0, 1);
            timer.Start();
        }

        private void timer_Tick(object sender, EventArgs e)
        {
            Messages.Clear();
            Messages.Add(new Message(DateTime.Now.ToString("ss")));
        }

        protected void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

Answer 1

More comprehensive/different examples here.

The following will result in a basic vertical marquee (scrolling text block).

XAML:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Loaded="Window_Loaded">
    <Canvas  Name="canvas1" >
        <TextBlock  Name="textBlock1">Hello</TextBlock>
    </Canvas>
</Window>

Code:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void BeginAnimation()
    {
        DoubleAnimation doubleAnimation = new DoubleAnimation();
        doubleAnimation.From = -textBlock1.ActualHeight;
        doubleAnimation.To = canvas1.ActualHeight;
        doubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
        doubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(3));
        textBlock1.BeginAnimation(Canvas.TopProperty, doubleAnimation);
    }

    private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        BeginAnimation();
    }
}