[Silverlight]用ListBox实现SlideShow
[Silverlight]用ListBox实现SlideShow
dino.c
发布于 2019-01-18 11:00:25
发布于 2019-01-18 11:00:25
文章被收录于专栏：dino.c的专栏
用Silverlight2整整一年了，上个星期公司全面转去Silverlight3，作为纪念就把用SL2写的最后一个东西发出来吧。效果如下：
只是一个很简单的程序，甚至懒得写到Generic.xaml中，直接使用UserControl。而用ListBox做也是为了图方便，ListBox中GetContainerForItemOverride()方法能很方便地将Object转换成DependencyObject.不必要修改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，代碼就不貼出了，下面有下載（動畫效果寫得比較簡單，見笑了）。
完成後的調用方法比較簡單：
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>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一次只選中一個的特性。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2009-08-26 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
