效果图如下:

代码XAML模板:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:WpfApplication1"
                    xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing">
    <Style TargetType="{x:Type local:OutSidLightControl}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:OutSidLightControl}">
                    <ControlTemplate.Resources>
                        <local:DoubleToGridLenghtConverter x:Key="DoubleToGridLenghtConverter" />
                        <local:ColorToHiddenColorConverter x:Key="ColorToHiddenColorConverter" />
                        <local:LowerColorOpciteConverter x:Key="LowerColorOpciteConverter" />
                        <local:DoubleToCornerRadiusConverter x:Key="DoubleToCornerRadiusConverter" />
                        <Style TargetType="{x:Type ed:Arc}">
                            <Setter Property="StartAngle"
                                    Value="0" />
                            <Setter Property="EndAngle"
                                    Value="90" />
                            <Setter Property="Fill"
                                    Value="Red" />
                            <Setter Property="ArcThickness"
                                    Value="0.5" />
                            <Setter Property="ArcThicknessUnit"
                                    Value="Percent" />
                            <Setter Property="RenderTransformOrigin"
                                    Value="0.5,0.5" />
                            <Setter Property="Fill">
                                <Setter.Value>
                                    <RadialGradientBrush Center="0,1"
                                                         GradientOrigin="0,1"
                                                         RadiusX="1"
                                                         RadiusY="1">
                                        <GradientStop Color="{Binding LightColor, RelativeSource={RelativeSource TemplatedParent}}"
                                                      Offset="0" />
                                        <GradientStop Color="{Binding LightColor, Converter={StaticResource ColorToHiddenColorConverter}, RelativeSource={RelativeSource TemplatedParent}}"
                                                      Offset="1" />
                                    </RadialGradientBrush>
                                </Setter.Value>
                            </Setter>
                        </Style>

                    </ControlTemplate.Resources>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="{TemplateBinding CornerRadius, Converter={StaticResource DoubleToGridLenghtConverter}}" />
                            <RowDefinition Height="{TemplateBinding CornerRadius, Converter={StaticResource DoubleToGridLenghtConverter}}" />
                            <RowDefinition Height="1*" />
                            <RowDefinition Height="{TemplateBinding CornerRadius, Converter={StaticResource DoubleToGridLenghtConverter}}" />
                            <RowDefinition Height="{TemplateBinding CornerRadius, Converter={StaticResource DoubleToGridLenghtConverter}}" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="{TemplateBinding CornerRadius, Converter={StaticResource DoubleToGridLenghtConverter}}" />
                            <ColumnDefinition Width="{TemplateBinding CornerRadius, Converter={StaticResource DoubleToGridLenghtConverter}}" />
                            <ColumnDefinition Width="1*" />
                            <ColumnDefinition Width="{TemplateBinding CornerRadius, Converter={StaticResource DoubleToGridLenghtConverter}}" />
                            <ColumnDefinition Width="{TemplateBinding CornerRadius, Converter={StaticResource DoubleToGridLenghtConverter}}" />
                        </Grid.ColumnDefinitions>
                        <ed:Arc Grid.ColumnSpan="2"
                                Grid.RowSpan="2">
                            <ed:Arc.RenderTransform>
                                <RotateTransform Angle="-90" />
                            </ed:Arc.RenderTransform>
                        </ed:Arc>
                        <ed:Arc Grid.Column="3"
                                Grid.ColumnSpan="2"
                                Grid.RowSpan="2">
                            <ed:Arc.RenderTransform>
                                <RotateTransform Angle="0" />
                            </ed:Arc.RenderTransform>
                        </ed:Arc>
                        <ed:Arc Grid.Row="3"
                                Grid.Column="3"
                                Grid.RowSpan="2"
                                Grid.ColumnSpan="2">
                            <ed:Arc.RenderTransform>
                                <RotateTransform Angle="90" />
                            </ed:Arc.RenderTransform>
                        </ed:Arc>
                        <ed:Arc Grid.Row="3"
                                Grid.RowSpan="2"
                                Grid.ColumnSpan="2">
                            <ed:Arc.RenderTransform>
                                <RotateTransform Angle="180" />
                            </ed:Arc.RenderTransform>
                        </ed:Arc>
                        <Rectangle Grid.Column="2"
                                   Grid.ColumnSpan="1">
                            <Rectangle.Fill>
                                <LinearGradientBrush EndPoint="0.5,1"
                                                     StartPoint="0.5,0">
                                    <GradientStop Offset="1">
                                        <GradientStop.Color>
                                            <MultiBinding Converter="{StaticResource ResourceKey=LowerColorOpciteConverter}">
                                                <Binding RelativeSource="{RelativeSource TemplatedParent}"
                                                         Path="LightColor"></Binding>
                                                <Binding RelativeSource="{RelativeSource TemplatedParent}"
                                                         Path="CornerRadius"></Binding>
                                            </MultiBinding>
                                        </GradientStop.Color>
                                    </GradientStop>
                                    <GradientStop Color="{Binding LightColor, Converter={StaticResource ColorToHiddenColorConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>
                        <Rectangle Grid.Row="2"
                                   Grid.Column="4"
                                   Grid.RowSpan="1">
                            <Rectangle.Fill>
                                <LinearGradientBrush EndPoint="0,0.5"
                                                     StartPoint="1,0.5">
                                    <GradientStop Offset="1">
                                        <GradientStop.Color>
                                            <MultiBinding Converter="{StaticResource ResourceKey=LowerColorOpciteConverter}">
                                                <Binding RelativeSource="{RelativeSource TemplatedParent}"
                                                         Path="LightColor"></Binding>
                                                <Binding RelativeSource="{RelativeSource TemplatedParent}"
                                                         Path="CornerRadius"></Binding>
                                            </MultiBinding>
                                        </GradientStop.Color>
                                    </GradientStop>
                                    <GradientStop Color="{Binding LightColor, Converter={StaticResource ColorToHiddenColorConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>
                        <Rectangle Grid.Row="4"
                                   Grid.Column="2"
                                   Grid.ColumnSpan="1">
                            <Rectangle.Fill>
                                <LinearGradientBrush EndPoint="0.5,0"
                                                     StartPoint="0.5,1">
                                    <GradientStop Offset="1">
                                        <GradientStop.Color>
                                            <MultiBinding Converter="{StaticResource ResourceKey=LowerColorOpciteConverter}">
                                                <Binding RelativeSource="{RelativeSource TemplatedParent}"
                                                         Path="LightColor"></Binding>
                                                <Binding RelativeSource="{RelativeSource TemplatedParent}"
                                                         Path="CornerRadius"></Binding>
                                            </MultiBinding>
                                        </GradientStop.Color>
                                    </GradientStop>
                                    <GradientStop Color="{Binding LightColor, Converter={StaticResource ColorToHiddenColorConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>
                        <Rectangle Grid.Row="2"
                                   Grid.RowSpan="1">
                            <Rectangle.Fill>
                                <LinearGradientBrush EndPoint="1,0.5"
                                                     StartPoint="0,0.5">
                                    <GradientStop Offset="1">
                                        <GradientStop.Color>
                                            <MultiBinding Converter="{StaticResource ResourceKey=LowerColorOpciteConverter}">
                                                <Binding RelativeSource="{RelativeSource TemplatedParent}"
                                                         Path="LightColor"></Binding>
                                                <Binding RelativeSource="{RelativeSource TemplatedParent}"
                                                         Path="CornerRadius"></Binding>
                                            </MultiBinding>
                                        </GradientStop.Color>
                                    </GradientStop>
                                    <GradientStop Color="{Binding LightColor, Converter={StaticResource ColorToHiddenColorConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>
                        <Border Grid.Column="1"
                                Grid.Row="1"
                                CornerRadius="{Binding RelativeSource={RelativeSource TemplatedParent},Path=CornerRadius,Converter={StaticResource DoubleToCornerRadiusConverter}}"
                                Background="{TemplateBinding Background}"
                                Grid.ColumnSpan="3"
                                Grid.RowSpan="3">
                            <ContentPresenter />
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Globalization;
using System.Linq;
using System.Text;
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 WpfApplication1
{

    public class OutSidLightControl : UserControl
    {
        public double CornerRadius
        {
            get { return (double)GetValue(CornerRadiusProperty); }
            set { SetValue(CornerRadiusProperty, value); }
        }
        public static readonly DependencyProperty CornerRadiusProperty =
            DependencyProperty.Register("CornerRadius", typeof(double), typeof(OutSidLightControl), new PropertyMetadata(5d));

        public Color LightColor
        {
            get { return (Color)GetValue(LightColorProperty); }
            set { SetValue(LightColorProperty, value); }
        }
        public static readonly DependencyProperty LightColorProperty =
            DependencyProperty.Register("LightColor", typeof(Color), typeof(OutSidLightControl), new PropertyMetadata(Colors.Orange));

        static OutSidLightControl()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(OutSidLightControl), new FrameworkPropertyMetadata(typeof(OutSidLightControl)));
        }
    }


    #region 转换器-Double转换为Grid长度
    /// <summary>
    /// 转换器-说明
    /// </summary>
    public class DoubleToGridLenghtConverter : IValueConverter
    {
        //正向转换
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value == null)
            {
                return new GridLength(0, GridUnitType.Pixel);
            }
            double length = 0;
            double.TryParse(value.ToString(), out length);
            return new GridLength(length, GridUnitType.Pixel);
        }

        //逆向转换(双向绑定)
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return null; ;
        }
    }
    #endregion

    #region 转换器-颜色转换为透明色
    /// <summary>
    /// 转换器-颜色转换为透明色
    /// </summary>
    public class ColorToHiddenColorConverter : IValueConverter
    {
        //正向转换
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value == null)
            {
                return Colors.Transparent;
            }
            Color color = (Color)value;
            Color colorHidden = Color.FromArgb(0, color.R, color.G, color.B);
            return colorHidden;
        }

        //逆向转换(双向绑定)
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return null; ;
        }
    }
    #endregion

    #region 多条件转换器-透明度降低
    /// <summary>
    /// 多条件-透明度降低
    /// </summary>
    public class LowerColorOpciteConverter : IMultiValueConverter
    {
        //正向转换
        public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
        {
            if (values == null || values.Length != 2)
            {
                return Colors.Transparent;
            }
            Color color = (Color)values[0];
            if (values[1] == null)
                return color;
            double 半径;
            double.TryParse(values[1].ToString(), out 半径);
            Color colorHidden = Color.FromArgb((byte)(color.A * 0.5), color.R, color.G, color.B);
            return colorHidden;
        }

        //逆向转换(双向绑定)
        public object[] ConvertBack(object value, Type[] targetType, object parameter, CultureInfo culture)
        {
            return null; ;
        }
    }
    #endregion


    #region 转换器-Double转CornerRadius
    /// <summary>
    /// 转换器-Double转CornerRadius
    /// </summary>
    public class DoubleToCornerRadiusConverter : IValueConverter
    {
        //正向转换
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value == null)
            {
                return new CornerRadius(0);
            }
            double radius;
            double.TryParse(value.ToString(), out radius);
            return new CornerRadius(radius);
        }

        //逆向转换(双向绑定)
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return null; ;
        }
    }
    #endregion

}

  

posted on 2018-02-02 16:34  wq8438  阅读(678)  评论(0)    收藏  举报