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

2016-08-20 10:49:13来源:http://daizhj.blog.51cto.com/285189/100975作者:daizhenjun人点击


在SnipperImages中为了进行图片列表导航(前后方向)设计了ImageSelector控件,而这个控件不同于
之前介绍过的Button, CheckBox, Slider,主要是其xaml中的UI元素变得数量庞大且行为更加复杂。所以通过
了解这个控件,我们能够更好的熟悉StoryBoard,Path,ImageBrush,ScaleTransform,TranslateTransform
等对象及属性的使用场景。


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




显示一张图片所使用的ui元素如下所示(其中之一):

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


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

 <Pathx:Name="left3Reflection"Stroke="White">
<Path.Data>
<PathGeometry>
<PathFigurex:Name="pathFigure_left3Reflection"IsClosed="True"StartPoint="130,120">
<LineSegmentx:Name="line1_left3Reflection"Point="250,100"/>
<LineSegmentx:Name="line2_left3Reflection"Point="250,170"/>
<LineSegmentx:Name="line3_left3Reflection"Point="130,190"/>
</PathFigure>
</PathGeometry>
</Path.Data>
<Path.Fill>
<ImageBrushx:Name="leftReflection3Brush"Stretch="Fill">
<ImageBrush.RelativeTransform>
<TransformGroup>
<!--实现投影效果-->
<ScaleTransformScaleX="1"ScaleY="-1"/>
<TranslateTransformY="1"/>
</TransformGroup>
</ImageBrush.RelativeTransform>
</ImageBrush>
</Path.Fill>
<Path.OpacityMask>
<LinearGradientBrushStartPoint="0.5,0"EndPoint="0.5,1">
<LinearGradientBrush.GradientStops>
<GradientStopOffset="0.0"Color="#2F000000"/>
<GradientStopOffset="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
<Storyboardx:Name='flowForward'Completed='onForwardFlowCompleted'>
<PointAnimationStoryboard.TargetName='pathFigure_centerImg'Storyboard.TargetProperty='StartPoint'From='250,15'To='330,5'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line1_centerImg'Storyboard.TargetProperty='Point'From='370,25'To='470,5'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line2_centerImg'Storyboard.TargetProperty='Point'From='370,95'To='470,145'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line3_centerImg'Storyboard.TargetProperty='Point'From='250,115'To='330,145'Duration='0:0:0.5'/>

<PointAnimationStoryboard.TargetName='pathFigure_centerReflection'Storyboard.TargetProperty='StartPoint'From='250,120'To='330,155'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line1_centerReflection'Storyboard.TargetProperty='Point'From='370,100'To='470,155'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line2_centerReflection'Storyboard.TargetProperty='Point'From='370,170'To='490,195'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line3_centerReflection'Storyboard.TargetProperty='Point'From='250,190'To='310,195'Duration='0:0:0.5'/>

<PointAnimationStoryboard.TargetName='pathFigure_rightImg1'Storyboard.TargetProperty='StartPoint'From='330,5'To='430,25'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line1_rightImg1'Storyboard.TargetProperty='Point'From='470,5'To='550,15'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line2_rightImg1'Storyboard.TargetProperty='Point'From='470,145'To='550,115'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line3_rightImg1'Storyboard.TargetProperty='Point'From='330,145'To='430,95'Duration='0:0:0.5'/>

<PointAnimationStoryboard.TargetName='pathFigure_right1Reflection'Storyboard.TargetProperty='StartPoint'From='330,155'To='430,100'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line1_right1Reflection'Storyboard.TargetProperty='Point'From='470,155'To='550,120'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line2_right1Reflection'Storyboard.TargetProperty='Point'From='490,195'To='550,190'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line3_right1Reflection'Storyboard.TargetProperty='Point'From='310,195'To='430,170'Duration='0:0:0.5'/>

