效果图如下:
代码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 }