c#,使用WPF的Adorner实现iPhone上新邮件或消息提示效果----实现（一）
一、背景介绍
首先，让我们看一下iPhone上的新邮件提示效果。
在邮件图标的右上角会出现未读的新邮件数量，苹果的这种设计即简洁又精致，而且相当的实用。
那么经典的效果当然要用我们的实际行动来膜拜！^_^
二、最终效果预览
在该篇文章的最后分享了代码，^_^。
三、实现分解
结构采用自定义按钮+自定义装饰件（Adorner）。
装饰件顾名思义就是用来作装饰用的，好处就是：我们以前都是自己写个控件然后在控件上绘制所有的效果，
而现在有了它，我们可以将一些效果独立出来做成一种装饰件，重用在其他想使用该效果的控件上，增强了
效果的解耦和重用。
1、自定义按钮（PromptableButton）
接下来我们编写一个继承自Button类的PromptableButton。
internal class PromptableButton : Button { //省略... }
该按钮需要一个提示数量（PromptCount）属性用于最终的右上角提示显示用，做成依赖属性是为了绑定给用作显示的XAML代码。
CoercePromptCountCallback用于限制PromptCount不能小于0。
public int PromptCount { get { return (int)GetValue(PromptCountProperty); } set { SetValue(PromptCountProperty, value); } } public static readonly DependencyProperty PromptCountProperty = DependencyProperty.Register("PromptCount", typeof(int), typeof(PromptableButton), new FrameworkPropertyMetadata(0, new PropertyChangedCallback(PromptCountChangedCallBack),
new CoerceValueCallback(CoercePromptCountCallback))); private static object CoercePromptCountCallback(DependencyObject d, object value) { int promptCount = (int)value; promptCount = Math.Max(0, promptCount); return promptCount; }
该按钮还需要一个封面图片，同样做成依赖属性绑定给界面。
public ImageSource CoverImageSource { get { return (ImageSource)GetValue(CoverImageSourceProperty); } set { SetValue(CoverImageSourceProperty, value); } } public static readonly DependencyProperty CoverImageSourceProperty = DependencyProperty.Register("CoverImageSource", typeof(ImageSource), typeof(PromptableButton), new UIPropertyMetadata(null));
因为是自定义按钮，我们需要为该按钮提供一个皮肤，皮肤写在Themes/Generic.xaml资源文件中。
为了应用该皮肤，我们如此做：
static PromptableButton() { DefaultStyleKeyProperty.OverrideMetadata(typeof(PromptableButton), new FrameworkPropertyMetadata(typeof(PromptableButton))); }
接下来，看看皮肤的实现。
其中的PART_CoverImage的Source绑定PromptableButton的CoverImageSource属性，用来显示封面图片。
下面的触发器的作用是当按下按钮后对按钮作模糊效果。
<Style TargetType="{x:Type local:PromptableButton}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type local:PromptableButton}"> <Grid> <Image Name="PART_CoverImage" Stretch="Fill" Source="{Binding RelativeSource={RelativeSource TemplatedParent},Path=CoverImageSource}"> <Image.Effect> <BlurEffect x:Name="effect" Radius="0"/> </Image.Effect> </Image> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsPressed" Value="True"> <Trigger.EnterActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="effect" Storyboard.TargetProperty="Radius" From="0" To="5" Duration="0:0:0.2" /> </Storyboard> </BeginStoryboard> </Trigger.EnterActions> <Trigger.ExitActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="effect" Storyboard.TargetProperty="Radius" From="5" To="0" Duration="0:0:0.2" /> </Storyboard> </BeginStoryboard> </Trigger.ExitActions> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>
自定义按钮（PromptableButton）完成。
2、自定义装饰件（PromptAdorner）
我们一般都会在Adorner的OnRender方法里实现装饰件的绘制，如果绘制的话需要监听PromptableButton的PromptCount
属性的变化，这样作就显得比较麻烦，依赖属性本身就是用作绑定的最好的对象，为什们我们不能使用XAML来作绘制，并且绑定
PromptCount！
为此，专门做一个负责绘制PromptCount的自定义控件（PromptChrome），为这个控件做一个皮肤，在此皮肤内绑定
PromptCount，并且将这个控件作为装饰件（PromptAdorner）的子控件，说白了就是PromptAdorner负责装饰，装饰些什么东
西则交给PromptChrome来完成。
首先，让我们看看PromptAdorner的代码。
其目的就是管理子控件PromptChrome，并通过ArrangeOverride方法进行布局。
注意其中的_chrome.DataContext = adornedElement;这句话使PromptableButton成为PromptChrome的上下文，
使PromptCount被PromptChrome界面上的元素绑定。
internal class PromptAdorner : Adorner { protected override int VisualChildrenCount { get { return 1; } } public PromptAdorner(UIElement adornedElement) : base(adornedElement) { _chrome = new PromptChrome(); _chrome.DataContext = adornedElement; this.AddVisualChild(_chrome); } protected override Visual GetVisualChild(int index) { return _chrome; } protected override Size ArrangeOverride(Size arrangeBounds) { _chrome.Arrange(new Rect(arrangeBounds)); return arrangeBounds; } PromptChrome _chrome; }
接下来，我们看一下PromptChrome的代码。
在静态构造中应用皮肤。
在ArrangeOverride布局方法中，将自己放置到右上角。
internal class PromptChrome : Control { static PromptChrome() { DefaultStyleKeyProperty.OverrideMetadata(typeof(PromptChrome), new FrameworkPropertyMetadata(typeof(PromptChrome))); } protected override Size ArrangeOverride(Size arrangeBounds) { this.Width = 34; this.Height = 34; this.HorizontalAlignment = System.Windows.HorizontalAlignment.Right; this.VerticalAlignment = System.Windows.VerticalAlignment.Top; TranslateTransform tt = new TranslateTransform(); tt.X = 10; tt.Y = -10; this.RenderTransform = tt; return base.ArrangeOverride(arrangeBounds); } }
接下来是PromptChrome的皮肤。
提示效果的绘制，绑定PromptCount都在内，可参考注释。
<Style TargetType="{x:Type local:PromptChrome}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type local:PromptChrome}"> <Grid x:Name="container"> <!--最外圈的白色圆框，并对其作阴影效果--> <Ellipse Fill="White"> <Ellipse.Effect> <DropShadowEffect BlurRadius="6" ShadowDepth="6" Opacity="0.8" Direction="270" RenderingBias="Performance"/> </Ellipse.Effect> </Ellipse> <!--内部的上半圆--> <Ellipse Margin="3"> <Ellipse.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Offset="0" Color="#FFF4AEB1"/> <GradientStop Offset="0.5" Color="#FFE3313A"/> <GradientStop Offset="1" Color="#FFE3313A"/> </LinearGradientBrush> </Ellipse.Fill> </Ellipse> <!--内部的下半圆，通过采用Exclude模式合并上下两个圆来完成--> <Path HorizontalAlignment="Center" VerticalAlignment="Center"> <Path.Data> <CombinedGeometry GeometryCombineMode="Exclude" > <CombinedGeometry.Geometry1> <EllipseGeometry Center="14 14" RadiusX="14" RadiusY="14" /> </CombinedGeometry.Geometry1> <CombinedGeometry.Geometry2> <EllipseGeometry Center="14 0" RadiusX="18" RadiusY="14"/> </CombinedGeometry.Geometry2> </CombinedGeometry> </Path.Data> <Path.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Offset="0" Color="#FFDF151F"/> <GradientStop Offset="1" Color="#FFBA0004"/> </LinearGradientBrush> </Path.Fill> </Path> <Viewbox Stretch="Uniform" > <!--绑定上文中的PromptCount属性--> <Label Content="{Binding Path=PromptCount}" x:Name="label" Foreground="White" FontWeight="Bold" FontSize="14" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Viewbox> </Grid> <ControlTemplate.Triggers> <!--使用数据触发器，当PromptCount为0时，隐藏提示--> <DataTrigger Binding="{Binding Path=PromptCount}" Value="0"> <Setter TargetName="container" Property="Visibility" Value="Hidden"/> </DataTrigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>
四、代码
http://download.csdn.net/download/kongxh_1981/9161573
