212 lines
9.3 KiB
C#
212 lines
9.3 KiB
C#
using System.Windows.Media.Effects;
|
||
|
||
namespace Melskin.Controls.Decorations;
|
||
|
||
/// <summary>
|
||
/// GlassChromeDecorator 类用于创建具有玻璃效果的装饰器。该类继承自 Decorator，提供了背景、边框画刷、边框厚度、圆角半径以及外部阴影效果等属性，以实现现代化且美观的用户界面元素。
|
||
/// </summary>
|
||
/// <remarks>
|
||
/// 通过设置不同的属性值，可以轻松定制具有透明度和柔和边缘的视觉效果，适合用于需要增强视觉吸引力的应用程序窗口或控件装饰。
|
||
/// </remarks>
|
||
/// <example>
|
||
/// <code>
|
||
/// xmlns:controls="clr-namespace:Melskin.Controls"
|
||
/// <GlassChromeDecorator Width="180" Height="220"
|
||
/// HorizontalAlignment="Left" VerticalAlignment="Bottom"
|
||
/// Margin="50"
|
||
/// CornerRadius="10"
|
||
/// Background="#40FF0000">
|
||
/// <!-- 半透明红色背景 -->
|
||
/// <TextBlock Tip = "Mini Card" Foreground="White" FontSize="16"/>
|
||
///</GlassChromeDecorator>
|
||
/// </code>
|
||
/// <![CDATA[]]>
|
||
/// </example>
|
||
public class GlassChromeDecorator : Decorator
|
||
{
|
||
// 我们使用依赖属性，这样就可以在 XAML 中设置它们，并支持数据绑定。
|
||
|
||
#region Dependency Properties
|
||
|
||
/// <summary>
|
||
///
|
||
/// </summary>
|
||
public static readonly DependencyProperty BackgroundProperty =
|
||
DependencyProperty.Register(nameof(Background), typeof(Brush), typeof(GlassChromeDecorator),
|
||
new FrameworkPropertyMetadata(new SolidColorBrush(Color.FromArgb(0x26, 0xFF, 0xFF, 0xFF)), FrameworkPropertyMetadataOptions.AffectsRender));
|
||
|
||
/// <summary>
|
||
/// 表示控件背景的画刷。
|
||
/// </summary>
|
||
/// <remarks>
|
||
/// 该属性定义了GlassChromeDecorator控件的背景颜色和样式。当此属性发生变化时，将影响控件的渲染。
|
||
/// 默认值为一个具有特定透明度的颜色的SolidColorBrush。
|
||
/// </remarks>
|
||
public Brush Background
|
||
{
|
||
get => (Brush)GetValue(BackgroundProperty);
|
||
set => SetValue(BackgroundProperty, value);
|
||
}
|
||
|
||
/// <summary>
|
||
/// 表示用于绘制边框的画刷的依赖属性。
|
||
/// </summary>
|
||
/// <remarks>
|
||
/// 该属性定义了GlassChromeDecorator控件边框的颜色和样式。当此属性发生变化时，将影响控件的渲染。
|
||
/// 默认值为一个具有特定颜色透明度的SolidColorBrush。
|
||
/// </remarks>
|
||
public static readonly DependencyProperty BorderBrushProperty =
|
||
DependencyProperty.Register(nameof(BorderBrush), typeof(Brush), typeof(GlassChromeDecorator),
|
||
new FrameworkPropertyMetadata(new SolidColorBrush(Color.FromArgb(0x4C, 0xFF, 0xFF, 0xFF)), FrameworkPropertyMetadataOptions.AffectsRender));
|
||
|
||
/// <summary>
|
||
/// 获取或设置用于绘制边框的画刷。
|
||
/// </summary>
|
||
/// <remarks>
|
||
/// 此属性允许您指定一个画刷，该画刷将用于渲染控件的边框。通过修改此属性，您可以改变边框的颜色、渐变或其他视觉效果。
|
||
/// 默认值为半透明的白色（ARGB: 0x4CFFFFFF）。
|
||
/// </remarks>
|
||
public Brush BorderBrush
|
||
{
|
||
get => (Brush)GetValue(BorderBrushProperty);
|
||
set => SetValue(BorderBrushProperty, value);
|
||
}
|
||
|
||
/// <summary>
|
||
/// 表示边框厚度的依赖属性。此属性影响渲染，其默认值为 1。
|
||
/// </summary>
|
||
public static readonly DependencyProperty BorderThicknessProperty =
|
||
DependencyProperty.Register(nameof(BorderThickness), typeof(Thickness), typeof(GlassChromeDecorator),
|
||
new FrameworkPropertyMetadata(new Thickness(1), FrameworkPropertyMetadataOptions.AffectsRender));
|
||
|
||
/// <summary>
|
||
///
|
||
/// </summary>
|
||
public Thickness BorderThickness
|
||
{
|
||
get => (Thickness)GetValue(BorderThicknessProperty);
|
||
set => SetValue(BorderThicknessProperty, value);
|
||
}
|
||
|
||
/// <summary>
|
||
///
|
||
/// </summary>
|
||
public static readonly DependencyProperty CornerRadiusProperty =
|
||
DependencyProperty.Register(nameof(CornerRadius), typeof(CornerRadius), typeof(GlassChromeDecorator),
|
||
new FrameworkPropertyMetadata(new CornerRadius(20), FrameworkPropertyMetadataOptions.AffectsRender));
|
||
|
||
/// <summary>
|
||
///
|
||
/// </summary>
|
||
public CornerRadius CornerRadius
|
||
{
|
||
get => (CornerRadius)GetValue(CornerRadiusProperty);
|
||
set => SetValue(CornerRadiusProperty, value);
|
||
}
|
||
|
||
/// <summary>
|
||
/// 表示控件外部阴影效果的属性。
|
||
/// </summary>
|
||
/// <remarks>
|
||
/// 该属性定义了GlassChromeDecorator控件的外部阴影效果。通过设置此属性，可以自定义控件的阴影外观，如阴影深度、模糊半径和颜色等。默认值为一个具有特定参数的DropShadowEffect实例。
|
||
/// 当此属性发生变化时，将影响控件的渲染。
|
||
/// </remarks>
|
||
public static readonly DependencyProperty OuterShadowEffectProperty =
|
||
DependencyProperty.Register(nameof(OuterShadowEffect), typeof(Effect), typeof(GlassChromeDecorator),
|
||
new PropertyMetadata(new DropShadowEffect { ShadowDepth = 8, BlurRadius = 32, Color = Color.FromArgb(0x1A, 0, 0, 0) }));
|
||
|
||
/// <summary>
|
||
/// 表示控件外阴影效果。
|
||
/// </summary>
|
||
/// <remarks>
|
||
/// 该属性定义了GlassChromeDecorator控件的外阴影样式。通过设置不同的Effect对象，可以改变控件边缘的阴影外观。
|
||
/// 默认值为一个具有特定模糊半径、阴影深度和颜色的DropShadowEffect实例。
|
||
/// 当此属性发生变化时，将影响控件的整体视觉表现。
|
||
/// </remarks>
|
||
public Effect OuterShadowEffect
|
||
{
|
||
get => (Effect)GetValue(OuterShadowEffectProperty);
|
||
set => SetValue(OuterShadowEffectProperty, value);
|
||
}
|
||
|
||
#endregion
|
||
|
||
// 构造函数中应用外阴影
|
||
/// <summary>
|
||
/// GlassChromeDecorator 类用于创建具有玻璃效果和自定义边框的装饰器。此控件扩展了 WPF 的 Decorator 类，允许用户通过设置属性来自定义背景色、边框颜色、边框厚度、圆角半径以及外阴影效果。
|
||
/// </summary>
|
||
public GlassChromeDecorator()
|
||
{
|
||
// 将外阴影效果绑定到控件自身
|
||
Effect = OuterShadowEffect;
|
||
}
|
||
|
||
|
||
// 关键的 OnRender 方法，所有绘图逻辑都在这里
|
||
/// <inheritdoc />
|
||
protected override void OnRender(DrawingContext dc)
|
||
{
|
||
// 确保我们有有效绘制区域
|
||
if (RenderSize.Width <= 0 || RenderSize.Height <= 0)
|
||
return;
|
||
|
||
var bounds = new Rect(0, 0, RenderSize.Width, RenderSize.Height);
|
||
var pen = new Pen(BorderBrush, BorderThickness.Left);
|
||
var cornerRadius = CornerRadius;
|
||
|
||
// 1. 绘制主背景和边框
|
||
dc.DrawRoundedRectangle(Background, pen, bounds, cornerRadius.TopLeft, cornerRadius.TopRight);
|
||
|
||
// 2. 绘制内部阴影/高光层
|
||
var insetShadowBrush = new LinearGradientBrush(
|
||
new GradientStopCollection
|
||
{
|
||
new GradientStop(Color.FromArgb(0x80, 0xFF, 0xFF, 0xFF), 0),
|
||
new GradientStop(Colors.Transparent, 0.01),
|
||
new GradientStop(Colors.Transparent, 0.99),
|
||
new GradientStop(Color.FromArgb(0x1A, 0xFF, 0xFF, 0xFF), 1)
|
||
},
|
||
new Point(0, 0), new Point(0, 1));
|
||
dc.DrawRoundedRectangle(insetShadowBrush, null, bounds, cornerRadius.TopLeft, cornerRadius.TopRight);
|
||
|
||
// 3. 绘制内部径向辉光
|
||
//var innerGlowBrush = new RadialGradientBrush(
|
||
// new GradientStopCollection
|
||
// {
|
||
// new GradientStop(Color.FromArgb(0x99, 0xFF, 0xFF, 0xFF), 0),
|
||
// new GradientStop(Colors.Transparent, 1)
|
||
// })
|
||
//{
|
||
// Center = new Point(0.5, 0.5),
|
||
// RadiusX = 1.5,
|
||
// RadiusY = 1.5
|
||
//};
|
||
// 将辉光绘制在一个稍小的矩形内
|
||
//var glowBounds = new Rect(bounds.X + 10, bounds.Y + 10, bounds.Width - 20, bounds.Height - 20);
|
||
//dc.DrawRoundedRectangle(innerGlowBrush, null, glowBounds, cornerRadius.TopLeft, cornerRadius.TopRight);
|
||
|
||
//// 4. 绘制顶部高光线 (模拟 ::before)
|
||
//var topHighlightBrush = new LinearGradientBrush(
|
||
// new GradientStopCollection
|
||
// {
|
||
// new GradientStop(Colors.Transparent, 0),
|
||
// new GradientStop(Color.FromArgb(0xCC, 0xFF, 0xFF, 0xFF), 0.5),
|
||
// new GradientStop(Colors.Transparent, 1)
|
||
// },
|
||
// new Point(0, 0.5), new Point(1, 0.5));
|
||
//// 绘制一个1像素高的矩形
|
||
//dc.DrawRectangle(topHighlightBrush, null, new Rect(bounds.X + 1, bounds.Y + 1, bounds.Width - 2, 1));
|
||
|
||
//// 5. 绘制左侧高光线 (模拟 ::after)
|
||
//var leftHighlightBrush = new LinearGradientBrush(
|
||
// new GradientStopCollection
|
||
// {
|
||
// new GradientStop(Color.FromArgb(0xCC, 0xFF, 0xFF, 0xFF), 0),
|
||
// new GradientStop(Colors.Transparent, 0.5),
|
||
// new GradientStop(Color.FromArgb(0x4C, 0xFF, 0xFF, 0xFF), 1)
|
||
// },
|
||
// new Point(0.5, 0), new Point(0.5, 1));
|
||
// 绘制一个1像素宽的矩形
|
||
//dc.DrawRectangle(leftHighlightBrush, null, new Rect(bounds.X + 1, bounds.Y + 1, 1, bounds.Height - 2));
|
||
}
|
||
} |