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>