首先定义一个UC_Pic.xaml的文件
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="RunLight.UC_Pic"
d:DesignWidth="640" d:DesignHeight="480">
<Canvas x:Name="LayoutRoot" Background="Red" Height="240">
<Image x:Name="photo" Width="320" Height="240" Stretch="UniformToFill" Margin="10"></Image>
</Canvas>
</UserControl>
UC_Pic.xaml.cs文件内容如下:
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Media.Imaging;
namespace RunLight
{
public partial class UC_Pic : UserControl
{
public UC_Pic()
{
// Required to initialize variables
InitializeComponent();
}
//定义一个图片的url属性
private string _imageUrl;
public string ImageUrl
{
get{return this._imageUrl;}
set
{
this._imageUrl = value;
Uri uri = new Uri(value,UriKind.Relative);
BitmapImage bitmap = new BitmapImage(uri);
this.photo.Source = bitmap;
}
}
}
}
然后是在MainPage.xaml文件中定义
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="RunLight.MainPage" SizeChanged="UserControl_SizeChanged">
<Grid x:Name="LayoutRoot">
<Grid.Background >
<ImageBrush ImageSource="Expo.jpg"></ImageBrush>
</Grid.Background>
<Canvas x:Name="canvas" Background="Black" Height="280">
<Canvas.Clip>
<RectangleGeometry x:Name="rg"></RectangleGeometry>
</Canvas.Clip>
<StackPanel x:Name="SP" Orientation="Horizontal"></StackPanel>
</Canvas>
<Image x:Name="FullImage" Width="640" Height="480" Visibility="Collapsed" MouseLeftButtonUp="FullImage_MouseLeftButtonUp"></Image>
</Grid>
</UserControl>
MainPage.xaml.cs文件内容如下:
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace RunLight
{
public partial class MainPage : UserControl
{
//定义一个故事版变量
private Storyboard sby;
//图片的宽度
private const double photoWidth = 240;
//滚动图片的总宽度
private double totalWidth;
public MainPage()
{
InitializeComponent();
CreatePhoto();
}
private void CreatePhoto()
{
string[] photoList = new string[]{"a1.jpg","a2.jpg","a4.jpg","a5.jpg","a6.jpg","a7.jpg","a8.jpg","a9.jpg","a10.jpg"};
for(int i=0;i<3;i++)
{
for(int j=0;j<photoList.Length;j++)
{
UC_Pic pic = new UC_Pic();
pic.Width = photoWidth;
pic.ImageUrl = "Photos/"+photoList[j];
pic.MouseEnter+=new System.Windows.Input.MouseEventHandler(pic_MouseEnter);
pic.MouseLeave+=new System.Windows.Input.MouseEventHandler(pic_MouseLeave);
pic.MouseLeftButtonUp+=new System.Windows.Input.MouseButtonEventHandler(pic_MouseLeftButtonUp);
SP.Children.Add(pic);
}
}
//图片总宽度
totalWidth = -1.0 * photoWidth * photoList.Length;
//设置Canvas的Left属性值
Canvas.SetLeft(SP,totalWidth);
//创建故事板
CreateStoryboard();
sby.Begin();
//重置大小
Resize();
}
//创建故事板
private void CreateStoryboard()
{
//创建故事板
sby = new Storyboard();
//创建DoubleAnimation动画
DoubleAnimation ad = new DoubleAnimation();
//设置动画的时间
ad.Duration = new Duration(TimeSpan.FromSeconds(5.0));
//设置作用对象的属性
Storyboard.SetTarget(ad,SP);
Storyboard.SetTargetProperty(ad,new PropertyPath("(canvas.left)",new Object[0]));
//将动画添加到故事板中去
sby.Children.Add(ad);
//创建动画结束事件
sby.Completed+=new System.EventHandler(sby_Completed);
}
private void FullImage_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
//图片由放大再缩小至指定大小值
FullImage.Visibility = Visibility.Collapsed;
}
private void pic_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
{
//图片暂时停止
sby.Pause();
}
private void pic_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)
{
//图片滚动继续
sby.Resume();
}
private void pic_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
//显示放大图片
UC_Pic pic = sender as UC_Pic;
FullImage.Source = pic.photo.Source;
FullImage.Visibility = Visibility.Visible;
}
private void Resize()
{
rg.Rect = new Rect(0,0,this.ActualWidth,260);
}
private void UserControl_SizeChanged(object sender, System.Windows.SizeChangedEventArgs e)
{
// 改变尺寸
Resize();
}
private void sby_Completed(object sender, System.EventArgs e)
{
// TODO: Add event handler implementation here.
DoubleAnimation ad = (DoubleAnimation)sby.Children[0];
//获取图片组的当前位置
double left = Canvas.GetLeft(SP);
//如果图片已经接近最后,则重新设置开始位置
if(left>(totalWidth-photoWidth))
{
ad.From = new double?(left);
}
//设置结束位置
ad.By = new double?(totalWidth);
//开始循环动画
sby.Begin();
}
}
}