效果图如下:

代码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
}
浙公网安备 33010602011771号