<PointAnimationStoryboard.TargetName='pathFigure_rightImg2'Storyboard.TargetProperty='StartPoint'From='430,25'To='500,25'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line1_rightImg2'Storyboard.TargetProperty='Point'From='550,15'To='620,15'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line2_rightImg2'Storyboard.TargetProperty='Point'From='550,115'To='620,115'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line3_rightImg2'Storyboard.TargetProperty='Point'From='430,95'To='500,95'Duration='0:0:0.5'/>

<PointAnimationStoryboard.TargetName='pathFigure_right2Reflection'Storyboard.TargetProperty='StartPoint'From='430,100'To='500,100'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line1_right2Reflection'Storyboard.TargetProperty='Point'From='550,120'To='620,120'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line2_right2Reflection'Storyboard.TargetProperty='Point'From='550,190'To='620,190'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line3_right2Reflection'Storyboard.TargetProperty='Point'From='430,170'To='500,170'Duration='0:0:0.5'/>

<PointAnimationStoryboard.TargetName='pathFigure_rightImg3'Storyboard.TargetProperty='StartPoint'From='500,25'To='550,25'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line1_rightImg3'Storyboard.TargetProperty='Point'From='620,15'To='670,15'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line2_rightImg3'Storyboard.TargetProperty='Point'From='620,115'To='670,115'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line3_rightImg3'Storyboard.TargetProperty='Point'From='500,95'To='550,95'Duration='0:0:0.5'/>

<PointAnimationStoryboard.TargetName='pathFigure_right3Reflection'Storyboard.TargetProperty='StartPoint'From='500,100'To='550,100'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line1_right3Reflection'Storyboard.TargetProperty='Point'From='620,120'To='670,120'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line2_right3Reflection'Storyboard.TargetProperty='Point'From='620,190'To='670,190'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line3_right3Reflection'Storyboard.TargetProperty='Point'From='500,170'To='550,170'Duration='0:0:0.5'/>

<PointAnimationStoryboard.TargetName='pathFigure_leftImg1'Storyboard.TargetProperty='StartPoint'From='180,15'To='250,15'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line1_leftImg1'Storyboard.TargetProperty='Point'From='300,25'To='370,25'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line2_leftImg1'Storyboard.TargetProperty='Point'From='300,95'To='370,95'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line3_leftImg1'Storyboard.TargetProperty='Point'From='180,115'To='250,115'Duration='0:0:0.5'/>

<PointAnimationStoryboard.TargetName='pathFigure_left1Reflection'Storyboard.TargetProperty='StartPoint'From='180,120'To='250,120'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line1_left1Reflection'Storyboard.TargetProperty='Point'From='300,100'To='370,100'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line2_left1Reflection'Storyboard.TargetProperty='Point'From='300,170'To='370,170'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line3_left1Reflection'Storyboard.TargetProperty='Point'From='180,190'To='250,190'Duration='0:0:0.5'/>

<PointAnimationStoryboard.TargetName='pathFigure_leftImg2'Storyboard.TargetProperty='StartPoint'From='130,15'To='180,15'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line1_leftImg2'Storyboard.TargetProperty='Point'From='250,25'To='300,25'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line2_leftImg2'Storyboard.TargetProperty='Point'From='250,95'To='300,95'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line3_leftImg2'Storyboard.TargetProperty='Point'From='130,115'To='180,115'Duration='0:0:0.5'/>

<PointAnimationStoryboard.TargetName='pathFigure_left2Reflection'Storyboard.TargetProperty='StartPoint'From='130,120'To='180,120'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line1_left2Reflection'Storyboard.TargetProperty='Point'From='250,100'To='300,100'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line2_left2Reflection'Storyboard.TargetProperty='Point'From='250,170'To='300,170'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line3_left2Reflection'Storyboard.TargetProperty='Point'From='130,190'To='180,190'Duration='0:0:0.5'/>
</Storyboard>

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

