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

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

 

 

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

 

范例程序演示效果如下：

 

 

范例程序完整代码下载。

 

因为范例程序引用了 http://www.giftcenter.cn/ 礼品中心网-Hello Kitty 专卖店的一些产品图片，因此需要连接Internet 才能看到具体的演示效果。

 

本文配合免费下载的Kaxaml 工具，演示XAML 的一些基本用法。关于Kaxaml 工具的介绍和下载，请参考文章： 推荐一款免费下载 XAML 编辑调试工具-Kaxaml。

 

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

 

前面系列文章：

XAML 实例演示之一

XAML 实例演示之二

XAML 实例演示之三 – Grid 控件的使用

XAML 实例演示之四 – StackPanel和FlowDocumentReader控件的使用

XAML 实例演示之五 – Canvas和ViewBox控件的使用

XAML 实例演示之六 – 控件嵌套Nesting

XAML 实例演示之七 – Resources和Transformations

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>

 

 

 

转载于:https://www.cnblogs.com/entlibforum/archive/2009/02/04/1384124.html