最近項目上要用到跑馬燈的效果,和網上不太相同的是,網上大部分都是連續的,而我們要求的是不連續的。
也就是是,界面上就展示4項(展示項數可變),如果有7項要展示的話,則不斷的在4個空格裡左跳,當然,銜接上效果不是很好看。
然後,需要支援點選以後進行移除掉不再顯示的内容。
效果如下:
思路大緻如下:
1、最外層用一個ViewBox,為了可以填充調用此控件的地方,這樣可以友善自動拉伸
2、定義三個變量,一個是Count值,是為了設定要展示的UserControl的個數的,例如預設是4個,如效果圖,當然,設定成5的話,就是5個了;一個List是為了放入展示控件的清單,一個List是用來放所有要用于跑馬燈裡的控件的。
3、設定一個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;
4、将要循環的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);
}
5、給每個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)"));
}
6、滾動的時候,要計算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裡面移除掉。
7、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
{
///
/// MarqueeUC.xaml 的互動邏輯
///
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;
///
/// 用來展示幾個
///
public int Uc_Count
{
get
{
return _uc_Count;
}
set
{
_uc_Count = value;
}
}
private List _ucListForShow = new List();
///
/// 用來展示的控件清單
///
private List UcListForShow
{
get
{
return _ucListForShow;
}
set
{
_ucListForShow = value;
}
}
private List _ucListSum = new List();
///
/// 要添加的控件的清單
///
public List 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();
}
}
}
}
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MarqueeUserControl">
沒有解決的問題
想給Button增加滑鼠懸停的時候,顯示,移除的時候隐藏,但是發現不好使,原因是當MouseOver上去的時候,雖然Visibility的值變了,但是隻有到下一次的時候,Button的值才被附上,而此時,已經MouseLeave了,請哪位大神指導一下,看看這個顯示和隐藏怎麼做。
以上就是本文的全部内容,希望對大家的學習有所幫助,也希望大家多多支援腳本之家。