Code
<Storyboardx:Name='flowBackward'Completed='onBackwardFlowCompleted'>
<PointAnimationStoryboard.TargetName='pathFigure_centerImg'Storyboard.TargetProperty='StartPoint'From='430,25'To='330,5'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line1_centerImg'Storyboard.TargetProperty='Point'From='550,15'To='470,5'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line2_centerImg'Storyboard.TargetProperty='Point'From='550,115'To='470,145'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line3_centerImg'Storyboard.TargetProperty='Point'From='430,95'To='330,145'Duration='0:0:0.5'/>

<PointAnimationStoryboard.TargetName='pathFigure_centerReflection'Storyboard.TargetProperty='StartPoint'From='430,100'To='330,155'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line1_centerReflection'Storyboard.TargetProperty='Point'From='550,120'To='470,155'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line2_centerReflection'Storyboard.TargetProperty='Point'From='550,190'To='490,195'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line3_centerReflection'Storyboard.TargetProperty='Point'From='430,170'To='310,195'Duration='0:0:0.5'/>

<PointAnimationStoryboard.TargetName='pathFigure_leftImg1'Storyboard.TargetProperty='StartPoint'From='330,5'To='250,15'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line1_leftImg1'Storyboard.TargetProperty='Point'From='470,5'To='370,25'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line2_leftImg1'Storyboard.TargetProperty='Point'From='470,145'To='370,95'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line3_leftImg1'Storyboard.TargetProperty='Point'From='330,145'To='250,115'Duration='0:0:0.5'/>

<PointAnimationStoryboard.TargetName='pathFigure_left1Reflection'Storyboard.TargetProperty='StartPoint'From='330,155'To='250,120'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line1_left1Reflection'Storyboard.TargetProperty='Point'From='470,155'To='370,100'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line2_left1Reflection'Storyboard.TargetProperty='Point'From='490,195'To='370,170'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line3_left1Reflection'Storyboard.TargetProperty='Point'From='310,195'To='250,190'Duration='0:0:0.5'/>

<PointAnimationStoryboard.TargetName='pathFigure_leftImg2'Storyboard.TargetProperty='StartPoint'From='250,15'To='180,15'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line1_leftImg2'Storyboard.TargetProperty='Point'From='370,25'To='300,25'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line2_leftImg2'Storyboard.TargetProperty='Point'From='370,95'To='300,95'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line3_leftImg2'Storyboard.TargetProperty='Point'From='250,115'To='180,115'Duration='0:0:0.5'/>

<PointAnimationStoryboard.TargetName='pathFigure_left2Reflection'Storyboard.TargetProperty='StartPoint'From='250,120'To='180,120'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line1_left2Reflection'Storyboard.TargetProperty='Point'From='370,100'To='300,100'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line2_left2Reflection'Storyboard.TargetProperty='Point'From='370,170'To='300,170'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line3_left2Reflection'Storyboard.TargetProperty='Point'From='250,190'To='180,190'Duration='0:0:0.5'/>

<PointAnimationStoryboard.TargetName='pathFigure_leftImg3'Storyboard.TargetProperty='StartPoint'From='180,15'To='130,15'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line1_leftImg3'Storyboard.TargetProperty='Point'From='300,25'To='250,25'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line2_leftImg3'Storyboard.TargetProperty='Point'From='300,95'To='250,95'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line3_leftImg3'Storyboard.TargetProperty='Point'From='180,115'To='130,115'Duration='0:0:0.5'/>

<PointAnimationStoryboard.TargetName='pathFigure_left3Reflection'Storyboard.TargetProperty='StartPoint'From='180,120'To='130,120'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line1_left3Reflection'Storyboard.TargetProperty='Point'From='300,100'To='250,100'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line2_left3Reflection'Storyboard.TargetProperty='Point'From='300,170'To='250,170'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line3_left3Reflection'Storyboard.TargetProperty='Point'From='180,190'To='130,190'Duration='0:0:0.5'/>

