Chinaunix首页 | 论坛 | 博客
  • 博客访问: 5180986
  • 博文数量: 1696
  • 博客积分: 10870
  • 博客等级: 上将
  • 技术积分: 18357
  • 用 户 组: 普通用户
  • 注册时间: 2007-03-30 15:16
文章分类
文章存档

2017年(1)

2016年(1)

2015年(1)

2013年(1)

2012年(43)

2011年(17)

2010年(828)

2009年(568)

2008年(185)

2007年(51)

分类: 嵌入式

2010-10-26 22:01:49

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

silverlightchina.net

 

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

Xaml
<UserControl
    
xmlns=""
    xmlns:x
=""    
    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>

 

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

 


 

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

 

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

xaml代码:

 

代码
<UserControl
    
xmlns="" 
    xmlns:x
=""
    xmlns:d
="" xmlns:mc="" 
    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(002);
            _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[0as 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 { setget; }
        
public string Title { setget; }
        
public string ClickUri { setget; }
        
public int Index { setget; }
    }
}
 
阅读(1905) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~