XAML 实例演示之九 – Hello Kitty 专卖店产品演示

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

范例程序演示效果如下：

XAML 系列文章为学习笔记，这是我今年春节期间安排的学习任务。

前面系列文章：

<a href="http://blog.entlib.com/EntLib/archive/2009/01/24/xaml.aspx">XAML 实例演示之一</a>

<a href="http://blog.entlib.com/EntLib/archive/2009/01/24/xaml-again.aspx">XAML 实例演示之二</a>

<a href="http://blog.entlib.com/EntLib/archive/2009/01/25/xaml-grid.aspx">XAML 实例演示之三 – Grid 控件的使用</a>

<a href="http://blog.entlib.com/EntLib/archive/2009/01/25/xaml-stackpanelflowdocumentreader.aspx">XAML 实例演示之四 – StackPanel和FlowDocumentReader控件的使用</a>

<a href="http://blog.entlib.com/EntLib/archive/2009/01/26/xaml-canvasviewbox.aspx">XAML 实例演示之五 – Canvas和ViewBox控件的使用</a>

<a href="http://blog.entlib.com/EntLib/archive/2009/01/26/xaml-nesting.aspx">XAML 实例演示之六 – 控件嵌套Nesting</a>

<a href="http://blog.entlib.com/EntLib/archive/2009/01/26/xaml-resourcestransformations.aspx">XAML 实例演示之七 – Resources和Transformations</a>

<a href="http://blog.entlib.com/EntLib/archive/2009/01/26/xaml-yet-again.aspx">XAML 实例演示之八 –动画：缓慢旋转的按钮</a>

下面逐个介绍本范例使用的一些技术。

1. LinearGrdientBrush 和 GradientStop

LinearGradientBrush 使用线性渐变绘制区域。线形渐变横跨一条直线（渐变轴）将两种或更多种色彩进行混合。可以使用 GradientStop 对象指定渐变的颜色及其位置。

&lt;LinearGradientBrush x:Key="ListBoxGradient" StartPoint="0,0" EndPoint="0,1"&gt;

    &lt;GradientStop Color="#90000000" Offset="0" /&gt;

    &lt;GradientStop Color="#40000000" Offset="0.005" /&gt;

    &lt;GradientStop Color="#10000000" Offset="0.04" /&gt;

    &lt;GradientStop Color="#20000000" Offset="0.945" /&gt;

    &lt;GradientStop Color="#60FFFFFF" Offset="1" /&gt;

 &lt;/LinearGradientBrush&gt;

上述LinearGridentBrush定义在Resources里面，应用在Border元素中。

       &lt;Border BorderBrush="Red" BorderThickness="5" CornerRadius="6" Background="{DynamicResource ListBoxGradient}"&gt;

        &lt;ScrollViewer VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto"&gt;

          &lt;StackPanel IsItemsHost="True" Orientation="Horizontal" HorizontalAlignment="Left" /&gt;

        &lt;/ScrollViewer&gt;

        &lt;/Border&gt;

2. Style对象

一个控件中Style属性包含着一个Style对象，当Style对象更改时就可更新控件的大小及颜色等属性。XAML对Style的支持很好，一般请况Style初始化在父控件的Resources标记里面做为一个资源等待调用。

&lt;Style x:Key="SpecialListStyle" TargetType="{x:Type ListBox}"&gt;

 &lt;Setter Property="Template"&gt;

    &lt;Setter.Value&gt;

      &lt;ControlTemplate TargetType="{x:Type ListBox}" &gt;

        &lt;Border BorderBrush="Red" BorderThickness="5" CornerRadius="6" Background="{DynamicResource ListBoxGradient}" &gt;

          &lt;StackPanel IsItemsHost="True" Orientation="Horizontal" HorizontalAlignment="Left" /&gt;

      &lt;/ControlTemplate&gt;

    &lt;/Setter.Value&gt;

 &lt;/Setter&gt;

&lt;/Style&gt;

Style节在父控件Window的Resources属性中，表意Window下所有的子控件都可以获取Window.Resources中的对象。

Style.Triggers是一个Trigger（触发器）集合。使用了EventTrigger（事件触发器）实现产品图片大小和透明度的动画效果。

&lt;Style.Triggers&gt;

    &lt;EventTrigger RoutedEvent="Mouse.MouseEnter"&gt;

    &lt;EventTrigger.Actions&gt;

      &lt;BeginStoryboard&gt;

        &lt;Storyboard&gt;

          &lt;DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="MaxHeight" To="310" /&gt;

          &lt;DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Opacity" To="1.0" /&gt;

        &lt;/Storyboard&gt;

      &lt;/BeginStoryboard&gt;

    &lt;/EventTrigger.Actions&gt;

 &lt;/EventTrigger&gt;

3. ListBox和ItemsSource

ListBox 是一个 ItemsControl，使用 ItemsSource 属性设置其内容。本范例程序将Hello Kitty 专卖店的部分产品图片绑定到ListBox中。

   &lt;ListBox

    Style="{StaticResource SpecialListStyle}" Grid.Row="1" Grid.ColumnSpan="3" Name ="PhotoListBox" Margin="0,0,0,20"

    ItemsSource="{Binding}" ItemContainerStyle="{StaticResource SpecialListItem}" SelectedIndex="0"&gt;

      &lt;Image Source="http://www.giftcenter.cn/giftcenterpictures/img640/04/102/04-102-013.jpg"/&gt;

      &lt;Image Source="http://www.giftcenter.cn/giftcenterpictures/img640/01/204/01-204-007.jpg"/&gt;

      &lt;Image Source="http://www.giftcenter.cn/giftcenterpictures/img640/02/307/02-307-001.jpg"/&gt;

      &lt;Image Source="http://www.giftcenter.cn/giftcenterpictures/img640/02/314/02-314-004.jpg"/&gt;

      &lt;Image Source="http://www.giftcenter.cn/giftcenterpictures/img640/02/301/02-301-004.jpg"/&gt;

      &lt;Image Source="http://www.giftcenter.cn/giftcenterpictures/img640/02/310/02-310-015.jpg"/&gt;

      &lt;Image Source="http://www.giftcenter.cn/giftcenterpictures/img640/02/310/02-310-020.jpg"/&gt;

      &lt;Image Source="http://www.giftcenter.cn/giftcenterpictures/img640/02/303/02-303-028.jpg"/&gt;

      &lt;Image Source="http://www.giftcenter.cn/giftcenterpictures/img640/02/204/02-204-005.jpg"/&gt;

      &lt;Image Source="http://www.giftcenter.cn/giftcenterpictures/img640/02/312/02-312-003.jpg"/&gt;

    &lt;/ListBox&gt;

本文转自 entlib.com 51CTO博客，原文链接：http://blog.51cto.com/entlib/128635，如需转载请自行联系原作者