WPF 簡易的跑馬燈效果

最近項目上要用到跑馬燈的效果，和網上不太相同的是，網上大部分都是連續的，而咱們要求的是不連續的。

也就是是，界面上就展現4項（展現項數可變），若是有7項要展現的話，則不斷的在4個空格里左跳，固然，銜接上效果不是很好看。

而後，須要支持點擊之後進行移除掉再也不顯示的內容。

效果以下：

思路大體以下：

一、最外層用一個ViewBox，爲了能夠填充調用此控件的地方，這樣能夠方便自動拉伸

<Viewbox x:Name="viewbox_main" Height="{Binding Path=ActualHeight}" Width="{Binding Path=ActualWidth}" MouseLeave="grid_main_MouseLeave" MouseMove="grid_main_MouseMove"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stretch="Fill"/>

二、定義三個變量，一個是Count值，是爲了設定要展現的UserControl的個數的，例如默認是4個，如效果圖，固然，設置成5的話，就是5個了；一個List<Grid>是爲了放入展現控件的列表，一個List<UserControl>是用來放全部要用於跑馬燈裏的控件的。

三、設置一個Canvas，放入到最外層的Viewbox中，用於跑馬燈時候用（這也是經常使用的跑馬燈控件Canvas）

//給Canvas設置一些屬性
 canvas_board.VerticalAlignment = VerticalAlignment.Stretch;
 canvas_board.HorizontalAlignment = HorizontalAlignment.Stretch;
canvas_board.Width = this.viewbox_main.ActualWidth;
canvas_board.Height = this.viewbox_main.ActualHeight;
canvas_board.ClipToBounds = true;
//用viewbox能夠支持拉伸
this.viewbox_main.Child = canvas_board;

四、將要循環的Grid放入到Canvas裏，這裏的Grid的個數，要比展現的個數大一個，也就是Count+1個值，由於滾動的時候，實際上是在最外面有一個的，這樣保證了循環的走動。至於兩個控件之間的Margin這個就是要設置Grid的了，到時候控件是直接扔進Grid裏的

//循環將Grid加入到要展現的列表裏
for (int i = 0; i < Uc_Count + 1; i++)
{
    Grid grid = new Grid();
    grid.Width = canvas_board.Width / Uc_Count - 10;
    grid.Height = canvas_board.Height - 10;
    grid.Margin = new Thickness(5);
    this.canvas_board.Children.Add(grid);
    grid.SetValue(Canvas.TopProperty, 0.0);
    grid.SetValue(Canvas.LeftProperty, i * (grid.Width + 10));

    UcListForShow.Add(grid);
}

五、給每一個Grid增長一個動畫效果，就是向左移動的效果

for (int i = 0; i < UcListForShow.Count; i++)
{
    //設置滾動時候的效果
    DoubleAnimationUsingKeyFrames daukf_uc = new DoubleAnimationUsingKeyFrames();
    LinearDoubleKeyFrame k1_uc = new LinearDoubleKeyFrame(i * (UcListForShow[i].Width + 10), KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2)));
    LinearDoubleKeyFrame k2_uc = new LinearDoubleKeyFrame((i - 1) * (UcListForShow[i].Width + 10), KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.5)));
    daukf_uc.KeyFrames.Add(k1_uc);
    daukf_uc.KeyFrames.Add(k2_uc);
    storyboard_imgs.Children.Add(daukf_uc);
    Storyboard.SetTarget(daukf_uc, UcListForShow[i]);
    Storyboard.SetTargetProperty(daukf_uc, new PropertyPath("(Canvas.Left)"));
}

六、滾動的時候，要計算UserControl究竟是添加到了哪一個Grid裏面，也就是哪一個控件做爲了第一位。

咱們設置一個索引值scroll_index，默認的時候，scroll_index=0，這是初始的狀態，當滾動起來之後，scroll_index = scroll_index + 1 - Uc_Count;

而後，判斷，循環的時候，是不是展現列表的末尾了，若是是的話，則要填充的控件是scroll_index %UcListSum.Count（滾動索引，對總數直接取餘數），若是不是的話則是scroll_index++ % UcListSum.Count（滾動索引++，對總數直接取餘數）

scroll_index = scroll_index + 1 - Uc_Count;

for (int i = 0; i < UcListForShow.Count; i++)
{
    UcListForShow[i].SetValue(Canvas.LeftProperty, i * (UcListForShow[i].Width + 10));
    UserControl uc;
    if (i == UcListForShow.Count - 1)
    {
        uc = UcListSum[scroll_index % UcListSum.Count];
    }
    else
    {
        uc = UcListSum[scroll_index++ % UcListSum.Count];
    }
    if (uc.Parent != null)
    {
        (uc.Parent as Grid).Children.Clear();//將Usercontrol從原來的裏面移除掉，要否則會拋錯，Usercontrol已屬於另外一個控件
    }
    UcListForShow[i].Children.Clear();
    UcListForShow[i].Children.Add(uc);
    //將隱藏按鈕加入到Grid裏
    Button btn = new Button();
    btn.Style = (dictionary["hidenStyle"] as Style);//從樣式文件裏讀取到Button的樣式
    btn.Tag = UcListForShow[i].Children;//給Tag賦值，這樣方便查找
    btn.Click += Btn_Click;//註冊隱藏事件
    UcListForShow[i].Children.Add(btn);
}

