XAML 实例演示之九 – Hello Kitty 专卖店产品演示
 
 
本文演示如何结合XAML 实例演示系列文章（1-8）中学习的技术，制作一个Hello Kitty 专卖店产品演示窗口。
 
范例程序演示效果如下：
 




 
 
因为范例程序引用了 [url]http://www.giftcenter.cn/[/url] 礼品中心网-Hello Kitty 专卖店的一些产品图片，因此需要连接Internet 才能看到具体的演示效果。
 
本文配合免费下载的Kaxaml 工具，演示XAML 的一些基本用法。关于Kaxaml 工具的介绍和下载，请参考文章： 推荐一款免费下载 XAML 编辑调试工具-Kaxaml。
 
XAML 系列文章为学习笔记，这是我今年春节期间安排的学习任务。
 
前面系列文章：
 
下面逐个介绍本范例使用的一些技术。
1. LinearGrdientBrush 和 GradientStop
LinearGradientBrush 使用线性渐变绘制区域。线形渐变横跨一条直线（渐变轴）将两种或更多种色彩进行混合。可以使用 GradientStop 对象指定渐变的颜色及其位置。
<LinearGradientBrush x:Key ="ListBoxGradient" StartPoint ="0,0" EndPoint ="0,1" >
    <GradientStop Color ="#90000000" Offset ="0" />
    <GradientStop Color ="#40000000" Offset ="0.005" />
    <GradientStop Color ="#10000000" Offset ="0.04" />
    <GradientStop Color ="#20000000" Offset ="0.945" />
    <GradientStop Color ="#60FFFFFF" Offset ="1" />
 </LinearGradientBrush>
 
上述LinearGridentBrush定义在Resources里面，应用在Border元素中。
       <Border BorderBrush ="Red" BorderThickness ="5" CornerRadius ="6" Background ="{DynamicResource ListBoxGradient}" >
        <ScrollViewer VerticalScrollBarVisibility ="Disabled" HorizontalScrollBarVisibility ="Auto" >
          <StackPanel IsItemsHost ="True" Orientation ="Horizontal" HorizontalAlignment ="Left" />
        </ScrollViewer>
        </Border>
 
2. Style 对象
一个控件中Style属性包含着一个Style对象，当Style对象更改时就可更新控件的大小及颜色等属性。XAML对Style的支持很好，一般请况Style初始化在父控件的Resources标记里面做为一个资源等待调用。
<Style x:Key ="SpecialListStyle" TargetType ="{x:Type ListBox}" >
 <Setter Property ="Template" >
    <Setter.Value>
      <ControlTemplate TargetType ="{x:Type ListBox}" >
        <Border BorderBrush ="Red" BorderThickness ="5" CornerRadius ="6" Background ="{DynamicResource ListBoxGradient}" >
        <ScrollViewer VerticalScrollBarVisibility ="Disabled" HorizontalScrollBarVisibility ="Auto" >
          <StackPanel IsItemsHost ="True" Orientation ="Horizontal" HorizontalAlignment ="Left" />
        </ScrollViewer>
        </Border>
      </ControlTemplate>
    </Setter.Value>
 </Setter>
</Style>
 
Style节在父控件Window的Resources属性中，表意Window下所有的子控件都可以获取Window.Resources中的对象。
 
Style.Triggers是一个Trigger（触发器）集合。使用了EventTrigger（事件触发器）实现产品图片大小和透明度的动画效果。
<Style.Triggers>
    <EventTrigger RoutedEvent ="Mouse.MouseEnter" >
    <EventTrigger.Actions>
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation Duration ="0:0:0.2" Storyboard.TargetProperty ="MaxHeight" To ="310" />
          <DoubleAnimation Duration ="0:0:0.2" Storyboard.TargetProperty ="Opacity" To ="1.0" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger.Actions>
 </EventTrigger>
 
3. ListBox和ItemsSource
ListBox 是一个 ItemsControl，使用 ItemsSource 属性设置其内容。本范例程序将Hello Kitty 专卖店的部分产品图片绑定到ListBox中。
 
   <ListBox
    Style ="{StaticResource SpecialListStyle}" Grid.Row ="1" Grid.ColumnSpan ="3" Name ="PhotoListBox" Margin ="0,0,0,20"
    ItemsSource ="{Binding}" ItemContainerStyle ="{StaticResource SpecialListItem}" SelectedIndex ="0" >
      <Image Source ="http://www.giftcenter.cn/giftcenterpictures/img640/04/102/04-102-013.jpg" />
      <Image Source ="http://www.giftcenter.cn/giftcenterpictures/img640/01/204/01-204-007.jpg" />
      <Image Source ="http://www.giftcenter.cn/giftcenterpictures/img640/02/307/02-307-001.jpg" />
      <Image Source ="http://www.giftcenter.cn/giftcenterpictures/img640/02/314/02-314-004.jpg" />
      <Image Source ="http://www.giftcenter.cn/giftcenterpictures/img640/02/301/02-301-004.jpg" />
      <Image Source ="http://www.giftcenter.cn/giftcenterpictures/img640/02/310/02-310-015.jpg" />
      <Image Source ="http://www.giftcenter.cn/giftcenterpictures/img640/02/310/02-310-020.jpg" />
      <Image Source ="http://www.giftcenter.cn/giftcenterpictures/img640/02/303/02-303-028.jpg" />
      <Image Source ="http://www.giftcenter.cn/giftcenterpictures/img640/02/204/02-204-005.jpg" />
      <Image Source ="http://www.giftcenter.cn/giftcenterpictures/img640/02/312/02-312-003.jpg" />
    </ListBox>