AI 助理
备案控制台
开发者社区 安全 文章 正文

推荐并简要分析一个silverlight的相册DEMO--ImageSnipper(V2)

2017-11-22 983
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
下面就是它的一些演示截图。
　　
     首先是缩放，旋转和透明处理：

　　

     然后是文字水印处理：

　　
　　然后是使用Ink的涂鸭：

　　

     相信做为一个相册（图片浏览）的基本功能已经没什么问题了。

     下面来看一下这个DEMO的类图，如下：

　　

     上图中的左半部用红框标识的区域是其控件设计类，因为本DEMO中所使用的控件如：按钮，滑动条，复选框等均未使用Silverlight中所提供的控件，而是自己绘制并定义事件。因此这是我对该DEMO感兴趣的另一个原因。而右侧则是一些工具类或图片处理类，如处理图片移动的MovableImage和TextBlock移动的
MovableTextBlock等。
 
　　下面先简要介绍一下其中的Button按钮控件的设计思路。因为其继承自ButtonBase，所以有必要先看一下ButtonBase的代码声明，下面是xaml中的内容：
 
< ControlTemplate  xmlns ="http://schemas.microsoft.com/client/2007"
                 xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"   >
   < Grid  x:Name ="Part_Root"  MouseEnter ="btnClearMouseEnter"  MouseLeave ="btnClearMouseLeave"  
  　　　　　　　MouseLeftButtonDown ="btnClearMouseDown"  MouseLeftButtonUp ="btnClearMouseUp" >
     < Grid.Resources >
       < Storyboard  x:Name ="Part_MouseEnter" />
       < Storyboard  x:Name ="Part_MouseDown" />
       < Storyboard  x:Name ="Part_MouseUp" />
       < Storyboard  x:Name ="Part_MouseLeave" />
     </ Grid.Resources >
     < Rectangle  x:Name ="Part_BackgroundRect" />
     < TextBlock  x:Name ="Part_Caption" />
     < Rectangle  x:Name ="Part_ForegroundRect" />
     < Rectangle  x:Name ="Part_HighlightRect" />
   </ Grid >
</ ControlTemplate >
 
      从上面代码可以看出其采用控件模版的方式进行定义。但其鼠标在按钮上移入移出等状态的Storyboard（故事板）并未进行定义。而肯体的实现被放在了相应的子类(Button.xaml和RepeatButton.xaml)进行实现。下面就是其中的Button.xaml内容：
 
