1. 程式人生 > >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>() { ... };


相關推薦

WPF 滾動文字控制元件MarqueeControl

WPF使用的滾動文字控制元件,支援上下左右滾動方式,支援設定滾動速度XAML部分:<UserControl x:Class="UIControl.MarqueeControl" xmlns="http://schemas.microsoft.c

WPF 語言格式化文字控制元件

前言 本章講述正確新增語言資源的方式,以及一段語言資源的多種樣式顯示。 例如:“@Winter,你好!感謝已使用軟體 800 天!” 在新增如上多語言資源項時,“XX,你好!感謝已使用軟體 X 天!” 那麼,你是怎麼新增語言資源的呢? 分別新增,“,你好!”、“感謝已使用軟體”、“年”3個,再通

WPF為樹控制元件增加滾動

1、首先將treeview新增到panel中,格式大概是Panel.Children.Add(TreeView) 2、為panel設定滾動條:    在xaml介面,找到panel的定義,格式如下:  <StackPanel x:Name="Panel" Horiz

WPF 在繪圖控制元件(Shape)中新增文字 [2018.7.15]

原文: WPF 在繪圖控制元件(Shape)中新增文字 [2018.7.15] Q:使用Shape的子類Ellipse畫一個圓,如何在圓中新增文字? A:Shape類中不包含Text屬性。可使用Shape類和TextBlock類組合,放到Grid中來實現。     &n

WPF: TreeView控制元件 獲取選中的文字節點內容

          同大家一樣,在使用TreeView控制元件時,遇到了這個問題。上網也查了一些資料,但都不是太有效。經摸索問題解決了。過程說明如下: TreeView控制元件的資料採取模板,採用MVVM模式,直接繫結給資料來源。如下:           <Tre

[WPF自定義控制元件庫] 關於ScrollViewr和滾動輪劫持(scroll-wheel-hijack)

1. 什麼是滾動輪劫持 這篇文章介紹一個很簡單的繼承自ScrollViewer的控制元件: public class ExtendedScrollViewer : ScrollViewer { protected override void OnMouseWheel(MouseWheelEventAr

WPF的Image控制元件的資源切換

首先需要做一個資源類,把圖片資源放到這個類裡。 然後需要一個轉換Converter類。 public object Convert(object value, Type targetType, object parameter, System.Globalization.Cultu

WPF的Image控制元件圖片不能顯示的問題解決

在wpf窗體中,用<Image>顯示圖片,在設計器中可以顯示,但是在執行的時候卻無法顯示。 查了很多解決方法, 比如設定Copy to Output Directory為Always, 清理後重新編譯等, 均無效果. 後找到一個解決方案(原連結見文末), 指出應修改圖片檔案的Build Act

WPF自定義控制元件(一)の控制元件分類

原文: WPF自定義控制元件(一)の控制元件分類 一、什麼是控制元件(Controls)         控制元件是指對資料和方法的封裝。控制元件可以有自己的屬性和方法,其中屬性是控制元件資料的簡單訪問者,方法則是控制元件的一些簡單而可見的功能、控制元件建

WPF 曲線圖表控制元件(自制)(一)

原文: WPF 曲線圖表控制元件(自制)(一) 由於公司需要所以自寫了一個簡單的曲線圖表控制元件,在此分享。 先上一張效果圖 1.介面xaml X軸和Y軸用 2個line物件寫死在xaml上 外部用一個Grid包裹起來,然後X軸的寬度,和Y

WPF 自定義控制元件的坑(蠢的:自定義控制元件內容不顯示)

原文: WPF 自定義控制元件的坑(蠢的:自定義控制元件內容不顯示) 自定義控制元件不顯示內容 由於工作需要在寫WPF,其中想要實現一些自己的控制元件所以直接自定義了控制元件博主是繼承了ContenControl的控制元件開始寫的但是發現不管設定Content屬性為任何都是不顯示

WPF自定義控制元件(四)の自定義控制元件

原文: WPF自定義控制元件(四)の自定義控制元件 在實際工作中,WPF提供的控制元件並不能完全滿足不同的設計需求。這時,需要我們設計自定義控制元件。 這裡LZ總結一些自己的思路,特性如下: Coupling UITemplate Behaviour Function Package

WPF自定義控制元件(五)の使用者控制元件(完結)

原文: WPF自定義控制元件(五)の使用者控制元件(完結) 使用者控制元件,WPF中是繼承自UserControl的控制元件,我們可以在裡面融合我們的業務邏輯。 示例:(一個厭惡選擇的使用者控制元件) 後端: using iMicClassBase; using iMicClassBase.B

拋磚引玉 【映象控制元件WPF實現毛玻璃控制元件不要太簡單

原文: 拋磚引玉 【映象控制元件】 WPF實現毛玻璃控制元件不要太簡單 原始碼已封裝成 MirrorGrid類 可以直接在XAML裡新增 根據需要可以把Grid 改為  button border等控制元件 注意 Target必須為當前控制元件下層的控制元件物件 &nb

wpf自定義控制元件之依賴屬性

  在wpf開發過程中,總會用到格式各樣的控制元件,但是原生控制元件遠遠不能滿足實際開發的需要,這時候wpf強大之處就能體現出來了。根據實際需求自定義各種不同的控制元件滿足不同的業務需求。 首先說需求吧: 一:根據某個bool值,控制一個圓形控制元件顯示或者不顯示某種顏色。 分析: 一:需

WPF自定義控制元件拖拽到介面報錯-未將物件設定到引用的例項

WPF自定義控制元件拖拽到介面報錯-未將物件設定到引用的例項 若給自定義控制元件註冊了許多屬性,那麼在拖拽使用這個控制元件時可能會引起這個錯誤。原因是控制元件初始化時,各個屬性未被顯式賦值。 解決辦法,給控制元件向外暴漏一初始化的方法,類似於這樣 public void XX

MFC入門(三)-- MFC圖片/文字控制元件(迴圈顯示文字和圖片的小程式)

慣例附上前幾個部落格的連結: MFC入門(一)簡單配置:http://blog.csdn.net/zmdsjtu/article/details/52311107 MFC入門(二)讀取輸入字元:http://blog.csdn.net/zmdsjtu/article/details/52315088 &

WPF做報表控制元件(四)

表主體和表尾 表主體並沒有什麼難點,就是一個DataGrid,往裡面填充資料即可。表尾顯示的是一些統計資料,如平均值、最大值、最小值、累計值等。在這一部分的開發裡面,最複雜的是水平滾動條的問題。 一開始,我考慮用一個ScrollViewer把整個報表控制元件包起來。但當我填充大量資料的時候,

WPF做報表控制元件(三)

表頭 在上一節裡面,我們已經知道,表頭其實是一個Grid。那麼有兩個最需要解決的問題: (1)表頭列寬變化時,主體和表尾的列寬怎麼跟著變化。 (2)如何初始化這個複雜的表頭。 第一個問題其實並不難,在Grid每一列右側,都加入一個GridSplitter,然後新增DragDelta和

WPF做報表控制元件(二)

總體結構 首先我們看一下報表控制元件最終的效果: 我們可以把報表看成是三部分,分別是表頭,表主體和表尾。如果我們不使用WPF自帶的DataGrid,自己一根線一根線去畫的話,這個表格估計也是大工程了。所以一開始,我們就考慮使用DataGrid。但DataGrid怎麼做出如圖所示的表頭和