<PointAnimationStoryboard.TargetName='pathFigure_rightImg1'Storyboard.TargetProperty='StartPoint'From='500,25'To='430,25'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line1_rightImg1'Storyboard.TargetProperty='Point'From='620,15'To='550,15'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line2_rightImg1'Storyboard.TargetProperty='Point'From='620,115'To='550,115'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line3_rightImg1'Storyboard.TargetProperty='Point'From='500,95'To='430,95'Duration='0:0:0.5'/>

<PointAnimationStoryboard.TargetName='pathFigure_right1Reflection'Storyboard.TargetProperty='StartPoint'From='500,100'To='430,100'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line1_right1Reflection'Storyboard.TargetProperty='Point'From='620,120'To='550,120'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line2_right1Reflection'Storyboard.TargetProperty='Point'From='620,190'To='550,190'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line3_right1Reflection'Storyboard.TargetProperty='Point'From='500,170'To='430,170'Duration='0:0:0.5'/>

<PointAnimationStoryboard.TargetName='pathFigure_rightImg2'Storyboard.TargetProperty='StartPoint'From='550,25'To='500,25'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line1_rightImg2'Storyboard.TargetProperty='Point'From='670,15'To='620,15'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line2_rightImg2'Storyboard.TargetProperty='Point'From='670,115'To='620,115'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line3_rightImg2'Storyboard.TargetProperty='Point'From='550,95'To='500,95'Duration='0:0:0.5'/>

<PointAnimationStoryboard.TargetName='pathFigure_right2Reflection'Storyboard.TargetProperty='StartPoint'From='550,100'To='500,100'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line1_right2Reflection'Storyboard.TargetProperty='Point'From='670,120'To='620,120'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line2_right2Reflection'Storyboard.TargetProperty='Point'From='670,190'To='620,190'Duration='0:0:0.5'/>
<PointAnimationStoryboard.TargetName='line3_right2Reflection'Storyboard.TargetProperty='Point'From='550,170'To='500,170'Duration='0:0:0.5'/>
</Storyboard>


上面的两块xaml代码分别操作UI元素(注意只有六组,而不是七组,因为整体动态效果用六组PATH对象移动即可实现)。

注:目前无法在BLEND下对两个StoryBoard的运行效果进行设计测试,也就是之前BLEND截图中箭头所指示的
"No StoryBoard Open",造成这个问题的原因目前我还不大清楚,有兴趣的朋友不妨也帮助分析一下原因。


到这里,页面上的图象展示元素和StoryBoard就介绍完了,当然还有两个按钮控件(RepeatButton类型)没有介绍,因为
其功能只是实现按钮事件触发Storyboard运行,而且有关Button按钮控件的类继承关系及设计原理我之前已写过一篇文章作
了一些介绍,大家参考一下即可。

好了,xaml内容介绍完了,下面介绍一下CS代码,首先是事件参数声明(详细内容见注释):

///<summary>
///ImageSelector事件参数
///</summary>
publicclassImageSelectedEventArgs:EventArgs
{
///<summary>
///当前选择的图片源信息
///</summary>
publicstringSource;
///<summary>
///当前选择的图片位图对象
///</summary>
publicBitmapImageImageSource;
}


然后是选择图片时的事件处理句柄(关于使用参见接下来的代码):

///<summary>
///ImageSelected事件处理句柄
///</summary>
///<paramname="sender"></param>
///<paramname="e"></param>
publicdelegatevoidImageSelectedEventHandler(objectsender,ImageSelectedEventArgse);


接着是控件的主体类了(详情见注释):