< ControlTemplate  xmlns ="http://schemas.microsoft.com/client/2007"
                 xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"   >
   < Grid  x:Name ="Part_Root"  MouseEnter ="btnClearMouseEnter"  MouseLeave ="btnClearMouseLeave"  
  　　　　　　　　MouseLeftButtonDown ="btnClearMouseDown"  MouseLeftButtonUp ="btnClearMouseUp" >
     < Grid.Resources >
       < Storyboard  x:Name ="Part_MouseEnter" >
         < ColorAnimation  Duration ="00:00:00.25"  To ="#3DFFFFFF"  Storyboard.TargetName ="Part_HighlightRect"  
        　　　　　　　　　　　Storyboard.TargetProperty ="(Shape.Fill).(SolidColorBrush.Color)"   />
       </ Storyboard >
       < Storyboard  x:Name ="Part_MouseDown" >
         < ColorAnimation  Duration ="00:00:00.2"  To ="#22000000"  Storyboard.TargetName ="Part_HighlightRect"  
        　　　　　　　　　　　Storyboard.TargetProperty ="(Shape.Fill).(SolidColorBrush.Color)"   />
       </ Storyboard >
       < Storyboard  x:Name ="Part_MouseUp" >
         < ColorAnimation  Duration ="00:00:00.2"  To ="#3DFFFFFF"  Storyboard.TargetName ="Part_HighlightRect"  
        　　　　　　　　　　　Storyboard.TargetProperty ="(Shape.Fill).(SolidColorBrush.Color)"   />
       </ Storyboard >
       < Storyboard  x:Name ="Part_MouseLeave" >
         < ColorAnimation  Duration ="00:00:00.25"  To ="#00FFFFFF"  Storyboard.TargetName ="Part_HighlightRect"  
        　　　　　　　　　　　Storyboard.TargetProperty ="(Shape.Fill).(SolidColorBrush.Color)"   />
       </ Storyboard >
     </ Grid.Resources >
     < Rectangle  x:Name ="Part_BackgroundRect"  StrokeThickness ="4"  RadiusX ="16"  RadiusY ="36"  Stroke ="#46000000" >
       < Rectangle.Fill >
         < LinearGradientBrush  EndPoint ="0.5,-0.4"  StartPoint ="0.5,1.4" >
           < GradientStop  Color ="Gray"  Offset ="0.242" />
           < GradientStop  Color ="DarkBlue"  Offset ="0.333" />
         </ LinearGradientBrush >
       </ Rectangle.Fill >
     </ Rectangle >
     < TextBlock  x:Name ="Part_Caption"  VerticalAlignment ="Center"  HorizontalAlignment ="Center"  
    　　　　　　Foreground ="Gold"  Text ="Button" >
       < TextBlock.RenderTransform >
         < TranslateTransform  X ="0"  Y ="-2" />
       </ TextBlock.RenderTransform >
     </ TextBlock >
     < Rectangle  x:Name ="Part_ForegroundRect"  VerticalAlignment ="Top"  StrokeThickness ="4"  RadiusX ="16"  
    　　　　　　RadiusY ="36"  Width ="124"  Height ="32" >
       < Rectangle.Fill >
         < LinearGradientBrush  EndPoint ="0.5,-0.409"  StartPoint ="0.5,1.409" >
           < GradientStop  Color ="#00FFFFFF"  Offset ="0.13" />
           < GradientStop  Color ="#FFFFFFFF"  Offset ="1" />
         </ LinearGradientBrush >
       </ Rectangle.Fill >
     </ Rectangle >
     < Rectangle  VerticalAlignment ="Top"  RadiusX ="16"  RadiusY ="36"  Fill ="#00FFFFFF"  x:Name ="Part_HighlightRect" />
   </ Grid >
</ ControlTemplate >

 
   注：这样设计方式本人感觉很有意思，很有“面向对象”的味道，呵呵。
   
   下面简要浏览一下ButtonBase.xaml.cs的代码：
 
[TemplatePart(Name  =   " Part_Root " , Type  =   typeof (Panel))]
[TemplatePart(Name  =   " Part_Caption " , Type  =   typeof (TextBlock))]
[TemplatePart(Name  =   " Part_ForegroundRect " , Type  =   typeof (Rectangle))]
[TemplatePart(Name  =   " Part_BackgroundRect " , Type  =   typeof (Rectangle))]
[TemplatePart(Name  =   " Part_HighlightRect " , Type  =   typeof (Rectangle))]
[TemplatePart(Name  =   " Part_MouseEnter " , Type  =   typeof (Storyboard))]
[TemplatePart(Name  =   " Part_MouseLeave " , Type  =   typeof (Storyboard))]
[TemplatePart(Name  =   " Part_MouseDown " , Type  =   typeof (Storyboard))]
[TemplatePart(Name  =   " Part_MouseUp " , Type  =   typeof (Storyboard))]
 public   abstract   partial   class  ButtonBase : Control
{
     ///   <summary>
     ///  定义单击事件
     ///   </summary>
     public   event  EventHandler Click;
     ///   <summary>
     ///  执行单击事件的绑定方法
     ///   </summary>
     protected   void  OnClick()
    {
         if  (Click  !=   null )
        {
            Click( this ,  new  EventArgs());
        }
    }

