WPF C#仿ios 安卓 红点消息提示

原文: WPF C#仿ios 安卓 红点消息提示

先把效果贴出来，大家看看。

代码下载地址：

http://download.csdn.net/detail/candyvoice/9730751

点击+，按钮上的红点提示会增加1，点击-，按钮上的红点提示会减去1；点击E，显示或者隐藏红点提示。

这里主要利用了自定义装饰件（Adorner）。

参考的主要文章是下面这个文章，这里由于我只需要在自己已有的button上添加一个红点提示，所以精简了下面的内容。

http://blog.csdn.net/kongxh_1981/article/details/48955693

我的理解是，PromptAdorner（继承Adroner）管理PromptChrome（继承Control）。说白了就是PromptAdorner负责装饰，装饰些什么东西则交给PromptChrome来完成。

具体的理论请参考下面

http://blog.csdn.net/kongxh_1981/article/details/48955497

说一下具体的做法。

首先添加PromptChrome.cs和PromptAdorner.cs。代码如下

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Data;
using System.Windows.Controls;
using System.Windows.Media;

namespace WpfApplication2
{
    internal class PromptChrome : Control
    {
        static PromptChrome()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(PromptChrome), new FrameworkPropertyMetadata(typeof(PromptChrome)));
        }

        protected override Size ArrangeOverride(Size arrangeBounds)
        {

            this.Width = 25;
            this.Height = 25;

            this.HorizontalAlignment = System.Windows.HorizontalAlignment.Right;
            this.VerticalAlignment = System.Windows.VerticalAlignment.Top;

            TranslateTransform tt = new TranslateTransform();
            tt.X = 5;
            tt.Y = 5;
            this.RenderTransform = tt;

            return base.ArrangeOverride(arrangeBounds);
        }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication2
{
    public class PromptAdorner : Adorner
    {

        public static readonly DependencyProperty PromptCountProperty =
            DependencyProperty.RegisterAttached("PromptCount", typeof(int), typeof(PromptAdorner),
            new FrameworkPropertyMetadata(0, new PropertyChangedCallback(PromptCountChangedCallBack), new CoerceValueCallback(CoercePromptCountCallback)));

        public static int GetPromptCount(DependencyObject obj)
        {
            return (int)obj.GetValue(PromptCountProperty);
        }

        public static void SetPromptCount(DependencyObject obj, int value)
        {
            obj.SetValue(PromptCountProperty, value);
        }


        public static readonly DependencyProperty IsPromptEnabledProperty =
            DependencyProperty.RegisterAttached("IsPromptEnabled", typeof(bool), typeof(PromptAdorner),
            new FrameworkPropertyMetadata(false, new PropertyChangedCallback(IsPromptEnabledChangedCallBack), null));

        public static bool GetIsPromptEnabled(DependencyObject obj)
        {
            return (bool)obj.GetValue(IsPromptEnabledProperty);
        }

        public static void SetIsPromptEnabled(DependencyObject obj, bool value)
        {
            obj.SetValue(IsPromptEnabledProperty, value);
        }


        private static object CoercePromptCountCallback(DependencyObject d, object value)
        {
            int promptCount = (int)value;
            promptCount = Math.Max(0, promptCount);

            return promptCount;
        }

        public static void PromptCountChangedCallBack(DependencyObject d, DependencyPropertyChangedEventArgs e) { }

        public static void IsPromptEnabledChangedCallBack(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var source = d as FrameworkElement;

            bool isEnabled = (bool)e.NewValue;
            if (isEnabled)
            {
                //装饰件可用，添加装饰件

                AdornerLayer layer = AdornerLayer.GetAdornerLayer(source);
                if (layer != null)
                {
                    //能够获取装饰层，说明已经load过了，直接生成装饰件
                    var adorner = new PromptAdorner(source);
                    layer.Add(adorner);
                }
                else
                {
                    //layer为null，说明还未load过（整个可视化树中没有装饰层的情况不考虑）
                    //在控件的loaded事件内生成装饰件
                    source.Loaded += (s1, e1) =>
                    {
                        var adorner = new PromptAdorner(source);
                        AdornerLayer.GetAdornerLayer(source).Add(adorner);
                    };
                }
            }
            else
            {
                //装饰件不可用，移除装饰件
                AdornerLayer layer = AdornerLayer.GetAdornerLayer(source);
                if (layer != null)
                {
                    Adorner[] AllAdorners = layer.GetAdorners(source);
                    if (AllAdorners != null)
                    {
                        IEnumerable<Adorner> desAdorners = AllAdorners.Where(p => p is PromptAdorner);
                        if (desAdorners != null && desAdorners.Count() > 0)
                        {
                            desAdorners.ToList().ForEach(p => layer.Remove(p));
                        }
                    }
                }
            }

        }


        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;
    }
}

