AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2009-12-08 944
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： ListBox是一个很有用的控件，其功能直逼Asp.Net中的Repeater，它能实现自定义数据项模板，纵向/横向排列Item(如果扩展一下实现自行折行，几乎就是SL版的Repeater了--实际上WrapPanel已经实现了，不过没有默认集成在SL3中).

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 ; }
    }
}

 

 

文章标签：
索引
Windows
关键词：
silverlight style
silverlight广告
silverlight listbox
silverlight学习笔记
silverlight图片轮换
杨俊明
目录
相关文章
技术小甜
|
C#
Silverlight4Beta之Style的改进
技术小甜
956 0
科技小能手
Silverlight 5 beta新特性探索系列:7.结合上层元素属性绑定和Style Setter上的绑定
科技小能手
1139 0
技术小甜
|
C# 前端开发 Web App开发
[Silverlight]打造具有放大缩小效果的图片导航
技术小甜
1109 0
科技小能手
|
前端开发
Silverlight实用窍门系列：43.Silverlight从ListBox拖拽图标到另一ListBox
科技小能手
947 0
科技小能手
Silverlight实用窍门系列：50.InkPresenter涂鸦板的基本使用，以及将效果保存为Png图片【附带源码实例】
科技小能手
1038 0
科技小能手
Silverlight实用窍门系列：60.Silverlight中自定义Behavior，实现图片动画渐变Behavior
科技小能手
980 0
科技小能手
|
前端开发
Silverlight实用窍门系列：71.Silverlight的Style
科技小能手
732 0
技术小胖子
Silverlight中的ListBox横向显示CheckBox
技术小胖子
1069 0
技术小胖子
|
PHP 索引
稳扎稳打Silverlight(5) - 2.0控件之ListBox, MediaElement, MultiScaleImage, PasswordBox
技术小胖子
1159 0
技术小胖子
|
索引
稳扎稳打Silverlight(17) - 2.0数据之详解DataGrid, 绑定数据到ListBox
技术小胖子
869 0

热门文章

最新文章

  • 1
    Silverlight 5 beta新特性探索系列:2.在XAML代码中设置断点和Binding绑定调试【附带源码实例】
  • 2
    Silverlight实用窍门系列：62.Silverlight中的Action动作TargetedTriggerAction、TriggerAction
  • 3
    分享Silverlight新鲜事(11月15日-21日) - PDC 10 Downloader
  • 4
    Silverlight 游戏开发小技巧：血条和进度条
  • 5
    SilverLight Tip 1 : Validation
  • 6
    整理Silverlight资源列表(二)
  • 7
    艾伟：Silverlight 2中实现Deep Zoom
  • 8
    快速浏览Silverlight3 Beta：在线与离线状态检测
  • 9
    游戏人生Silverlight(6) - 贪吃蛇[Silverlight 3.0(c#)]
  • 10
    ArcGIS API for Silverlight 当DataGrid选中项时，地图聚焦弹出窗口，并可以播放音频文件
  • 1
    Silverlight & Blend动画设计系列二：旋转动画（RotateTransform）
    1020
  • 2
    silverlight，WPF动画终极攻略之白云飘，坐车去旅游篇（Blend 4开发）
    1255
  • 3
    silverlight，WPF动画终极攻略之迟来的第三章 动画整合篇（Blend 4开发）
    1151
  • 4
    Silverlight & Blend动画设计系列六：动画技巧（Animation Techniques）之对象与路径转化、波感特效
    1053
  • 5
    Silverlight & Blend动画设计系列五：故事板(StoryBoards)和动画(Animations)
    950
  • 6
    Silverlight & Blend动画设计系列四：倾斜动画（SkewTransform）
    848
  • 7
    Silverlight & Blend动画设计系列三：缩放动画（ScaleTransform）
    942
  • 8
    在Silverlight程序中使用Thread一个很容易被忽略的问题
    751
  • 9
    Silverlight Map 技术点总结
    984
  • 10
    silverlight起步（二）——第一个silverligth
    890

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)