现在的位置: 首页 > 综合 > 正文

SnipperImages(Silverlight DEMO)控件设计之–ImageSelector

2013年08月15日 ⁄ 综合 ⁄ 共 13095字 ⁄ 字号 小 中 大 ⁄ 评论关闭

     在SnipperImages中为了进行图片列表导航（前后方向）设计了ImageSelector控件，而这个控件不同于

之前介绍过的Button, CheckBox, Slider，主要是其xaml中的UI元素变得数量庞大且行为更加复杂。所以通过

了解这个控件，我们能够更好的熟悉StoryBoard,Path,ImageBrush,ScaleTransform,TranslateTransform

等对象及属性的使用场景。

　　首先来看一下DEMO运行效果:

 

 

     显示一张图片所使用的ui元素如下所示（其中之一）：

<Path x:Name="leftImg3" Stroke="White" MouseLeftButtonDown="OnImgClicked">
  <Path.Data>
    <PathGeometry>
      <PathFigure x:Name="pathFigure_leftImg3" IsClosed="True" StartPoint="130,15">
        <LineSegment x:Name="line1_leftImg3" Point="250,25"/>
        <LineSegment x:Name="line2_leftImg3" Point="250,95"/>
        <LineSegment x:Name="line3_leftImg3" Point="130,115"/>
      </PathFigure>
    </PathGeometry>
  </Path.Data>
  <Path.Fill>
    <ImageBrush x:Name="leftImg3Brush" Stretch="Fill"/>
  </Path.Fill>
</Path>

     大家发现了，上面的内容只是可以正常显示一个图像（通过设置leftImg3Brush的ImageSource属性）而
在每一个图片下方都会有一个倒影效果，其使用的就是ScaleTransform,其代码布局如下:

　<Path x:Name="left3Reflection" Stroke="White">
      <Path.Data>
        <PathGeometry>
          <PathFigure x:Name="pathFigure_left3Reflection" IsClosed="True" StartPoint="130,120">
            <LineSegment x:Name="line1_left3Reflection" Point="250,100"/>
            <LineSegment x:Name="line2_left3Reflection" Point="250,170"/>
            <LineSegment x:Name="line3_left3Reflection" Point="130,190"/>
          </PathFigure>
        </PathGeometry>
      </Path.Data>
      <Path.Fill>
        <ImageBrush x:Name="leftReflection3Brush" Stretch="Fill">
          <ImageBrush.RelativeTransform>
            <TransformGroup>
              <!--实现投影效果-->
              <ScaleTransform ScaleX="1" ScaleY="-1" />
              <TranslateTransform Y="1" />
            </TransformGroup>
          </ImageBrush.RelativeTransform>
        </ImageBrush>
      </Path.Fill>
      <Path.OpacityMask>
        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
          <LinearGradientBrush.GradientStops>
            <GradientStop Offset="0.0" Color="#2F000000" />
            <GradientStop Offset="1.0" Color="#00000000" />
          </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
      </Path.OpacityMask>
    </Path>

     
      而有关如何实现倒影效果可以参考这篇文章。当然如果使用BLEND来制作倒影效果会更容易，但不知道为

什么，目前的BLEND还无法实现对子对象的属性设置（因为上面的XAML代码被放在了PATH对象中，而BLEND

在可视状态下只能看到PATH那一层的对象，而无法设置ImageBrush="leftReflection2Brush"这个对象）。

     有了7个path对象加载图像（使用里面的ImageBrush的ImageSource属性）。还有7个path对象分别对应

实现7个图像的倒影效果。也就是下图中所显示的：

 

 

     当然除此以外，还有2组PATH对象分别是:

　　lastImgBrush,lastReflectionBrush:用于当点击右侧导航按钮时，设置为当前分页下最右侧图像，以

                                                避免出现图片为空（空框）的情况。

     firstImgBrush,firstReflectionBrush:用于当点击左侧导航按钮时，设置为当前分页下最左侧图像，以
  　　　　　　　　　　　　　　　　　避免出现图片为空（空框）的情况。
  　　　　　　　　　　　　　　　　　
     有了这些静态的UI元素之后，我们还需要让其动起来，所以要用到StoryBoard(故事板)。而有关该内容

介绍可参见如下链接：使用silverlight中的Storyboard实现动画效果

     因为本DEMO中用的是PointAnimation（当动画值的变化[FROM ...TO...]类型是 Point型时使用), 所以这
里直接就把相应的Xaml代码放在这里了，代码很简单。
     首先是当点击右侧导航按钮时的Storyboard代码：　　

Code

      
      然后是点击左侧导航时的StoryBoard代码：     
     

Code
返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