silverlight图片轮播实现？

[紫色天空PS]

最近在学习silverlight2.0，目前遇到一些麻烦，需要实现 图片水平轮播的效果，
要实现效果如： http://www.allenkuo.com/sl2/scrollImagesH/default.htm
请问有谁做过吗？能提供点思路吗？在此先谢谢大家了！

[jv9]

这样效果不算很难,你可以按照这样来做.

Page.xaml

<UserControl x:Class="SilverlightApplication4.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Width="400" Height="300" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid x:Name="root" Width="400" Height="300" Background="Blue">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" Grid.Row="0">
</StackPanel>
<TextBlock Grid.Row="1" x:Name="lbl" />
<Canvas x:Name="LayoutRoot" Grid.Row="2" Background="Gray" Height="160">
<Canvas.Clip>
<RectangleGeometry Rect="0,0,360,160" />
</Canvas.Clip>
<StackPanel x:Name="pics" Orientation="Horizontal" />
</Canvas>
</Grid>
</UserControl>

---------------------
Page.xaml.cs

private void initForm()
{
string[] strArray = new string[] { "1.jpg", "2.jpg", "4.jpg", "5.jpg" };
for (int i = 0; i < 3; i++)
{
for (int j = 0; j < strArray.Length; j++)
{
pic pic = new pic {
ImageUrl = "images/" + strArray[j]
};
pic.set_Width(110.0);
this.pics.get_Children().Add(pic);
}
}
this.unitLength = 110.0 * strArray.Length;
this.lbl.set_Text("Ò»·ÝµÄéL¶ÈÊÇ" + this.unitLength);
Canvas.SetLeft(this.pics, -1.0 * this.unitLength);
this.initStoryboard();
this.sb.Begin();
}


private void initStoryboard()
{
this.sb = new Storyboard();
DoubleAnimation animation = new DoubleAnimation();
animation.set_By(new double?(this.direction * 110.0));
Duration duration = new Duration(TimeSpan.FromSeconds(2.0));
animation.set_Duration(duration);
Storyboard.SetTarget(animation, this.pics);
Storyboard.SetTargetProperty(animation, new PropertyPath("(Canvas.Left)", new object[0]));
this.sb.get_Children().Add(animation);
this.sb.add_Completed(new EventHandler(this, this.sb_Completed));
}

private void sb_Completed(object sender, EventArgs e)
{
DoubleAnimation animation = (DoubleAnimation) this.sb.get_Children().get_Item(0);
double left = Canvas.GetLeft(this.pics);
this.lbl.set_Text("current left=" + left);
if ((-1.0 * left) < (2.0 * this.unitLength))
{
this.direction = -1.0;
animation.set_From(new double?(left));
animation.set_By(new double?(this.direction * Math.Min(220.0 - left, 110.0)));
}
else
{
animation.set_From(new double?(-1.0 * this.unitLength));
animation.set_By(new double?(this.direction * 110.0));
}
this.sb.Begin();
}

=====================

Pic.xaml

<UserControl x:Class="SilverlightApplication4.pic" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Width="110" Height="160" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas x:Name="LayoutRoot" Background="red">
<Image x:Name="photo" Width="100" Height="145" Margin="5,7,5,8" />
</Canvas>
</UserControl>

===================
Pic.xaml.cs

public class pic : UserControl
{
// Fields
private bool _contentLoaded;
private string _ImageUrl;
internal Canvas LayoutRoot;
internal Image photo;

// Methods
public pic()
{
this.InitializeComponent();
}


// Properties
public string ImageUrl
{
get
{
return this._ImageUrl;
}
set
{
this._ImageUrl = value;
Uri uri = new Uri(value, 2);
BitmapImage image = new BitmapImage(uri);
this.photo.set_Source(image);
}
}
}

这样就可以现实了.