本文演示如何结合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>
本文转自 entlib.com 51CTO博客，原文链接：http://blog.51cto.com/entlib/128635，如需转载请自行联系原作者