     ///   <summary>
     ///  标题属性
     ///   </summary>
     public   string  Caption
    {
         get  {  return   this .Part_Caption.Text; }
         set  {  this .Part_Caption.Text  =  value; }
    }
     ///   <summary>
     ///  鼠标移入控件区域时启动Part_MouseEnter故事板，下面类似
     ///   </summary>
     ///   <param name="sender"></param>
     ///   <param name="e"></param>
     protected   virtual   void  Part_Root_MouseEnter( object  sender, MouseEventArgs e)
    {
        Part_MouseEnter.Begin();
    }

     protected   virtual   void  Part_Root_MouseLeave( object  sender, MouseEventArgs e)
    {
        Part_MouseLeave.Begin();
    }

     protected   virtual   void  Part_Root_MouseLeftButtonDown( object  sender, MouseButtonEventArgs e)
    {
        Part_MouseDown.Begin();
    }

     protected   virtual   void  Part_Root_MouseLeftButtonUp( object  sender, MouseButtonEventArgs e)
    {
        Part_MouseUp.Begin();
         // 执行单击事件的绑定方法
        OnClick();
    }

     protected  Storyboard Part_MouseEnter, Part_MouseDown, Part_MouseLeave, Part_MouseUp;
     protected  Rectangle Part_ForegroundRect, Part_BackgroundRect, Part_HighlightRect;
     protected  Panel Part_Root;
     protected  TextBlock Part_Caption;
}
 
　　其实上面的代码与我们平时写.net控件类似，也是属性事件的定义。当然不同的地方就是对故事板的使用，
而故事板会让我们的按钮在鼠标触发事件时在UI上看起来更酷。当然下面还要看一下相应的Button中的内容，因
为这才是实际运行时使用的控件，其代码如下：
    
public   partial   class  Button : ButtonBase
    {
         public  Button()
        {
             // 加载Button.xaml中的内容，为下面获取元素进行相应操作
             string  xaml  =  ResourceHelper.GetTemplate( this .GetType());
            ControlTemplate template  =  (ControlTemplate)XamlReader.Load(xaml);
             this .Template  =  template;
             this .ApplyTemplate();
        }

         ///   <summary>
         ///  对当前模板(xaml)中的元素进行（主要是鼠标）事件绑定
         ///   </summary>
         public   override   void  OnApplyTemplate()
        {
            Part_Root  =  (Panel)GetTemplateChild( " Part_Root " );
            Part_Caption  =  (TextBlock)GetTemplateChild( " Part_Caption " );
            Part_ForegroundRect  =  (Rectangle)GetTemplateChild( " Part_ForegroundRect " );
            Part_BackgroundRect  =  (Rectangle)GetTemplateChild( " Part_BackgroundRect " );
            Part_HighlightRect  =  (Rectangle)GetTemplateChild( " Part_HighlightRect " );
            Part_MouseEnter  =  (Storyboard)GetTemplateChild( " Part_MouseEnter " );
            Part_MouseLeave  =  (Storyboard)GetTemplateChild( " Part_MouseLeave " );
            Part_MouseDown  =  (Storyboard)GetTemplateChild( " Part_MouseDown " );
            Part_MouseUp  =  (Storyboard)GetTemplateChild( " Part_MouseUp " );

            Part_Root.SizeChanged  +=   new  SizeChangedEventHandler(Part_Root_SizeChanged);
            Part_Root.MouseEnter  +=   new  MouseEventHandler(Part_Root_MouseEnter);
            Part_Root.MouseLeave  +=   new  MouseEventHandler(Part_Root_MouseLeave);
            Part_Root.MouseLeftButtonDown  +=   new  MouseButtonEventHandler(Part_Root_MouseLeftButtonDown);
            Part_Root.MouseLeftButtonUp  +=   new  MouseButtonEventHandler(Part_Root_MouseLeftButtonUp);
        }

         ///   <summary>
         ///  按钮的实际高度或宽度发生变化时的处理事件
         ///   </summary>
         ///   <param name="sender"></param>
         ///   <param name="e"></param>
         void  Part_Root_SizeChanged( object  sender, SizeChangedEventArgs e)
        {
            Part_ForegroundRect.Width  =  Part_Root.ActualWidth  -  16d;
            Part_ForegroundRect.Height  =  Part_Root.ActualHeight  -  12d;
            Part_HighlightRect.Width  =  Part_Root.ActualWidth  -  10d;
            Part_HighlightRect.Height  =  Part_Root.ActualHeight  -  8d;
             if  (Part_Root.ActualWidth  >  Part_Root.ActualHeight)
            {
                Part_BackgroundRect.RadiusX  =  Part_ForegroundRect.RadiusX  =  Part_HighlightRect.RadiusX  =  
                　　　　　　　　　　　　　　　　　　Part_Root.ActualHeight  /  2d;
                Part_BackgroundRect.RadiusY  =  Part_ForegroundRect.RadiusY  =  Part_HighlightRect.RadiusY  =  
                　　　　　　　　　　　　　　　　　　Part_Root.ActualWidth  /  4d;
            }
             else
            {
                Part_BackgroundRect.RadiusX  =  Part_ForegroundRect.RadiusX  =  Part_HighlightRect.RadiusX  =  
                　　　　　　　　　　　　　　　　　　Part_Root.ActualHeight  /  4d;
                Part_BackgroundRect.RadiusY  =  Part_ForegroundRect.RadiusY  =  Part_HighlightRect.RadiusY  =  
                　　　　　　　　　　　　　　　　　　Part_Root.ActualWidth  /  2d;
            }
        }
    }
    
    到这里还有另一个按钮控件RepeatButton没有介绍，其实它的内容也上面的Button代码相似，所以就不多介绍了。
