相信做为一个相册(图片浏览)的基本功能已经没什么问题了。
下面来看一下这个DEMO的类图,如下:

附件:
您所在的用户组无法下载或查看附件 上图中的左半部用红框标识的区域是其控件设计类,因为本DEMO中所使用的控件如:按钮,滑动条,
复选框等均未使用Silverlight中所提供的控件,而是自己绘制并定义事件。因此这是我对该DEMO感兴趣的
另一个原因。而右侧则是一些工具类或图片处理类,如处理图片移动的MovableImage和TextBlock移动的
MovableTextBlock等。
下面先简要介绍一下其中的Button按钮控件的设计思路。因为其继承自ButtonBase,所以有必要先看
一下ButtonBase的代码声明,下面是xaml中的内容:

Code
<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内容:

Code
<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>
注:这样设计方式本人感觉很有意思,很有“面向对象”的味道,呵呵。