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

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




 
 
因为范例程序引用了http://www.giftcenter.cn/ 礼品中心网-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>
 
 

 

posted on 2009-02-04 19:20  EntLib  阅读(2276)  评论(0编辑  收藏  举报