用Silverlight2整整一年了,上个星期公司全面转去Silverlight3,作为纪念就把用SL2写的最后一个东西发出来吧。效果如下:
只是一个很简单的程序,甚至懒得写到Generic.xaml中,直接使用UserControl。而用ListBox做也是为了图方便,ListBox中GetContainerForItemOverride()方法能很方便地将Object转换成DependencyObject.不必要修改ListBox,只需要给它一个样式即可.
代码语言:javascript复制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,代碼就不貼出了,下面有下載(動畫效果寫得比較簡單,見笑了)。
完成後的調用方法比較簡單:
代码语言:javascript复制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>
代码语言:javascript复制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 lilies.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 hills.jpg" };
13 list.Add(obj);
14 sliderControl.ItemsSource = list;
15 }
OK,完成了。
源代碼
PS:其实不一定要用ListBox,用ItemsControl就可以了,之所以選用ListBox是因為我貪圖ListBox一次只選中一個的特性。