///<summary>
///ImageSelector控件类
///</summary>
publicpartialclassImageSelector:UserControl
{
///<summary>
///声明ImageSelected事件处理句柄的实例
///</summary>
publiceventImageSelectedEventHandlerImageSelected;

publicImageSelector()
{
InitializeComponent();

//图像刷数组初始化,用于绑定指定的BitmapImage信息
imageBrushArray=newImageBrush[7];//7为当前页图片数
imageBrushArray[0]=leftImg3Brush;
imageBrushArray[1]=leftImg2Brush;
imageBrushArray[2]=leftImg1Brush;
imageBrushArray[3]=centerImgBrush;
imageBrushArray[4]=rightImg1Brush;
imageBrushArray[5]=rightImg2Brush;
imageBrushArray[6]=rightImg3Brush;

//“倒影效果”图像刷数组初始化,用于绑定指定的BitmapImage信息
reflectionBrushArray=newImageBrush[7];//7为当前页图片数
reflectionBrushArray[0]=leftReflection3Brush;
reflectionBrushArray[1]=leftReflection2Brush;
reflectionBrushArray[2]=leftReflection1Brush;
reflectionBrushArray[3]=centerReflectionBrush;
reflectionBrushArray[4]=rightReflection1Brush;
reflectionBrushArray[5]=rightReflection2Brush;
reflectionBrushArray[6]=rightReflection3Brush;

//绑定鼠标点击图片(外侧Path对象)后的事件
leftImg3.MouseLeftButtonDown+=newMouseButtonEventHandler(OnImgClicked);
leftImg2.MouseLeftButtonDown+=newMouseButtonEventHandler(OnImgClicked);
leftImg1.MouseLeftButtonDown+=newMouseButtonEventHandler(OnImgClicked);
rightImg3.MouseLeftButtonDown+=newMouseButtonEventHandler(OnImgClicked);
rightImg2.MouseLeftButtonDown+=newMouseButtonEventHandler(OnImgClicked);
rightImg1.MouseLeftButtonDown+=newMouseButtonEventHandler(OnImgClicked);
centerImg.MouseLeftButtonDown+=newMouseButtonEventHandler(OnImgClicked);
}

///<summary>
///定义图像点击事件
///</summary>
///<paramname="sender"></param>
///<paramname="e"></param>
voidOnImgClicked(objectsender,MouseButtonEventArgse)
{
ImageSelectedEventArgsargs=newImageSelectedEventArgs();
//设置事件参数
args.ImageSource=((Path)sender).Fill.GetValue(ImageBrush.ImageSourceProperty)asBitmapImage;
//调用图片选择事件
OnImageSelected(args);
}

///<summary>
///定义图片选择事件
///</summary>
///<paramname="e"></param>
protectedvoidOnImageSelected(ImageSelectedEventArgse)
{
if(ImageSelected!=null)
{
//调用绑定的处理事件代码
ImageSelected(this,e);
}
}

///<summary>
///实始化图像数组并绑定相应的图像Brush
///</summary>
///<paramname="imageUris">图片路径信息</param>
publicvoidSetImages(string[]imageUris)
{
imageArray=imageUris;
if(imageArray.Length>=7)
{
//设置当前显示的图片数组的左起索引数
imageIndex=0;
//绑定相应的图像Brush
UpdateImages();
}
}


///<summary>
///定义“flowForward(前进)”对象(Storyboard类型)的Completed处理事件
///</summary>
///<paramname="sender"></param>
///<paramname="e"></param>
voidonForwardFlowCompleted(objectsender,EventArgse)
{  
//当storyboard动画效果完成时置为NULL
firstImgBrush.ImageSource=null;
lastImgBrush.ImageSource=null;
firstReflectionBrush.ImageSource=null;
lastReflectionBrush.ImageSource=null;
}

///<summary>
///定义“flowBackward(后退)”对象(Storyboard类型)的Completed处理事件
///</summary>
///<paramname="sender"></param>
///<paramname="e"></param>
voidonBackwardFlowCompleted(objectsender,EventArgse)
{
//当storyboard动画效果完成时置为NULL
firstImgBrush.ImageSource=null;
lastImgBrush.ImageSource=null;
firstReflectionBrush.ImageSource=null;
lastReflectionBrush.ImageSource=null;
}

///<summary>
///“后退”按钮点击事件
///</summary>
///<paramname="sender"></param>
///<paramname="e"></param>
voidbtnBack_Click(objectsender,EventArgse)
{
if(imageIndex!=-1)
{
//更新最左侧图像刷和“倒影”对象,使其在下面storyboard运动过程中逐渐被遮盖

firstImgBrush.ImageSource=newBitmapImage(newUri(imageArray[imageIndex],
UriKind.RelativeOrAbsolute));


firstReflectionBrush.ImageSource=newBitmapImage(newUri(imageArray[imageIndex],
UriKind.RelativeOrAbsolute));


//注:后退方向与我们通常认为的方向相反(通常是imageIndex--),这块不知道是作者的疏忽还是别的原因
imageIndex++;
if(imageIndex==imageArray.Length)
{
imageIndex=0;
}
UpdateImages();
//运行"后退"storyboard效果
flowBackward.Begin();
}
}

///<summary>
///“前进”按钮点击事件
///</summary>
///<paramname="sender"></param>
///<paramname="e"></param>
voidbtnForward_Click(objectsender,EventArgse)
{
if(imageIndex!=-1)
{
//更新最右侧图像刷和“倒影”对象,使其在下面storyboard运动过程中逐渐被遮盖

lastImgBrush.ImageSource=newBitmapImage(newUri(imageArray[(imageIndex+6)%
imageArray.Length],UriKind.RelativeOrAbsolute));


lastReflectionBrush.ImageSource=newBitmapImage(newUri(imageArray[(imageIndex+6)%
imageArray.Length],UriKind.RelativeOrAbsolute));


//注:前进方向与我们通常认为方向相反(通常是imageIndex++),这块不知道是作者的疏忽还是别的原因
imageIndex--;
if(imageIndex<0)
{
imageIndex=imageArray.Length-1;
}
UpdateImages();
//运行"前进"storyboard效果
flowForward.Begin();
}
}

///<summary>
///绑定相应的图像Brush
///</summary>
voidUpdateImages()
{
intbrushIndex=imageIndex;
for(inti=0;i<7;i++)
{
//加载图像信息

imageBrushArray[i].ImageSource=newBitmapImage(newUri(imageArray[brushIndex],
UriKind.RelativeOrAbsolute));


reflectionBrushArray[i].ImageSource=newBitmapImage(newUri(imageArray[brushIndex],
UriKind.RelativeOrAbsolute));


brushIndex++;
//当到达最大长度时,则清零(回到起始位置,实现循环效果)
if(brushIndex==imageArray.Length)
{
brushIndex=0;
}
}
}


///<summary>
///图像刷数组用于绑定(显示)指定的BitmapImage信息
///</summary>
privateImageBrush[]imageBrushArray;
///<summary>
///"倒影"效果图像刷数组
///</summary>
privateImageBrush[]reflectionBrushArray;
///<summary>
///图片路径信息数组
///</summary>
privatestring[]imageArray;
///<summary>
///当前显示的图片数组的左起索引数
///</summary>
privateintimageIndex=-1;
}