2 添加好之后，先编译一下程序，再 在MainWindow里拖上三个button，先拖一个PromptChrome控件到窗口的任意位置

新建一个Themes文件夹，添加资源词典，Generic.xaml

定义样式PromptChrome，Generic.xaml具体代码如下：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:WpfApplication2">

    <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="7 7"  RadiusX="7" RadiusY="7" />
                                    </CombinedGeometry.Geometry1>

                                    <CombinedGeometry.Geometry2>
                                        <EllipseGeometry Center="7 0"  RadiusX="9" RadiusY="7"/>
                                    </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=(local:PromptAdorner.PromptCount)}" 
                                   x:Name="label"
                                   Foreground="White"
                                   FontWeight="Bold"
                                   FontSize="10"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center"/>
                        </Viewbox>
                    </Grid>

                    <ControlTemplate.Triggers>
                        <!--使用数据触发器，当PromptCount为0时，隐藏提示-->
                        <DataTrigger Binding="{Binding Path=(local:PromptAdorner.PromptCount)}" Value="0">
                            <Setter TargetName="container" Property="Visibility" Value="Hidden"/>
                        </DataTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

3编辑MainWindow.xaml中的代码

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication2"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Button x:Name="button" Content="按钮" HorizontalAlignment="Left" Margin="209,67,0,0" VerticalAlignment="Top" Width="75"
                local:PromptAdorner.IsPromptEnabled="True"
                local:PromptAdorner.PromptCount="0" Click="button_Click" IsHitTestVisible="True"/>
        <Button x:Name="button1" Content="+" HorizontalAlignment="Left" Margin="89,201,0,0" VerticalAlignment="Top" Width="75" Click="button1_Click"/>
        <Button x:Name="button2" Content="-" HorizontalAlignment="Left" Margin="214,202,0,0" VerticalAlignment="Top" Width="75" Click="button2_Click"/>
        <Button x:Name="button3" Content="E" HorizontalAlignment="Left" Margin="339,202,0,0" VerticalAlignment="Top" Width="75" Click="button3_Click"/>



    </Grid>
</Window>

实现+、-、E按钮的作用，MainWindow.xaml.cs代码如下

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication2
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            int promptCount = (int)button.GetValue(PromptAdorner.PromptCountProperty);
            button.SetValue(PromptAdorner.PromptCountProperty, ++promptCount);

        }

        private void button2_Click(object sender, RoutedEventArgs e)
        {
            int promptCount = (int)button.GetValue(PromptAdorner.PromptCountProperty);
            button.SetValue(PromptAdorner.PromptCountProperty, --promptCount);

        }

        private void button3_Click(object sender, RoutedEventArgs e)
        {
            bool isEnable = (bool)button.GetValue(PromptAdorner.IsPromptEnabledProperty);
            button.SetValue(PromptAdorner.IsPromptEnabledProperty, !isEnable);

        }

        private void button_Click(object sender, RoutedEventArgs e)
        {

        }
    }
}

编译通过后，删掉之前拖动到窗口任意位置的PromptChrome控件，再次编译通过，就可以实现在普通的button上添加红点提示信息。

中间犯过几个错误，就是在编辑Generic.xaml的时候，总是出现Binding="{Binding Path=(local:PromptAdorner.PromptCount)}无法找到的情况，这里应该是先拖一个自定义PromptChrome控件到窗口，后面删掉即可。

代码下载地址：

http://download.csdn.net/detail/candyvoice/9730751