本文将建立一個wpf項目中運用Storyboard描述出一個跑馬燈效果的簡單執行個體,以下是詳細步驟:
建立一個wpf項目,添加示範用圖檔,修改圖檔屬性為"如果較新則複制"。
在MainWindow.xaml中,為系統自動建立的Grid容器命名,這樣可以在背景操作的到它。
<Window x:Class="WpfRollPic.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded">
<Grid Name="grid_main"></Grid>
</Window>
在背景代碼中,添加窗體布局。
public MainWindow()
{
InitializeComponent();
this.GridLayout();
}
Canvas canvas_board = new Canvas();
Image image1 = new Image();
Image image2 = new Image();
void GridLayout()
{
this.WindowStartupLocation = WindowStartupLocation.CenterScreen;
this.Width = 300;
this.Height = 300;
canvas_board.VerticalAlignment = VerticalAlignment.Top;
canvas_board.HorizontalAlignment = HorizontalAlignment.Left;
canvas_board.Margin = new Thickness(10, 10, 0, 0);
canvas_board.Width = 200;
canvas_board.Height = 200;
//canvas_board.Background = new SolidColorBrush(Colors.LightBlue);
canvas_board.ClipToBounds = true;
this.grid_main.Children.Add(canvas_board);
image1.Stretch = Stretch.Fill;
image1.Width = 200;
image1.Height = 200;
this.canvas_board.Children.Add(image1);
image1.SetValue(Canvas.TopProperty, 0.0);
image1.SetValue(Canvas.LeftProperty, 0.0);
image2.Stretch = Stretch.Fill;
image2.Width = 200;
image2.Height = 200;
this.canvas_board.Children.Add(image2);
image2.SetValue(Canvas.TopProperty, 200.0);
image2.SetValue(Canvas.LeftProperty, 0.0);
}
注意這裡需要設定Canvas控件的ClipToBounds屬性為true,這樣Canvas将不再顯示出超出自己範圍以外的内容。同時使用到了SetValue方法來設定Image控件的Canvas.Top/Canvas.Left屬性。
添加初始化函數,代碼如下:
List<BitmapImage> ls_images = new List<BitmapImage>(); //存放圖檔組
int n_index = 0; //滾動索引
double n_height; //滾動高度
private void Window_Loaded(object sender, RoutedEventArgs e)
{
string[] img_files = Directory.GetFiles(string.Format("{0}/Images", AppDomain.CurrentDomain.SetupInformation.ApplicationBase), "*.png");
foreach (string img_path in img_files)
{
ls_images.Add(new BitmapImage(new Uri(img_path, UriKind.Absolute)));
}
n_height = this.canvas_board.Height;
this.image1.Source = ls_images[n_index++ % ls_images.Count];
this.image2.Source = ls_images[n_index % ls_images.Count];
this.StoryLoad();
}
這裡完成了一些圖檔素材的初始化,下面還需要完成故事闆StoryLoad初始化事件:
Storyboard storyboard_imgs = new Storyboard();
void StoryLoad()
{
DoubleAnimationUsingKeyFrames daukf_img1 = new DoubleAnimationUsingKeyFrames();
LinearDoubleKeyFrame k1_img1 = new LinearDoubleKeyFrame(0.0, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2)));
LinearDoubleKeyFrame k2_img1 = new LinearDoubleKeyFrame(-n_height, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4)));
daukf_img1.KeyFrames.Add(k1_img1);
daukf_img1.KeyFrames.Add(k2_img1);
storyboard_imgs.Children.Add(daukf_img1);
Storyboard.SetTarget(daukf_img1, image1);
Storyboard.SetTargetProperty(daukf_img1, new PropertyPath("(Canvas.Top)"));
DoubleAnimationUsingKeyFrames daukf_img2 = new DoubleAnimationUsingKeyFrames();
LinearDoubleKeyFrame k1_img2 = new LinearDoubleKeyFrame(n_height, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2)));
LinearDoubleKeyFrame k2_img2 = new LinearDoubleKeyFrame(0.0, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4)));
daukf_img2.KeyFrames.Add(k1_img2);
daukf_img2.KeyFrames.Add(k2_img2);
storyboard_imgs.Children.Add(daukf_img2);
Storyboard.SetTarget(daukf_img2, image2);
Storyboard.SetTargetProperty(daukf_img2, new PropertyPath("(Canvas.Top)"));
storyboard_imgs.FillBehavior = FillBehavior.Stop;
storyboard_imgs.Completed += new EventHandler(storyboard_imgs_Completed);
storyboard_imgs.Begin();
}
注意到添加了關鍵幀,
關鍵幀1:實作跑馬燈圖檔停頓的效果,可以按照需求設定關鍵幀的時長就是停頓的時長;
關鍵幀2:實作跑馬燈的滾動效果,可以設定關鍵幀的時長就是滾動一次所需時間;
注意到這裡必須設定故事闆storyboard_imgs的FillBehavior屬性為Stop,這樣在一個故事結束後,所有與故事相關聯的屬性将可以回到初始狀态。
下面完成故事闆storyboard_imgs的完成Completed事件,代碼如下:
void storyboard_imgs_Completed(object sender, EventArgs e)
{
image1.SetValue(Canvas.TopProperty, 0.0);
image2.SetValue(Canvas.TopProperty, n_height);
image1.Source = ls_images[n_index++ % ls_images.Count];
image2.Source = ls_images[n_index % ls_images.Count];
storyboard_imgs.Begin();
}
Completed事件中,更改了image1和image2的圖檔,這樣看起來,改變圖檔和位置的image1就好像變成了之前的image2,進而達到跑馬燈的效果。
重新生成項目,F5運作,效果如下:
轉載于:https://www.cnblogs.com/xwlyun/archive/2012/03/09/2387815.html