WPF 滚动文字控件MarqueeControl

原文:WPF 滚动文字控件MarqueeControl

WPF使用的滚动文字控件，支持上下左右滚动方式，支持设置滚动速度

XAML部分：

<UserControl x:Class="UIControl.MarqueeControl"
             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="300" Loaded="UserControl_Loaded">
    <Canvas ClipToBounds="True" x:Name="canvas">
        <Canvas.Resources>
            <Storyboard x:Key="stdUp">
                <DoubleAnimation Duration="0:0:1.5" Storyboard.TargetName="content" Storyboard.TargetProperty="RenderTransform.Y"/>
            </Storyboard>
            <Storyboard x:Key="stdLeft">
                <DoubleAnimation Duration="0:0:1.5" Storyboard.TargetName="content" Storyboard.TargetProperty="RenderTransform.X"/>
            </Storyboard>
        </Canvas.Resources>
        <StackPanel x:Name="content">
            <StackPanel.RenderTransform>
                <TranslateTransform/>
            </StackPanel.RenderTransform>
            <TextBlock x:Name="txtItem" Foreground="Black"/>
        </StackPanel>
    </Canvas>
</UserControl>

后台部分：

 public partial class MarqueeControl : UserControl
    {
        Storyboard std = null;
        DoubleAnimation animation = null;
        int index, total;

        public MarqueeControl()
        {
            InitializeComponent();
        }

        public MarqueeType ShowType
        {
            get { return (MarqueeType)this.GetValue(ShowTypeProperty); }
            set { this.SetValue(ShowTypeProperty, value); }
        }
        public static readonly DependencyProperty ShowTypeProperty = DependencyProperty.Register("ShowType", typeof(MarqueeType), typeof(MarqueeControl), new PropertyMetadata(MarqueeType.Up));

        public double Speed
        {
            get { return (double)this.GetValue(SpeedProperty); }
            set { this.SetValue(SpeedProperty, value); }
        }
        public static readonly DependencyProperty SpeedProperty = DependencyProperty.Register("Speed", typeof(double), typeof(MarqueeControl), new PropertyMetadata(1.5));

        private void UserControl_Loaded(object sender, RoutedEventArgs e)
        {
            if (ShowType == MarqueeType.Up || ShowType == MarqueeType.Down)
            {
                std = (Storyboard)canvas.Resources["stdUp"];
                content.Width = canvas.ActualWidth;
                txtItem.TextWrapping = TextWrapping.Wrap;
            }
            if (ShowType == MarqueeType.Left || ShowType == MarqueeType.Right)
            {
                std = (Storyboard)canvas.Resources["stdLeft"];
                content.Height = canvas.ActualHeight;
            }

            animation = (DoubleAnimation)std.Children[0];
            std.Completed += (t, r) => changeItem();
        }

        private List<string> itemsSource;
        public List<string> ItemsSource
        {
            get { return itemsSource; }
            set
            {
                this.Dispatcher.BeginInvoke(new Action(() =>
                {
                    if (std != null)
                    {
                        std.Stop();
                        txtItem.Text = "";
                        itemsSource = value;

                        if (itemsSource != null && itemsSource.Count > 0)
                        {
                            index = 0;
                            total = value.Count;
                            changeItem();
                        }
                    }
                }));
            }
        }

        private void changeItem()
        {
            txtItem.Text = itemsSource[index].ToString();
            txtItem.UpdateLayout();
            double canvasWidth = canvas.ActualWidth;
            double canvasHeight = canvas.ActualHeight;
            double txtWidth = txtItem.ActualWidth;
            double txtHeight = txtItem.ActualHeight;

            if (ShowType == MarqueeType.Up)
            {
                animation.From = canvasHeight;
                animation.To = -txtHeight;
            }
            else if (ShowType == MarqueeType.Down)
            {
                animation.From = -txtHeight;
                animation.To = canvasHeight;
            }
            else if (ShowType == MarqueeType.Left)
            {
                animation.From = canvasWidth;
                animation.To = -txtWidth;
            }
            else if (ShowType == MarqueeType.Right)
            {
                animation.From = -txtWidth;
                animation.To = canvasWidth;
            }
            int time = 0;
            if (ShowType == MarqueeType.Up || ShowType == MarqueeType.Down)
            {
                time = (int)(txtHeight / canvasHeight * Speed);
            }
            if (ShowType == MarqueeType.Left || ShowType == MarqueeType.Right)
            {
                time = (int)(txtWidth / canvasWidth * Speed);
            }
            if (time < 2) time = 2;
            animation.Duration = new Duration(new TimeSpan(0, 0, time));

            index++;
            if (index == total) index = 0;

            if (std != null)
            {
                std.Begin();
            }
        }
    }

    public enum MarqueeType
    {
        Up,
        Down,
        Left,
        Right
    }

用法：

 <UIControl:MarqueeControl x:Name="scrollingTextControl" ShowType="Left" Speed="2"/>

后台设置ItemSource：scrollingTextControl.ItemsSource = new List<string>() { ... };