当然RepeatButton最终的用处是被放在了ImageSelector控件中做为子控制被加载，这其中与我们开发“复合型”控件
相似。
　　下面就是Button控制的运行效果，如下所示：

　　

     当然这个DEMO在控件开发上还有一些有特色的地方，比如CheckBox控件等，我会在接下来的文章中加以说明，
呵呵。
 
　　好了，今天的内容就先到这里了。


本文转自 daizhenjun 51CTO博客，原文链接：http://blog.51cto.com/daizhj/100970，如需转载请自行联系原作者
文章标签：
数据安全/隐私保护
关键词：
silverlight分析
silverlight相册
技术小阿哥
目录
相关文章
狼人2007
|
Web App开发 前端开发 安全
一起谈.NET技术，Silverlight 结构分析
　　Silverlight是微软提供的一种Web前端应用程序开发框架，是微软RIA的主要应用程序开发平台。Silverlight以浏览器的插件方式，提供丰富的多媒体展示功能以及更多交互性的Web前端解决方案。
狼人2007
1000 0
狼人2007
|
Web App开发 前端开发 安全
Silverlight 结构分析
Silverlight是微软提供的一种Web前端应用程序开发框架，是微软RIA的主要应用程序开发平台。Silverlight以浏览器的插件方式，提供丰富的多媒体展示功能以及更多交互性的Web前端解决方案。
狼人2007
851 0
科技小能手
|
XML 数据格式
DeskViewer基于Silverlight 2.0开发的个性相册展示系统
科技小能手
790 0
科技小能手
|
前端开发 C# 数据格式
Silverlight中关于DomainService操作数据的分析.
科技小能手
1013 0
技术小牛人
|
C#
微软Silverlight Analytics Framework(开源分析框架）
技术小牛人
878 0
杰克.陈
|
定位技术 API
使用ArcGIS API for Silverlight实现地形坡度在线分析
原文:使用ArcGIS API for Silverlight实现地形坡度在线分析           苦逼的研究生课程终于在今天结束了，也许从今以后再也不会坐在大学的课堂上正式的听老师讲课了，接下来的时间就得开始找工作了.....前段时间一直比较忙，上课，考试，论文，以及联系实习单位...现在就差实习还没有着落了。
杰克.陈
1302 0
杰克.陈
|
网络架构 索引
ArcGIS网络分析之Silverlight客户端最近设施点分析(四)
原文:ArcGIS网络分析之Silverlight客户端最近设施点分析(四)     在上一篇中说了如何实现最近路径分析，本篇将讨论如何实现最近设施点分析。 最近设施点分析实际上和路径分析有些相识，实现的过程基本一致，不同的是参数的设置，选用的分析图层为最近设施点网络分析图层，一般形式为： http:///ArcGIS/rest/services//NAServer/ 在ArcGIS Api for Silverlight中，最近设施点分析的参数名称为：RouteClosestFacilityParameters，同样它也继承自BaseRouteParameters。
杰克.陈
1201 0
风华圆舞
|
Web App开发 XML 数据格式
分析Silverlight跨域调用
分析Silverlight跨域调用 在silverlight开发的过程中不免要遇到跨域的问题，在这里以跨域调用Webservice为例子来分析一下跨域的问题。   先介绍一下我的测试项目，我用flash和silverlight一同来调用一个webservice，一个flash客户端，一个silverlight客户端，一个web项目来host flash和silverlight，再加上一个webservice端。
风华圆舞
1102 0
杨俊明
silverlight：分享一个不错的自定义布局CollectionFlow(可用于制作相册的哦！)
2009年最后一天，分享一个不错的Silverlight开源自定义布局：CollectionFlow，原作者博客： http://mentas.spaces.live.com/Blog/cns!A8D899E9B03A6E15!784.
杨俊明
847 0
杨俊明
|
算法 前端开发 容器
silverlight 相册雏型
这篇应该是"silverlight3的"伪"3D续--图片横向轮换"的后续篇章，代码基本上从上篇代码修改而来，界面则抄袭了nasa的相册，自己一直做数据库相关的电子商务开发，虽然断断续续学习了一阵silverlight，但对RIA开发还没找着感觉，基本上仍处于从asp.
杨俊明
1137 0

热门文章

最新文章

  • 1
    36.Silverlight中播放视频和打印文档【附带源码实例】
  • 2
    阿里Java代码规约插件即将全球首发，邀您来发布仪式现场
  • 3
    淘宝 NPM 镜像
  • 4
    MySQL数据表生成ER图
  • 5
    Object reference not set to an instance of an object.
  • 6
    Silverlight C# 游戏开发：自定义鼠标（一）
  • 7
    Silverlight 游戏开发小技巧：技能冷却效果2（Cool“.NET研究”down）2
  • 8
    [Silverlight]如何在应用程序中使用Silverlight Toolkit中的主题样式
  • 9
    稳扎稳打Silverlight(32) - 2.0Tip/Trick之MessageBox, Popup, 循环的几种实现方法, 动态变换主题
  • 10
    在Silverlight中使用Json
  • 1
    Silverlight & Blend动画设计系列二：旋转动画（RotateTransform）
    1011
  • 2
    silverlight，WPF动画终极攻略之白云飘，坐车去旅游篇（Blend 4开发）
    1236
  • 3
    silverlight，WPF动画终极攻略之迟来的第三章 动画整合篇（Blend 4开发）
    1134
  • 4
    Silverlight & Blend动画设计系列六：动画技巧（Animation Techniques）之对象与路径转化、波感特效
    1043
  • 5
    Silverlight & Blend动画设计系列五：故事板(StoryBoards)和动画(Animations)
    941
  • 6
    Silverlight & Blend动画设计系列四：倾斜动画（SkewTransform）
    839
  • 7
    Silverlight & Blend动画设计系列三：缩放动画（ScaleTransform）
    935
  • 8
    在Silverlight程序中使用Thread一个很容易被忽略的问题
    738
  • 9
    Silverlight Map 技术点总结
    968
  • 10
    Silverlight InkPresenter 实现路径回放的探索
    1091

    • 相关电子书

    更多
  • QQ移送页面框架优化实践
  • QQ移动页面框架优化实践
  • 使用TensorFlow搭建智能开发系统自劢生成App UI代码

    • 相关实验场景

    更多
  • 函数计算入门-HelloWorld应用开发
  • 前端开发基础2：VS Code和Edge的联动开发
  • WEB网页编程实战
  • ROS模板参数动态展示
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月