分类导航

silverlight 发布时间：2022-05-04 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了推荐并简要分析一个silverlight的相册DEMO--ImageSnipper(V2)，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

概述

在前一阵子，我在网上找到了这个相册DEMO，其不仅支持图相册图片的顺(逆)序浏览，还支持简单的图片处理（放大缩小Zoom，旋转Rotate，透明Transparency），在图片上打水印以及使用Ink在图片上涂鸭。　在线演示: [url]http://silverlight.services.live.com/invoke/72193/ImageSnipperV2/

@H_489_15@

在前一阵子，我在网上找到了这个相册DEMO，其不仅支持图相册图片的顺(逆)序浏览，还支持简单的图片处理（放大缩小Zoom，旋转Rotate，透明Transparency），在图片上打水印以及使用Ink在图片上涂鸭。

　在线演示:

[url]http://silverlight.services.live.com/invoke/72193/ImageSnipperV2/iframe.html[/url]

　　下面就是它的一些演示截图。
　　
首先是缩放，旋转和透明处理：

　　

然后是文字水印处理：

　　然后是使用Ink的涂鸭：

　　

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

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

　　

上图中的左半部用红框标识的区域是其控件设计类，因为本DEMO中所使用的控件如：按钮，滑动条，复选框等均未使用Silverlight中所提供的控件，而是自己绘制并定义事件。因此这是我对该DEMO感兴趣的另一个原因。而右侧则是一些工具类或图片处理类，如处理图片移动的MovableImage和TextBlock移动的
MovableTextBlock等。

　　下面先简要介绍一下其中的Button按钮控件的设计思路。因为其继承自ButtonBase，所以有必要先看一下ButtonBase的代码声明，下面是xaml中的内容：

< ControlTemplate xmlns ="http://scheR_129_11845@as.microsoft.com/client/2007"
                 xmlns:x ="http://scheR_129_11845@as.microsoft.com/winfx/2006/xaml" >
   Grid x:Name ="Part_Root" MouseEnter ="btnClearMouseEnter" MouSELEave ="btnClearMouSELEave"
  　　　　　　　MouSELEftButtonDown ="btnClearMouseDown" MouSELEftButtonUp ="btnClearMouseUp"
     Grid.resources
       Storyboard @H_674_151@="Part_MouseEnter" /> ="Part_MouseDown" ="Part_MouseUp" ="Part_MouSELEave" </ Rectangle @H_674_151@="ParT_BackgroundRect" TextBlock @H_674_151@="Part_Caption" ="Part_ForegroundRect" ="Part_HighlightRect" Grid
ControlTemplate

从上面代码可以看出其采用控件模版的方式进行定义。但其鼠标在按钮上移入移出等状态的Storyboard（故事板）并未进行定义。而肯体的实现被放在了相应的子类(Button.xaml和RepeatButton.xaml)进行实现。下面就是其中的Button.xaml内容：

  　　　　　　　　MouSELEftButtonDown
         ColorAnimation Duration ="00:00:00.25" To ="#3DFFFFFF" Storyboard.TargetName ="Part_HighlightRect"
        　　　　　　　　　　　Storyboard.TargetProperty ="(Shape.Fill).(SolidColorBrush.Color)" Storyboard ="00:00:00.2" @H_674_151@="#22000000" @H_674_151@="#00FFFFFF" @H_674_151@="ParT_BackgroundRect" strokeThickness ="4" radiusX ="16" radiusY ="36" stroke ="#46000000" Rectangle.Fill LinearGradientBrush EndPoint ="0.5,-0.4" StartPoint
           GradientStop Color ="Gray" Offset ="0.242" ="DarkBlue" @H_674_151@="0.333" LinearGradientBrush Rectangle ="Part_Caption" VerticalAlignment ="Center" HorizontalAlignment
    　　　　　　Foreground ="Gold" text ="Button" TextBlock.RenderTransform TranslateTransform X ="0" Y ="-2" TextBlock ="Part_ForegroundRect" @H_674_151@="Top"
    　　　　　　RadiusY Width ="124" Height ="32" ="0.13" ="#FFFFFFFF" @H_674_151@="1" VerticalAlignment Fill x:Name

   注：这样设计方式本人感觉很有意思，很有“面向对象”的味道，呵呵。

   下面简要浏览一下ButtonBase.xaml.cs的代码：

