Silverlight之ListBox/Style学习笔记--ListBox版的图片轮换广告

时间:2022-04-23
本文章向大家介绍Silverlight之ListBox/Style学习笔记--ListBox版的图片轮换广告,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

ListBox是一个很有用的控件,其功能直逼Asp.Net中的Repeater,它能实现自定义数据项模板,纵向/横向排列Item(如果扩展一下实现自行折行,几乎就是SL版的Repeater了--实际上WrapPanel已经实现了,不过没有默认集成在SL3中). 

这里推荐一个老外的文章 http://blogs.msdn.com/delay/archive/2008/03/05/lb-sv-faq-examples-notes-tips-and-more-for-silverlight-2-beta-1-s-listbox-and-scrollviewer-controls.aspx 基本上ListBox的各种用法和注意点都在里面了(E文的,只看代码就行了) 

另外关于Style,这个东西刚开始学习时,还以为自己能靠死记硬背掌握绝大多数控件的模板,后来发现这是徒劳!每个控件的默认样式/模板,都有N长,全凭记忆不太现实,我的经验是如果需要定义某一个控件的样式,直接用Blend先编辑副本,得到完整的"样本",然后在此基础上做些修改或删减,这样更可行。

Xaml中的资源是个很庞大的概念:样式,模板,动画,触发器,甚至数据集(引用)...都可以称之为Resource.这一点与web开发中的css完全不同。

在学习Style的过程中,经常会遇到另外一个概念:模板(Template),初期经常被他们搞混淆,其实这二者有明显的区别:Style影响外观,而Template影响内容,它们之间通过绑定联系起来(它们之间的联系也可以这样理解:如果不进行数据绑定,即使定义了模板,最终也不会有内容,既然连内容都没有了,所以也谈不上外观--即所谓的数据驱动UI)

这里举一个ListBox的例子:

Xaml

<UserControl
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    x:Class="ListBoxSilde.UserControl1">
 <UserControl.Resources>
 <!--整体样式-->
 <Style x:Key="ListStyle" TargetType="ListBox">
 <Setter Property="Padding" Value="1"/>
 <Setter Property="Margin" Value="0"/>
 <Setter Property="BorderThickness" Value="0"/>
 <Setter Property="Background" Value="{x:Null}"/>
 </Style>

 <!--排列布局(横向)-->
 <ItemsPanelTemplate x:Key="HorizontalItemPanel">
 <StackPanel Orientation="Horizontal"/>
 </ItemsPanelTemplate>

 <!--数据项模板(内容)-->
 <DataTemplate x:Key="DataTemplate">
 <TextBlock Text="{Binding Index}" Padding="0" Margin="2"></TextBlock>
 </DataTemplate>

 <!--数据项样式(外观)-->
 <Style x:Key="ItemStyle" TargetType="ListBoxItem">
 <Setter Property="Template">
 <Setter.Value>
 <ControlTemplate>
 <Grid Cursor="Hand">
 <VisualStateManager.VisualStateGroups>
 <VisualStateGroup x:Name="SelectionStates">
 <VisualState x:Name="Unselected"/>
 <VisualState x:Name="Selected">
 <Storyboard>
 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="fillColor2" Storyboard.TargetProperty="Opacity">
 <SplineDoubleKeyFrame KeyTime="0" Value="0.75"/>
 </DoubleAnimationUsingKeyFrames>
 </Storyboard>
 </VisualState>
 </VisualStateGroup>
 </VisualStateManager.VisualStateGroups>
 <Rectangle Fill="#99FFFFFF" IsHitTestVisible="False" Margin="1"/>
 <Rectangle x:Name="fillColor2" Fill="#FFBADDE9" RadiusX="0" RadiusY="0" IsHitTestVisible="False" Opacity="0" Margin="1"/>
 <ContentPresenter x:Name="contentPresenter" Content="{TemplateBinding Content}" Margin="2"/>
 </Grid>
 </ControlTemplate>
 </Setter.Value>
 </Setter>
 </Style>

 </UserControl.Resources>

 <StackPanel Background="DarkBlue">
 <ListBox x:Name="lst" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource ListStyle}" ItemsPanel="{StaticResource HorizontalItemPanel}" ItemTemplate="{StaticResource DataTemplate}" ItemContainerStyle="{StaticResource ItemStyle}">
 </ListBox>
 </StackPanel>
</UserControl>

这段代码中,ListBox本身空空如也(除了几个样式和模板的应用),最终的呈现内容和外观,全部在UserControl.Resource中定义了,运行后界面肯定是空的,因为没有数据绑定,我们给它加上后端代码:

