在网上找了一会儿也没找到我想要的效果，还是自己动手，丰衣足食吧。
需求：当前面板中只显示一张图片，图片栏的下部有用来显示当前图片处于图片队列中的位置的圆球，并且点击下部栏内的圆球可以快速切换，附动画缓动效果。
比较简单，但是还是简单说一下开发的思路吧。
主要是要有一个容器放置很多张图片，然后让它们排列好，增加鼠标事件以达到左右滑动的效果，要关联外部控件控制图片的位置，那么就要有一个依赖属性来控制。
首先，我们来一个Canvas，然后要让里面的子项排列好，不然它们就堆在一起了。（艾玛，你说为啥不用StackPanel呢？）
#region 绘制窗口
//分配容器的大小
protected override Size MeasureOverride(Size constraint)
{
Size size = new Size(_width, _height);
foreach (UIElement e in InternalChildren)
{
e.Measure(new Size(_width, _height));
}
return size;
}
//分配子项的大小
protected override Size ArrangeOverride(Size arrangeSize)
{
for (int i = ; i < InternalChildren.Count; i++)
{
InternalChildren[i].Arrange(new Rect(i * _width, , _width, _height));
}
return arrangeSize;
}
#endregion
绘制窗口
然后为Canvas加上鼠标事件用来滑动，其实这个很简单的，就是鼠标摁下去的点和起来的点的一个距离判断，如果距离够了，就移动一个子项的距离，至于左右就要看你自己怎么设置了，这里也是为什么不用StackPanel的原因了，
因为这边Canvas我绘制的窗口之中，我会去设置子项的大小，然后根据子项的大小来实现滑动及统一，这样比较方便。
void CanvasWithPhoto_MouseUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
_endPoint = e.GetPosition(App.Current.MainWindow); //X轴滑动的距离
double offsetX = _startPoint.X - _endPoint.X;
if (offsetX > && Index < _totalPage)
{
++Index;
}
else if (offsetX < - && Index > )
{
--Index;
} Move(Index);
} //X轴的移动动画
private void Move(int Index)
{
DoubleAnimation animation = new DoubleAnimation(-(Index - ) * _width, TimeSpan.FromMilliseconds());
animation.DecelerationRatio = 0.2;
animation.AccelerationRatio = 0.2;
_translate.BeginAnimation(TranslateTransform.XProperty, animation);
} void CanvasWithPhoto_MouseDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
_startPoint = e.GetPosition(App.Current.MainWindow);
}
鼠标事件
艾玛，这里就有人说了那Index是什么啊，这里就是当前页面了，因为需求里面是想快速定位到图片的，第三张跳到第七张这个样子的，所以用了一个Index，这个就是依赖属性，而且添加了一个自定义的事件，留出一个接口方便以后使用，其实这个程序里面我也没有用上，纯粹就是习惯。
//当前页
public int Index
{
get { return (int)GetValue(IndexProperty); }
set { SetValue(IndexProperty, value); }
} public static readonly DependencyProperty IndexProperty =
DependencyProperty.Register("Index", typeof(int), typeof(CanvasWithPhoto), new FrameworkPropertyMetadata(, new PropertyChangedCallback(OniIndexChanged)));
public static void OniIndexChanged(DependencyObject sender,DependencyPropertyChangedEventArgs e)
{
CanvasWithPhoto c = (CanvasWithPhoto)sender;
int newValue = (int)e.NewValue;
int oldValue = (int)e.OldValue;
c.Index = (int)e.NewValue;
c.OnIndexChanged(oldValue, newValue);
}
private void OnIndexChanged(int oldValue, int newValue)
{
RoutedPropertyChangedEventArgs<int> args
= new RoutedPropertyChangedEventArgs<int>(oldValue, newValue);
args.RoutedEvent = IndexChangedEvent;
RaiseEvent(args);
Move(newValue);
}
public static RoutedEvent IndexChangedEvent =
EventManager.RegisterRoutedEvent("IndexChanged", RoutingStrategy.Bubble, typeof(RoutedPropertyChangedEventHandler<int>), typeof(CanvasWithPhoto));
public event RoutedPropertyChangedEventHandler<int> IndexChanged
{
add { AddHandler(IndexChangedEvent, value); }
remove { RemoveHandler(IndexChangedEvent, value); }
}
依赖属性
最后，自定义的CanvasWithImage是不会限制长度的，这样就会有一个图片会全部显示出来的问题，这里我是用一个StackPanel包裹住，这个StackPanel是有一个宽度限制的，ClipToBounds="True"，设置这个属性，会讲超出部分的内容裁减隐藏。
简陋的效果图：
软件环境：VisualStudio2010 + Windows 7
http://download.csdn.net/detail/qq278709708/9150335
不足的地方大家多多指教