代碼中，須要注意的是(uc.Parent as Grid).Children.Clear()，若是不移除的話，則會提示，已經屬於另外一個，因此，要從parent裏面移除掉。

七、Button的隱藏事件，當Button點擊之後，則要進行隱藏，其實也就是將總數裏面，減除掉再也不顯示的那一項

private void Btn_Click(object sender, RoutedEventArgs e)
{
    if ((sender as Button).Tag != null)
    {
        UcListSum.Remove((((sender as Button).Tag as UIElementCollection)[0] as UserControl));
    }
    if (UcListSum.Count == Uc_Count)//當列表數和要展現的數目相同的時候，就中止掉動畫效果
    {
        storyboard_imgs.Completed -= Storyboard_imgs_Completed;
        storyboard_imgs.Stop();
        for (int i = 0; i < Uc_Count; i++)
        {
            UcListForShow[i].Children.Clear();
            if (UcListSum[i].Parent != null)
            {
                (UcListSum[i].Parent as Grid).Children.Clear();
            }
            UcListForShow[i].Children.Add(UcListSum[i]);
        }
        return;
    }
}

全部代碼以下：

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.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace MarqueeUserControl
{
    /// <summary>
    /// MarqueeUC.xaml 的交互邏輯
    /// </summary>
    public partial class MarqueeUC : UserControl
    {
        ResourceDictionary dictionary;
        public MarqueeUC()
        {
            InitializeComponent();
            //讀取樣式文件
            dictionary = new ResourceDictionary { Source = new Uri("/MarqueeUserControl;component/MarqueeUserControlDictionary.xaml", UriKind.Relative) };
        }
        #region 屬性
        private int _uc_Count = 0;
        /// <summary>
        /// 用來展現幾個
        /// </summary>
        public int Uc_Count
        {
            get
            {
                return _uc_Count;
            }

            set
            {
                _uc_Count = value;
            }
        }

        private List<Grid> _ucListForShow = new List<Grid>();
        /// <summary>
        /// 用來展現的控件列表
        /// </summary>
        private List<Grid> UcListForShow
        {
            get
            {
                return _ucListForShow;
            }

            set
            {
                _ucListForShow = value;
            }
        }

        private List<UserControl> _ucListSum = new List<UserControl>();
        /// <summary>
        /// 要添加的控件的列表
        /// </summary>
        public List<UserControl> UcListSum
        {
            get
            {
                return _ucListSum;
            }

            set
            {
                _ucListSum = value;
            }
        }

        #endregion
        Canvas canvas_board = new Canvas();
        Storyboard storyboard_imgs = new Storyboard();
        int scroll_index = 0;//滾動索引
        double scroll_width;//滾動寬度

        void GridLayout()
        {
            if (Uc_Count == 0)//若是這個值沒有賦值的話，則默認顯示四個
            {
                Uc_Count = 4;
            }
            //給Canvas設置一些屬性
            canvas_board.VerticalAlignment = VerticalAlignment.Stretch;
            canvas_board.HorizontalAlignment = HorizontalAlignment.Stretch;
            canvas_board.Width = this.viewbox_main.ActualWidth;
            canvas_board.Height = this.viewbox_main.ActualHeight;
            canvas_board.ClipToBounds = true;
            //用viewbox能夠支持拉伸
            this.viewbox_main.Child = canvas_board;
            //循環將Grid加入到要展現的列表裏
            for (int i = 0; i < Uc_Count + 1; i++)
            {
                Grid grid = new Grid();
                grid.Width = canvas_board.Width / Uc_Count - 10;
                grid.Height = canvas_board.Height - 10;
                grid.Margin = new Thickness(5);
                this.canvas_board.Children.Add(grid);
                grid.SetValue(Canvas.TopProperty, 0.0);
                grid.SetValue(Canvas.LeftProperty, i * (grid.Width + 10));

                UcListForShow.Add(grid);
            }
        }

        void StoryLoad()
        {
            for (int i = 0; i < UcListForShow.Count; i++)
            {//設置滾動時候的效果
                DoubleAnimationUsingKeyFrames daukf_uc = new DoubleAnimationUsingKeyFrames();
                LinearDoubleKeyFrame k1_uc = new LinearDoubleKeyFrame(i * (UcListForShow[i].Width + 10), KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2)));
                LinearDoubleKeyFrame k2_uc = new LinearDoubleKeyFrame((i - 1) * (UcListForShow[i].Width + 10), KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.5)));
                daukf_uc.KeyFrames.Add(k1_uc);
                daukf_uc.KeyFrames.Add(k2_uc);
                storyboard_imgs.Children.Add(daukf_uc);
                Storyboard.SetTarget(daukf_uc, UcListForShow[i]);
                Storyboard.SetTargetProperty(daukf_uc, new PropertyPath("(Canvas.Left)"));
            }

            storyboard_imgs.FillBehavior = FillBehavior.Stop;
            storyboard_imgs.Completed += Storyboard_imgs_Completed;
            storyboard_imgs.Begin();
        }

        private void Storyboard_imgs_Completed(object sender, EventArgs e)
        {

            scroll_index = scroll_index + 1 - Uc_Count;

            for (int i = 0; i < UcListForShow.Count; i++)
            {
                UcListForShow[i].SetValue(Canvas.LeftProperty, i * (UcListForShow[i].Width + 10));
                UserControl uc;
                if (i == UcListForShow.Count - 1)
                {
                    uc = UcListSum[scroll_index % UcListSum.Count];
                }
                else
                {
                    uc = UcListSum[scroll_index++ % UcListSum.Count];
                }
                if (uc.Parent != null)
                {
                    (uc.Parent as Grid).Children.Clear();//將Usercontrol從原來的裏面移除掉，要否則會拋錯，Usercontrol已屬於另外一個控件
                }
                UcListForShow[i].Children.Clear();
                UcListForShow[i].Children.Add(uc);
                //將隱藏按鈕加入到Grid裏
                Button btn = new Button();
                btn.Style = (dictionary["hidenStyle"] as Style);//從樣式文件裏讀取到Button的樣式
                btn.Tag = UcListForShow[i].Children;//給Tag賦值，這樣方便查找
                btn.Click += Btn_Click;//註冊隱藏事件
                UcListForShow[i].Children.Add(btn);
            }

            storyboard_imgs.Begin();
        }

        private void Btn_Click(object sender, RoutedEventArgs e)
        {
            if ((sender as Button).Tag != null)
            {
                UcListSum.Remove((((sender as Button).Tag as UIElementCollection)[0] as UserControl));
            }
            if (UcListSum.Count == Uc_Count)//當列表數和要展現的數目相同的時候，就中止掉動畫效果
            {
                storyboard_imgs.Completed -= Storyboard_imgs_Completed;
                storyboard_imgs.Stop();
                for (int i = 0; i < Uc_Count; i++)
                {
                    UcListForShow[i].Children.Clear();
                    if (UcListSum[i].Parent != null)
                    {
                        (UcListSum[i].Parent as Grid).Children.Clear();
                    }
                    UcListForShow[i].Children.Add(UcListSum[i]);
                }
                return;
            }
        }

        public void StartMar()
        {
            GridLayout();

            scroll_width = this.canvas_board.Width;

            for (int i = 0; i < UcListForShow.Count; i++)
            {
                UserControl uc;
                if (i == UcListForShow.Count - 1)
                {
                    uc = UcListSum[scroll_index % UcListSum.Count];
                }
                else
                {
                    uc = UcListSum[scroll_index++ % UcListSum.Count];
                }
                if (uc.Parent != null)
                {
                    (uc.Parent as Grid).Children.Clear();
                }
                UcListForShow[i].Children.Clear();
                UcListForShow[i].Children.Add(uc);
            }
            StoryLoad();
        }

        private void grid_main_MouseLeave(object sender, MouseEventArgs e)
        {
            if (storyboard_imgs.GetCurrentState() == ClockState.Stopped)//若是是中止的狀態，則直接返回，再也不起做用
            {
                return;
            }
            if (storyboard_imgs.GetIsPaused() == true)//若是是暫停狀態的話，則開始
            {
                storyboard_imgs.Begin();
            }
        }

        private void grid_main_MouseMove(object sender, MouseEventArgs e)
        {
            if (storyboard_imgs.GetIsPaused() == false)
            {
                storyboard_imgs.Pause();
            }
        }
    }
}

MarqueeUC

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:MarqueeUserControl">
    <Style TargetType="Button" x:Key="hidenStyle">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="Width" Value="25"/>
        <Setter Property="Height" Value="25"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Template"><!--把Image放到Template裏做爲Content顯示，若是是單獨給Content設置圖片的話，則只有一個按鈕顯示圖片，其餘的不顯示-->
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border>
                        <Image Source="hiden.png"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

MarqueeUserControlDictionary

 

沒有解決的問題

想給Button增長鼠標懸停的時候，顯示，移除的時候隱藏，可是發現很差使，緣由是當MouseOver上去的時候，雖然Visibility的值變了，可是隻有到下一次的時候，Button的值才被附上，而此時，已經MouseLeave了，請哪位大神指導一下，看看這個顯示和隱藏怎麼作。