[Silverlight]用ListBox实现SlideShow

用Silverlight2整整一年了，上个星期公司全面转去Silverlight3，作为纪念就把用SL2写的最后一个东西发出来吧。效果如下：


只是一个很简单的程序，甚至懒得写到Generic.xaml中，直接使用UserControl。而用ListBox做也是为了图方便，ListBox中GetContainerForItemOverride()方法能很方便地将Object转换成DependencyObject.不必要修改ListBox,只需要给它一个样式即可.

ListBox样式
 1        <Style TargetType="ListBox" x:Key="ListBoxStyle">
 2            <Setter Property="Template">
 3                <Setter.Value>
 4                    <ControlTemplate TargetType="ListBox">
 5                        <Border Loaded="OnBorderLoaded">
 6                            <Border.Resources>
 7                                <Storyboard x:Key="StoryBoardCenter" Duration="0:0:0.5">
 8                                    <DoubleAnimationUsingKeyFrames  Duration="0:0:0.5" Storyboard.TargetName="ItemsPresenter" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)">
 9                                        <SplineDoubleKeyFrame  KeySpline="0.1,0.6,0.6,1"  Value="1"/>
10                                    </DoubleAnimationUsingKeyFrames>
11                                </Storyboard>
12                            </Border.Resources>
13                            <ScrollViewer x:Name="ScrollViewer" Padding="0" 
14                                              HorizontalScrollBarVisibility="Hidden"
15                                              VerticalScrollBarVisibility="Hidden"
16                          BorderThickness="0">
17                                <ItemsPresenter x:Name="ItemsPresenter">
18                                    <ItemsPresenter.RenderTransform>
19                                        <TransformGroup>
20                                            <TranslateTransform  X="0"/>
21                                        </TransformGroup>
22                                    </ItemsPresenter.RenderTransform>
23                                </ItemsPresenter>
24                            </ScrollViewer>
25                        </Border>
26                    </ControlTemplate>
27                </Setter.Value>
28            </Setter>
29            <Setter Property="ItemsPanel">
30                <Setter.Value>
31                    <ItemsPanelTemplate>
32                        <StackPanel Orientation="Horizontal"/>
33                    </ItemsPanelTemplate>
34                </Setter.Value>
35            </Setter>
36        </Style>
37
38
39
40     <Style TargetType="ListBoxItem" x:Key="ListBoxItemStyle">
41            <Setter Property="Template">
42                <Setter.Value>
43                    <ControlTemplate TargetType="ListBoxItem">
44                        <Grid  Loaded="OnGridLoaded">
45                            <Border  >
46                                <Grid>
47                                    <ContentPresenter    x:Name="contentPresenter"
48            Content="{TemplateBinding Content}"
49            ContentTemplate="{TemplateBinding ContentTemplate}"
50           />
51
52
53                                </Grid>
54                            </Border>
55                        </Grid>
56
57                    </ControlTemplate>
58                </Setter.Value>
59            </Setter>
60        </Style>

之後只要想方法觸發StoryBoardCenter這個StoryBoard了，當然還需要修改它的Value，代碼就不貼出了，下面有下載（動畫效果寫得比較簡單，見笑了）。
完成後的調用方法比較簡單：

XMAL
1    <Grid x:Name="LayoutRoot">
2        <local:SliderControl   x:Name="sliderControl">
3            <local:SliderControl.ItemTemplate>
4                <DataTemplate>
5                    <Image Source="{Binding Source}"  Stretch="UniformToFill"/>
6                </DataTemplate>
7            </local:SliderControl.ItemTemplate>
8        </local:SliderControl>
9    </Grid>

C#
 1  public MainPage()
 2        {
 3            InitializeComponent();
 4
 5            List<AdObject> list = new List<AdObject>();
 6            AdObject obj = new AdObject { Source = "http://www.asp.net/AJAX/AjaxControlToolkit/Samples/SlideShow/images/Water%20lilies.jpg" };
 7            list.Add(obj);
 8             obj = new AdObject { Source = "http://www.asp.net/AJAX/AjaxControlToolkit/Samples/SlideShow/images/Sunset.jpg" };
 9            list.Add(obj);
10             obj = new AdObject { Source = "http://www.asp.net/AJAX/AjaxControlToolkit/Samples/SlideShow/images/Winter.jpg" };
11            list.Add(obj);
12             obj = new AdObject { Source = "http://www.asp.net/AJAX/AjaxControlToolkit/Samples/SlideShow/images/Blue%20hills.jpg" };
13            list.Add(obj);
14            sliderControl.ItemsSource = list;
15        }

OK,完成了。
源代碼

PS:其实不一定要用ListBox,用ItemsControl就可以了，之所以選用ListBox是因為我貪圖ListBox一次只選中一個的特性。