上面的控件类主要是实现了初始化属性成员(图片数组)和相应UI元素事件的绑定(MouseLeftButtonDown),
然后是相应的事件处理代码(前进,后退按钮事件)。当然在实现上我个人认为还有一些问题(在注释中已说明)。
但总体上代码布局还是很清爽的。

下面即是本文开头DEMO页面的xaml代码(源码包中的Page3.xaml):

Code
  <!--控件声明-->
<ctl:ImageSelectorx:Name='imageSelector'ImageSelected='OnImageSelected'Canvas.Top='400'Loaded='imageSelector_Loaded'/>

<!--当用户点某一图片时显示元素-->
<InkPresenterx:Name="snipCanvas"Background="#80F5F5DC"Opacity="0"Canvas.Left="100"Canvas.Top="70"Width="600"Height="430"Cursor="Hand">
<InkPresenter.Resources>
<Storyboardx:Name="snipCanvasFadeIn">
<DoubleAnimationStoryboard.TargetName="snipCanvas"Storyboard.TargetProperty="Opacity"From="0.0"To="1.0"Duration='0:0:0.5'/>
<DoubleAnimationStoryboard.TargetName="snipCanvasScale"Storyboard.TargetProperty="ScaleX"From="0.0"To="1.0"Duration='0:0:0.5'/>
<DoubleAnimationStoryboard.TargetName="snipCanvasScale"Storyboard.TargetProperty="ScaleY"From="0.0"To="1.0"Duration='0:0:0.5'/>
</Storyboard>
<Storyboardx:Name="snipCanvasFadeOut">
<DoubleAnimationStoryboard.TargetName="snipCanvas"Storyboard.TargetProperty="Opacity"From="1.0"To="0.0"Duration='0:0:0.5'/>
<DoubleAnimationStoryboard.TargetName="snipCanvasScale"Storyboard.TargetProperty="ScaleX"From="1.0"To="0.0"Duration='0:0:0.5'/>
<DoubleAnimationStoryboard.TargetName="snipCanvasScale"Storyboard.TargetProperty="ScaleY"From="1.0"To="0.0"Duration='0:0:0.5'/>
</Storyboard>
</InkPresenter.Resources>
<InkPresenter.RenderTransform>
<ScaleTransformx:Name="snipCanvasScale"ScaleX="0.0"ScaleY="0.0"CenterX="300"CenterY="215"/>
</InkPresenter.RenderTransform>

