2025-08-12 23:08:54 +08:00
|
|
|
|
using System.Windows.Media.Effects;
|
|
|
|
|
|
|
2026-01-02 17:30:41 +08:00
|
|
|
|
namespace Melskin.Controls.Decorations;
|
2025-08-12 23:08:54 +08:00
|
|
|
|
|
|
|
|
|
|
/// <summary>
|
|
|
|
|
|
/// GlassChromeDecorator 类用于创建具有玻璃效果的装饰器。该类继承自 Decorator,提供了背景、边框画刷、边框厚度、圆角半径以及外部阴影效果等属性,以实现现代化且美观的用户界面元素。
|
|
|
|
|
|
/// </summary>
|
|
|
|
|
|
/// <remarks>
|
|
|
|
|
|
/// 通过设置不同的属性值,可以轻松定制具有透明度和柔和边缘的视觉效果,适合用于需要增强视觉吸引力的应用程序窗口或控件装饰。
|
|
|
|
|
|
/// </remarks>
|
|
|
|
|
|
/// <example>
|
|
|
|
|
|
/// <code>
|
2026-01-02 17:30:41 +08:00
|
|
|
|
/// xmlns:controls="clr-namespace:Melskin.Controls"
|
2025-10-04 08:52:23 +08:00
|
|
|
|
/// <GlassChromeDecorator Width="180" Height="220"
|
2025-08-12 23:08:54 +08:00
|
|
|
|
/// HorizontalAlignment="Left" VerticalAlignment="Bottom"
|
|
|
|
|
|
/// Margin="50"
|
2025-08-20 12:10:13 +08:00
|
|
|
|
/// CornerRadius="10"
|
2025-08-12 23:08:54 +08:00
|
|
|
|
/// Background="#40FF0000">
|
|
|
|
|
|
/// <!-- 半透明红色背景 -->
|
2026-03-01 10:42:42 +08:00
|
|
|
|
/// <TextBlock Tip = "Mini Card" Foreground="White" FontSize="16"/>
|
2025-10-04 08:52:23 +08:00
|
|
|
|
///</GlassChromeDecorator>
|
2025-08-12 23:08:54 +08:00
|
|
|
|
/// </code>
|
|
|
|
|
|
/// <![CDATA[]]>
|
|
|
|
|
|
/// </example>
|
|
|
|
|
|
public class GlassChromeDecorator : Decorator
|
2025-07-31 20:12:24 +08:00
|
|
|
|
{
|
2025-08-12 23:08:54 +08:00
|
|
|
|
// 我们使用依赖属性,这样就可以在 XAML 中设置它们,并支持数据绑定。
|
|
|
|
|
|
|
|
|
|
|
|
#region Dependency Properties
|
|
|
|
|
|
|
2025-08-20 12:10:35 +08:00
|
|
|
|
/// <summary>
|
|
|
|
|
|
///
|
|
|
|
|
|
/// </summary>
|
2025-08-12 23:08:54 +08:00
|
|
|
|
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));
|
|
|
|
|
|
|
2025-08-20 12:10:35 +08:00
|
|
|
|
/// <summary>
|
|
|
|
|
|
/// 表示控件背景的画刷。
|
|
|
|
|
|
/// </summary>
|
|
|
|
|
|
/// <remarks>
|
|
|
|
|
|
/// 该属性定义了GlassChromeDecorator控件的背景颜色和样式。当此属性发生变化时,将影响控件的渲染。
|
|
|
|
|
|
/// 默认值为一个具有特定透明度的颜色的SolidColorBrush。
|
|
|
|
|
|
/// </remarks>
|
2025-08-12 23:08:54 +08:00
|
|
|
|
public Brush Background
|
|
|
|
|
|
{
|
|
|
|
|
|
get => (Brush)GetValue(BackgroundProperty);
|
|
|
|
|
|
set => SetValue(BackgroundProperty, value);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2025-08-20 12:10:35 +08:00
|
|
|
|
/// <summary>
|
|
|
|
|
|
/// 表示用于绘制边框的画刷的依赖属性。
|
|
|
|
|
|
/// </summary>
|
|
|
|
|
|
/// <remarks>
|
|
|
|
|
|
/// 该属性定义了GlassChromeDecorator控件边框的颜色和样式。当此属性发生变化时,将影响控件的渲染。
|
|
|
|
|
|
/// 默认值为一个具有特定颜色透明度的SolidColorBrush。
|
|
|
|
|
|
/// </remarks>
|
2025-08-12 23:08:54 +08:00
|
|
|
|
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));
|
|
|
|
|
|
|
2025-08-20 12:10:35 +08:00
|
|
|
|
/// <summary>
|
|
|
|
|
|
/// 获取或设置用于绘制边框的画刷。
|
|
|
|
|
|
/// </summary>
|
|
|
|
|
|
/// <remarks>
|
|
|
|
|
|
/// 此属性允许您指定一个画刷,该画刷将用于渲染控件的边框。通过修改此属性,您可以改变边框的颜色、渐变或其他视觉效果。
|
|
|
|
|
|
/// 默认值为半透明的白色(ARGB: 0x4CFFFFFF)。
|
|
|
|
|
|
/// </remarks>
|
2025-08-12 23:08:54 +08:00
|
|
|
|
public Brush BorderBrush
|
|
|
|
|
|
{
|
|
|
|
|
|
get => (Brush)GetValue(BorderBrushProperty);
|
|
|
|
|
|
set => SetValue(BorderBrushProperty, value);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2025-08-20 12:10:35 +08:00
|
|
|
|
/// <summary>
|
|
|
|
|
|
/// 表示边框厚度的依赖属性。此属性影响渲染,其默认值为 1。
|
|
|
|
|
|
/// </summary>
|
2025-08-12 23:08:54 +08:00
|
|
|
|
public static readonly DependencyProperty BorderThicknessProperty =
|
|
|
|
|
|
DependencyProperty.Register(nameof(BorderThickness), typeof(Thickness), typeof(GlassChromeDecorator),
|
|
|
|
|
|
new FrameworkPropertyMetadata(new Thickness(1), FrameworkPropertyMetadataOptions.AffectsRender));
|
|
|
|
|
|
|
2025-08-20 12:10:35 +08:00
|
|
|
|
/// <summary>
|
|
|
|
|
|
///
|
|
|
|
|
|
/// </summary>
|
2025-08-12 23:08:54 +08:00
|
|
|
|
public Thickness BorderThickness
|
|
|
|
|
|
{
|
|
|
|
|
|
get => (Thickness)GetValue(BorderThicknessProperty);
|
|
|
|
|
|
set => SetValue(BorderThicknessProperty, value);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2025-08-20 12:10:35 +08:00
|
|
|
|
/// <summary>
|
|
|
|
|
|
///
|
|
|
|
|
|
/// </summary>
|
2025-08-12 23:08:54 +08:00
|
|
|
|
public static readonly DependencyProperty CornerRadiusProperty =
|
|
|
|
|
|
DependencyProperty.Register(nameof(CornerRadius), typeof(CornerRadius), typeof(GlassChromeDecorator),
|
|
|
|
|
|
new FrameworkPropertyMetadata(new CornerRadius(20), FrameworkPropertyMetadataOptions.AffectsRender));
|
|
|
|
|
|
|
2025-08-20 12:10:35 +08:00
|
|
|
|
/// <summary>
|
|
|
|
|
|
///
|
|
|
|
|
|
/// </summary>
|
2025-08-12 23:08:54 +08:00
|
|
|
|
public CornerRadius CornerRadius
|
|
|
|
|
|
{
|
|
|
|
|
|
get => (CornerRadius)GetValue(CornerRadiusProperty);
|
|
|
|
|
|
set => SetValue(CornerRadiusProperty, value);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2025-08-20 12:10:35 +08:00
|
|
|
|
/// <summary>
|
|
|
|
|
|
/// 表示控件外部阴影效果的属性。
|
|
|
|
|
|
/// </summary>
|
|
|
|
|
|
/// <remarks>
|
|
|
|
|
|
/// 该属性定义了GlassChromeDecorator控件的外部阴影效果。通过设置此属性,可以自定义控件的阴影外观,如阴影深度、模糊半径和颜色等。默认值为一个具有特定参数的DropShadowEffect实例。
|
|
|
|
|
|
/// 当此属性发生变化时,将影响控件的渲染。
|
|
|
|
|
|
/// </remarks>
|
2025-08-12 23:08:54 +08:00
|
|
|
|
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) }));
|
|
|
|
|
|
|
2025-08-20 12:10:35 +08:00
|
|
|
|
/// <summary>
|
|
|
|
|
|
/// 表示控件外阴影效果。
|
|
|
|
|
|
/// </summary>
|
|
|
|
|
|
/// <remarks>
|
|
|
|
|
|
/// 该属性定义了GlassChromeDecorator控件的外阴影样式。通过设置不同的Effect对象,可以改变控件边缘的阴影外观。
|
|
|
|
|
|
/// 默认值为一个具有特定模糊半径、阴影深度和颜色的DropShadowEffect实例。
|
|
|
|
|
|
/// 当此属性发生变化时,将影响控件的整体视觉表现。
|
|
|
|
|
|
/// </remarks>
|
2025-08-12 23:08:54 +08:00
|
|
|
|
public Effect OuterShadowEffect
|
|
|
|
|
|
{
|
|
|
|
|
|
get => (Effect)GetValue(OuterShadowEffectProperty);
|
|
|
|
|
|
set => SetValue(OuterShadowEffectProperty, value);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#endregion
|
|
|
|
|
|
|
|
|
|
|
|
// 构造函数中应用外阴影
|
2025-08-20 12:10:35 +08:00
|
|
|
|
/// <summary>
|
|
|
|
|
|
/// GlassChromeDecorator 类用于创建具有玻璃效果和自定义边框的装饰器。此控件扩展了 WPF 的 Decorator 类,允许用户通过设置属性来自定义背景色、边框颜色、边框厚度、圆角半径以及外阴影效果。
|
|
|
|
|
|
/// </summary>
|
2025-08-12 23:08:54 +08:00
|
|
|
|
public GlassChromeDecorator()
|
|
|
|
|
|
{
|
|
|
|
|
|
// 将外阴影效果绑定到控件自身
|
|
|
|
|
|
Effect = OuterShadowEffect;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 关键的 OnRender 方法,所有绘图逻辑都在这里
|
2025-08-20 12:10:35 +08:00
|
|
|
|
/// <inheritdoc />
|
2025-08-12 23:08:54 +08:00
|
|
|
|
protected override void OnRender(DrawingContext dc)
|
2025-07-31 20:12:24 +08:00
|
|
|
|
{
|
2025-08-24 13:49:55 +08:00
|
|
|
|
// 确保我们有有效绘制区域
|
2025-08-12 23:08:54 +08:00
|
|
|
|
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));
|
2025-07-31 20:12:24 +08:00
|
|
|
|
}
|
2025-08-12 23:08:54 +08:00
|
|
|
|
}
|