Xaml.cs

using System.Windows.Controls;
using System.Reflection;
using System.Collections.Generic;

namespace ListBoxSilde
{
 public partial class UserControl1 : UserControl
    {
        Test t;

 public UserControl1()
        {            
            InitializeComponent();

            List<Test> lst = new List<Test>(){
 new Test(){ Index="1"},
 new Test(){ Index="2"},
 new Test(){ Index="3"},
 new Test(){ Index="4"},
 new Test(){ Index="5"}
            };

 this.lst.ItemsSource = lst;
        }
    }

 public class Test { public string Index { set; get; } }     
}

运行后的样子类似这样:

下面这个效果是很多网站都有的图片广告轮换,当然实现办法有N多,这里我用Style结合ListBox弄了一个: 

大致思路:用style定义ListBox的ItemsPanel,把默认纵向排列改成横向排列,然后结合Clip属性设置可视区(蒙板),让其左右移动即可。

xaml代码:

代码

<UserControl
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d"  x:Class="ListBoxSilde.MainPage"
    d:DesignWidth="640" d:DesignHeight="480">

 <UserControl.Resources>

 <!--整体样式-->
 <Style x:Key="ListStyle" TargetType="ListBox">
 <Setter Property="Padding" Value="1"/>
 <Setter Property="Margin" Value="0"/>
 <Setter Property="BorderThickness" Value="0"/>
 <Setter Property="Background" Value="{x:Null}"/>
 </Style>

 <!--排列布局(横向)-->
 <ItemsPanelTemplate x:Key="HorizontalItemPanel">
 <StackPanel Orientation="Horizontal"/>
 </ItemsPanelTemplate>

 <!--导航区-数据项模板(内容)-->
 <DataTemplate x:Key="NavDataTemplate">
 <StackPanel MouseLeftButtonDown="NavItemClick" Background="#00000000">
 <TextBlock Text="{Binding Index}" Padding="0" Margin="2,0"></TextBlock>
 </StackPanel>
 </DataTemplate>

 <!--导航区-数据项样式(外观)-->
 <Style x:Key="NavItemStyle" TargetType="ListBoxItem">
 <Setter Property="Template">
 <Setter.Value>
 <ControlTemplate>
 <Grid Cursor="Hand">
 <VisualStateManager.VisualStateGroups>
 <VisualStateGroup x:Name="SelectionStates">
 <VisualState x:Name="Unselected"/>
 <VisualState x:Name="Selected">
 <Storyboard>
 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="fillColor2" Storyboard.TargetProperty="Opacity">
 <SplineDoubleKeyFrame KeyTime="0" Value="0.85"/>
 </DoubleAnimationUsingKeyFrames>
 </Storyboard>
 </VisualState>
 </VisualStateGroup>
 </VisualStateManager.VisualStateGroups>
 <Rectangle Fill="#99FFFFFF" IsHitTestVisible="False" Margin="1"/>
 <Rectangle x:Name="fillColor2" Fill="#FFBADDE9" RadiusX="0" RadiusY="0" IsHitTestVisible="False" Opacity="0" Margin="1"/>
 <ContentPresenter x:Name="contentPresenter" Content="{TemplateBinding Content}" Margin="2"/>
 </Grid>
 </ControlTemplate>
 </Setter.Value>
 </Setter>
 </Style>

 <!--图片区-数据项模板-->
 <DataTemplate x:Key="ImageDataTemplate">
 <Image Margin="0" Source="{Binding ImageUri}" Stretch="UniformToFill" Height="300.0" Width="480.0" ToolTipService.ToolTip="{Binding Title}" Cursor="Hand" MouseLeftButtonDown="Image_MouseLeftButtonDown" x:Name="{Binding Index}" />
 </DataTemplate>

 <!--图片区-数据项外观-->
 <Style x:Key="ImageItemStyle" TargetType="ListBoxItem">
 <Setter Property="Template">
 <Setter.Value>
 <ControlTemplate>
 <ContentPresenter x:Name="contentPresenter" Content="{TemplateBinding Content}" Margin="0"/>
 </ControlTemplate>
 </Setter.Value>
 </Setter>
 </Style>

 <!--动画-->
 <Storyboard x:Name="sbMove">
 <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="lstImage" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
 <EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="-481" x:Name="kTo">
 <EasingDoubleKeyFrame.EasingFunction>
 <BackEase EasingMode="EaseInOut" Amplitude="0.5"/>
 </EasingDoubleKeyFrame.EasingFunction>
 </EasingDoubleKeyFrame>
 </DoubleAnimationUsingKeyFrames>
 </Storyboard>

 </UserControl.Resources>

 <Grid x:Name="LayoutRoot" ShowGridLines="True" Height="300" Width="480" MouseEnter="LayoutRoot_MouseEnter" MouseLeave="LayoutRoot_MouseLeave">
 <Grid.Clip>
 <RectangleGeometry Rect="0,0,480,300"/>
 </Grid.Clip>

 <Canvas>
 <ListBox x:Name="lstImage" Style="{StaticResource ListStyle}" ItemsPanel="{StaticResource HorizontalItemPanel}" ItemContainerStyle="{StaticResource ImageItemStyle}" ItemTemplate="{StaticResource ImageDataTemplate}" RenderTransformOrigin="0.5,0.5" Padding="0">
 <ListBox.RenderTransform>
 <TransformGroup>
 <ScaleTransform/>
 <SkewTransform/>
 <RotateTransform/>
 <TranslateTransform/>
 </TransformGroup>
 </ListBox.RenderTransform>
 </ListBox>
 </Canvas>

 <ListBox Style="{StaticResource ListStyle}" ItemsPanel="{StaticResource HorizontalItemPanel}" ItemContainerStyle="{StaticResource NavItemStyle}" ItemTemplate="{StaticResource NavDataTemplate}" HorizontalAlignment="Right" VerticalAlignment="Bottom" x:Name="lstNav" />

 <TextBlock x:Name="txtDebug" HorizontalAlignment="Left" VerticalAlignment="Top" Foreground="White" Text="by 菩提树下的杨过" Margin="3,3,0,0" Cursor="Hand" MouseLeftButtonDown="txtDebug_MouseLeftButtonDown" />

 </Grid>