<CanvasCanvas.Left="577"Canvas.Top="3"Width="20"Height="20"Background="Crimson"MouseLeftButtonUp="onExitMouseUp">
<LineX1="4"Y1="4"X2="16"Y2="16"Stroke="White"StrokeThickness="3"/>
<LineX1="16"Y1="4"X2="4"Y2="16"Stroke="White"StrokeThickness="3"/>
</Canvas>
<Imagex:Name="snipImage"Canvas.Left="10"Canvas.Top="40"
Width="580"Height="380"Stretch="Uniform"/>

</InkPresenter>

而相应的CS代码如下所示:

voidimageSelector_Loaded(objectsender,RoutedEventArgse)
{

stringbaseUri=Application.Current.Host.Source.AbsoluteUri.Substring(0,
Application.Current.Host.Source.AbsoluteUri.LastIndexOf("/"));
//初始化设置图片链接数组
imageSelector.SetImages(newstring[]
{
String.Concat(baseUri,"/../Images/1.jpg"),
String.Concat(baseUri,"/../Images/2.jpg"),
String.Concat(baseUri,"/../Images/3.jpg"),
String.Concat(baseUri,"/../Images/4.jpg"),
String.Concat(baseUri,"/../Images/5.jpg"),
String.Concat(baseUri,"/../Images/6.jpg"),
String.Concat(baseUri,"/../Images/7.jpg"),
String.Concat(baseUri,"/../Images/8.jpg")
});
}

voidOnImageSelected(objectsender,ImageSelectedEventArgse)
{
//当选择某一图片时,放大显示
snipCanvas.Cursor=Cursors.Hand;
snipCanvasFadeIn.Begin();
snipImage.SetValue(Image.SourceProperty,e.ImageSource);
}


voidonExitMouseUp(objectsender,MouseButtonEventArgse)
{ 
//当点击关闭时
snipCanvasFadeOut.Begin();
}

  上面代码中的OnImageSelected用于单击某张图片时放大显示,如下图:



好了,今天的内容就先到这里了。

tag:silverlight,imageselector,imagesnipper

作者:代震军,daizhj

原文链接:[url]http://www.cnblogs.com/daizhj/archive/2008/09/10/1288315.html[/url]

源码下载,请点击这里:)

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台