[TemplatePart(Name = " Part_Root " , Type typeof (Panel))]
[TemplatePart(Name Part_Caption (TextBlock))]
[TemplatePart(Name Part_ForegroundRect (RectanglE))]
[TemplatePart(Name ParT_BackgroundRect Part_HighlightRect Part_MouseEnter (Storyboard))]
[TemplatePart(Name Part_MouSELEave Part_MouseDown Part_MouseUp (Storyboard))]
public abstract partial class ButtonBase : Control
{
     /// <sumMary>
     定义单击事件
     </sumMary>
     event EventHandler Click;
     执行单击事件的绑定方法
     protected void OnClick()
    {
         if (Click != null )
        {
            Click( this new EventArgs());
        }
    }

     标题属性
     String Caption
    {
         get { return .Part_Caption.Text; }
         set .Part_Caption.Text value; }
    }
     鼠标移入控件区域时启动Part_MouseEnter故事板，下面类似
     </sumMary> <param NAME="sender"></param> <param NAME="e"></param> virtual Part_Root_MouseEnter( object sender, MouseEventArgs E)
    {
        Part_MouseEnter.begin();
    }

     Part_Root_MouSELEave( E)
    {
        Part_MouSELEave.begin();
    }

     Part_Root_MouSELEftButtonDown( E)
    {
        Part_MouseDown.begin();
    }

     Part_Root_MouSELEftButtonUp( E)
    {
        Part_MouseUp.begin();
         // 执行单击事件的绑定方法         OnClick();
    }

     Storyboard Part_MouseEnter, Part_MouseDown, Part_MouSELEave, Part_MouseUp;
     rectangle Part_ForegroundRect, ParT_BackgroundRect, Part_HighlightRect;
     Panel Part_Root;
     textBlock Part_Caption;
}

　　其实上面的代码与我们平时写.net控件类似，也是属性事件的定义。当然不同的地方就是对故事板的使用，
而故事板会让我们的按钮在鼠标触发事件时在UI上看起来更酷。当然下面还要看一下相应的Button中的内容，因
为这才是实际运行时使用的控件，其代码如下：

Button : ButtonBase
    {
         Button()
        {
             加载Button.xaml中的内容，为下面获取元素进行相应操作              xaml resourceHelper.GetTemplate( .GetType());
            ControlTemplate template (ControlTemplatE)XamlReader.Load(xaml);
             .Template template;
             .ApplyTemplate();
        }


         对当前模板(xaml)中的元素进行（主要是鼠标）事件绑定
                  override OnApplyTemplate()
        {
            Part_Root (Panel)GetTemplateChild( );
            Part_Caption (TextBlock)GetTemplateChild( );
            Part_ForegroundRect (RectanglE)GetTemplateChild( );
            ParT_BackgroundRect );
            Part_HighlightRect );
            Part_MouseEnter (Storyboard)GetTemplateChild( );
            Part_MouSELEave );
            Part_MouseDown );
            Part_MouseUp );

            Part_Root.SizeChanged += SizeChangedEventHandler(Part_Root_SizeChanged);
            Part_Root.MouseEnter MouseEventHandler(Part_Root_MouseEnter);
            Part_Root.MouSELEave MouseEventHandler(Part_Root_MouSELEavE);
            Part_Root.MouSELEftButtonDown MouseButtonEventHandler(Part_Root_MouSELEftButtonDown);
            Part_Root.MouSELEftButtonUp MouseButtonEventHandler(Part_Root_MouSELEftButtonUp);
        }

         按钮的实际高度或宽度发生变化时的处理事件
         Part_Root_SizeChanged( E)
        {
            Part_ForegroundRect.Width Part_Root.ActualWidth - 16d;
            Part_ForegroundRect.Height Part_Root.ActualHeight 12d;
            Part_HighlightRect.Width 10d;
            Part_HighlightRect.Height 8d;
             (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 4d;
                ParT_BackgroundRect.RadiusY 2d;
            }
        }
    }

到这里还有另一个按钮控件RepeatButton没有介绍，其实它的内容也上面的Button代码相似，所以就不多介绍了。
当然RepeatButton最终的用处是被放在了ImageSELEctor控件中做为子控制被加载，这其中与我们开发“复合型”控件
相似。

　　下面就是Button控制的运行效果，如下所示：