</UserControl>

后端代码: 

Xaml.cs

using System;
using System.Collections.ObjectModel;
using System.Reflection;
using System.Windows;
using System.Windows.Browser;
using System.Windows.Controls;
using System.Windows.Threading;
using System.Windows.Shapes;

namespace ListBoxSilde
{
 public partial class MainPage : UserControl
    {
        ObservableCollection<ImageItem> _Items;
 int _CurrentIndex = 0;//当前索引号(从0开始)
        DispatcherTimer _timer;


 public MainPage()
        {
            InitializeComponent();

 this.Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

 void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
 string _ArremblyName = Assembly.GetExecutingAssembly().FullName.Split(',')[0];
            _Items = new ObservableCollection<ImageItem>();

 for (int i = 1; i <= 4; i++)
            {
 string _img = "http://images.24city.com/jimmy/ListBoxSlideShow/img/00" + i.ToString() + ".jpg";
                _Items.Add(new ImageItem() { ImageUri = _img, Title = "这是图片00" + i.ToString() + ".jpg", ClickUri = _img, Index = i });
            }

 this.lstImage.ItemsSource = _Items;
 this.lstNav.ItemsSource = _Items;
 this.lstNav.SelectedIndex = _CurrentIndex;

            _timer = new DispatcherTimer();
            _timer.Interval = new System.TimeSpan(0, 0, 2);
            _timer.Tick += new System.EventHandler(_timer_Tick);
            _timer.Start();

        }

 void _timer_Tick(object sender, System.EventArgs e)
        {           
            kTo.Value = _CurrentIndex * -480;           
            sbMove.Begin();
            lstNav.SelectedIndex = _CurrentIndex;
            _CurrentIndex++;
 if (_CurrentIndex >= _Items.Count)
            {
                _CurrentIndex = 0;
            }
        }
 
 private void LayoutRoot_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
        {
            _timer.Stop();
        }

 private void LayoutRoot_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)
        {
            _timer.Start();
        }

 private void Image_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
        {           
            HtmlPage.Window.Navigate(new Uri(_Items[this.lstNav.SelectedIndex].ClickUri), "_target");   
        }

 private void txtDebug_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
        {
            HtmlPage.Window.Navigate(new Uri("http://yjmyzz.cnblogs.com/"), "_target");   
        }

 private void NavItemClick(object sender, System.Windows.Input.MouseButtonEventArgs e)
        {
            StackPanel g = (sender as StackPanel);
            TextBlock txt = g.Children[0] as TextBlock;
 int Index = int.Parse(txt.Text);            
            kTo.Value = (Index - 1) * -480;           
            sbMove.Begin();
            _CurrentIndex = Index - 1;
            lstNav.SelectedIndex = _CurrentIndex;
        }
    }

 public class ImageItem
    {
 public string ImageUri { set; get; }
 public string Title { set; get; }
 public string ClickUri { set; get; }
 public int Index { set; get; }
    }
}