9

在 C# UWP 中如何制作内阴影效果?

像这样:

我创建了一个只有边框的网格,但阴影填充了整个网格。

<controls:DropShadowPanel     BlurRadius="5"
                              ShadowOpacity="0.5"
                              OffsetX="0"
                              OffsetY="0"
                              Color="Black">
    <Grid BorderBrush="White" BorderThickness="5"/>
</controls:DropShadowPanel>

如何用这个控件制作内阴影效果?

4

3 回答 3

12

请注意,DropShadowPanel可以遮盖 a Rectangle,因此您可以创建一个无填充 Rectangle并将其放置在 a 内,以便仅为的边框DropShadowPanel创建一个扩展阴影。然后,您只需将其放在 a 内并剪辑以切断外部阴影。如果您想要背景颜色,只需将另一个添加到并将其放在.RectangleGridGridRectangleGridDropShadowPanel

示例代码

<Grid Width="400"
      Height="200"
      Margin="24">
    <Grid.Clip>
        <RectangleGeometry Rect="0,0,400,200" />
    </Grid.Clip>
    <Rectangle x:Name="BackgroundColor"
               Fill="LightSteelBlue" />
    <controls:DropShadowPanel x:Name="InnerShadow"
                              HorizontalContentAlignment="Stretch"
                              BlurRadius="15"
                              ShadowOpacity="0.5"
                              Color="Black">
        <Rectangle x:Name="BorderColor"
                   Stroke="LightGray"
                   StrokeThickness="10" />
    </controls:DropShadowPanel>
</Grid>

结果 在此处输入图像描述


关于剪裁

Rect需要注意的一件事是,无论何时更改大小,您都需要手动更新大小Grid。或者,您可以使用新的 Composition API 进行剪辑 -

var visual = ElementCompositionPreview.GetElementVisual(RootGrid);
var compositor = visual.Compositor;
visual.Clip = compositor.CreateInsetClip();
于 2017-07-30T00:43:44.990 回答
0

我遇到了同样的问题,最终为它创建了自己的控件。我基本上创建了一个有四个细边框的网格,每边一个(左、右、上、下),每个都有一个线性渐变画笔来创建阴影效果。像这样:

在此处输入图像描述

这是代码::

using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;

namespace TestInnerDropShadow
{
    [TemplatePart(Name = PARTNAME_LEFT_BORDER, Type = typeof(Border))]
    [TemplatePart(Name = PARTNAME_RIGHT_BORDER, Type = typeof(Border))]
    [TemplatePart(Name = PARTNAME_TOP_BORDER, Type = typeof(Border))]
    [TemplatePart(Name = PARTNAME_BOTTOM_BORDER, Type = typeof(Border))]
    [TemplatePart(Name = PARTNAME_LEFT_GRADIENT, Type = typeof(GradientStop))]
    [TemplatePart(Name = PARTNAME_RIGHT_GRADIENT, Type = typeof(GradientStop))]
    [TemplatePart(Name = PARTNAME_TOP_GRADIENT, Type = typeof(GradientStop))]
    [TemplatePart(Name = PARTNAME_BOTTOM_GRADIENT, Type = typeof(GradientStop))]
    public class InnerDropShadowPanel : ContentControl
    {
        internal const string PARTNAME_LEFT_BORDER = "PART_LeftBorder";
        internal const string PARTNAME_RIGHT_BORDER = "PART_RightBorder";
        internal const string PARTNAME_TOP_BORDER = "PART_TopBorder";
        internal const string PARTNAME_BOTTOM_BORDER = "PART_BottomBorder";

        internal const string PARTNAME_LEFT_GRADIENT = "PART_LeftGradient";
        internal const string PARTNAME_RIGHT_GRADIENT = "PART_RightGradient";
        internal const string PARTNAME_TOP_GRADIENT = "PART_TopGradient";
        internal const string PARTNAME_BOTTOM_GRADIENT = "PART_BottomGradient";

        protected override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
            UpdateShadowDimensions();
            UpdateShadowColor();
        }

        private static void OnPropertyChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
        {
            if (o is InnerDropShadowPanel thisControl)
            {
                var updateLeft = (e.Property == ShadowOpacityProperty || e.Property == BlurRadiusLeftProperty);
                var updateRight = (e.Property == ShadowOpacityProperty || e.Property == BlurRadiusRightProperty);
                var updateTop = (e.Property == ShadowOpacityProperty || e.Property == BlurRadiusTopProperty);
                var updateBottom = (e.Property == ShadowOpacityProperty || e.Property == BlurRadiusBottomProperty);
                thisControl.UpdateShadowDimensions(updateLeft, updateRight, updateTop, updateBottom);
            }
        }

        private void UpdateShadowDimensions(bool updateLeft = true, bool updateRight = true, bool updateTop = true, bool updateBottom = true)
        {
            if (updateLeft && GetTemplateChild(PARTNAME_LEFT_BORDER) is Border left)
            {
                left.Width = BlurRadiusLeft;
                left.Opacity = ShadowOpacity;
            }

            if (updateRight && GetTemplateChild(PARTNAME_RIGHT_BORDER) is Border right)
            {
                right.Width = BlurRadiusRight;
                right.Opacity = ShadowOpacity;
            }

            if (updateTop && GetTemplateChild(PARTNAME_TOP_BORDER) is Border top)
            {
                top.Height = BlurRadiusTop;
                top.Opacity = ShadowOpacity;
            }

            if (updateBottom && GetTemplateChild(PARTNAME_BOTTOM_BORDER) is Border bottom)
            {
                bottom.Height = BlurRadiusBottom;
                bottom.Opacity = ShadowOpacity;
            }
        }

        private void UpdateShadowColor()
        {
            if (GetTemplateChild(PARTNAME_LEFT_GRADIENT) is GradientStop left)
                left.Color = ShadowColor;

            if (GetTemplateChild(PARTNAME_RIGHT_GRADIENT) is GradientStop right)
                right.Color = ShadowColor;

            if (GetTemplateChild(PARTNAME_TOP_GRADIENT) is GradientStop top)
                top.Color = ShadowColor;

            if (GetTemplateChild(PARTNAME_BOTTOM_GRADIENT) is GradientStop bottom)
                bottom.Color = ShadowColor;
        }

        #region ShadowOpacity Dependency Property

        public static readonly DependencyProperty ShadowOpacityProperty = DependencyProperty.Register(
            nameof(ShadowOpacity),
            typeof(double),
            typeof(InnerDropShadowPanel),
            new PropertyMetadata(0d, OnPropertyChanged));

        public double ShadowOpacity
        {
            get => (double)GetValue(ShadowOpacityProperty);
            set => SetValue(ShadowOpacityProperty, value);
        }

        #endregion

        #region ShadowColor Dependency Property

        public static readonly DependencyProperty ShadowColorProperty = DependencyProperty.Register(
            nameof(ShadowColor),
            typeof(Color),
            typeof(InnerDropShadowPanel),
            new PropertyMetadata(Colors.Transparent, OnShadowColorChanged));

        public Color ShadowColor
        {
            get => (Color)GetValue(ShadowColorProperty);
            set => SetValue(ShadowColorProperty, value);
        }

        private static void OnShadowColorChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
        {
            if (o is InnerDropShadowPanel thisControl)
            {
                thisControl.UpdateShadowColor();
            }
        }

        #endregion

        #region BlurRadiusLeft Dependency Property

        public static readonly DependencyProperty BlurRadiusLeftProperty = DependencyProperty.Register(
            nameof(BlurRadiusLeft),
            typeof(double),
            typeof(InnerDropShadowPanel),
            new PropertyMetadata(0d, OnPropertyChanged));

        public double BlurRadiusLeft
        {
            get => (double)GetValue(BlurRadiusLeftProperty);
            set => SetValue(BlurRadiusLeftProperty, value);
        }

        #endregion

        #region BlurRadiusRight Dependency Property

        public static readonly DependencyProperty BlurRadiusRightProperty = DependencyProperty.Register(
            nameof(BlurRadiusRight),
            typeof(double),
            typeof(InnerDropShadowPanel),
            new PropertyMetadata(0d, OnPropertyChanged));

        public double BlurRadiusRight
        {
            get => (double)GetValue(BlurRadiusRightProperty);
            set => SetValue(BlurRadiusRightProperty, value);
        }

        #endregion

        #region BlurRadiusTop Dependency Property

        public static readonly DependencyProperty BlurRadiusTopProperty = DependencyProperty.Register(
            nameof(BlurRadiusTop),
            typeof(double),
            typeof(InnerDropShadowPanel),
            new PropertyMetadata(0d, OnPropertyChanged));

        public double BlurRadiusTop
        {
            get => (double)GetValue(BlurRadiusTopProperty);
            set => SetValue(BlurRadiusTopProperty, value);
        }

        #endregion

        #region BlurRadiusBottom Dependency Property

        public static readonly DependencyProperty BlurRadiusBottomProperty = DependencyProperty.Register(
            nameof(BlurRadiusBottom),
            typeof(double),
            typeof(InnerDropShadowPanel),
            new PropertyMetadata(0d, OnPropertyChanged));

        public double BlurRadiusBottom
        {
            get => (double)GetValue(BlurRadiusBottomProperty);
            set => SetValue(BlurRadiusBottomProperty, value);
        }

        #endregion
    }
}

和控制模板:

    <Style TargetType="local:InnerDropShadowPanel">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:InnerDropShadowPanel">
                    <Grid>

                        <ContentPresenter/>
                        
                        <Border x:Name="PART_LeftBorder"
                                Opacity="0.5"
                                HorizontalAlignment="Left"
                                VerticalAlignment="Stretch">
                            <Border.Background>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                                    <GradientStop Color="Black" Offset="0" x:Name="PART_LeftGradient"/>
                                    <GradientStop Color="Transparent" Offset="0.5"/>
                                </LinearGradientBrush>
                            </Border.Background>
                        </Border>

                        <Border x:Name="PART_RightBorder"
                                Opacity="0.5"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Stretch">
                            <Border.Background>
                                <LinearGradientBrush StartPoint="1,0" EndPoint="0,0">
                                    <GradientStop Color="Black" Offset="0" x:Name="PART_RightGradient"/>
                                    <GradientStop Color="Transparent" Offset="0.5"/>
                                </LinearGradientBrush>
                            </Border.Background>
                        </Border>

                        <Border x:Name="PART_TopBorder"
                                Opacity="0.5"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Top">
                            <Border.Background>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                    <GradientStop Color="Black" Offset="0" x:Name="PART_TopGradient"/>
                                    <GradientStop Color="Transparent" Offset="0.5"/>
                                </LinearGradientBrush>
                            </Border.Background>
                        </Border>

                        <Border x:Name="PART_BottomBorder"
                                Opacity="0.5"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Bottom">
                            <Border.Background>
                                <LinearGradientBrush StartPoint="0,1" EndPoint="0,0">
                                    <GradientStop Color="Black" Offset="0" x:Name="PART_BottomGradient"/>
                                    <GradientStop Color="Transparent" Offset="0.5"/>
                                </LinearGradientBrush>
                            </Border.Background></Border>

                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

使用这样的 XAML:

    <local:InnerDropShadowPanel HorizontalAlignment="Center"
                                BlurRadiusLeft="6"
                                BlurRadiusTop="6"
                                ShadowOpacity="0.4"
                                ShadowColor="Black">
        <TextBlock Text="Test"
                   Foreground="Black"
                   FontSize="120"
                   Margin="50,20"/>
    </local:InnerDropShadowPanel>

你会得到这样的东西:

左侧和顶部阴影

您可以在任何一侧或全部添加阴影,并整体更改阴影的颜色和不透明度:

    <local:InnerDropShadowPanel HorizontalAlignment="Center"
                                BlurRadiusLeft="6"
                                BlurRadiusTop="6"
                                BlurRadiusBottom="50"
                                BlurRadiusRight="100"
                                ShadowOpacity="1"
                                ShadowColor="Red">
        <TextBlock Text="Test"
                   Foreground="Black"
                   FontSize="120"
                   Margin="50,20"/>
    </local:InnerDropShadowPanel>

给你这个:

在每一面投下阴影

我相信您可以修改此控件并通过添加自定义来疯狂,例如,每一面都有不同的颜色或不透明度。不过,对于绝大多数情况,上述解决方案可能就足够了。

于 2021-03-26T03:13:03.227 回答
-2
protected override CreateParams CreateParams
    {
        get
        {
            const int CS_DROPSHADOW = 0x20000;
            CreateParams cp = base.CreateParams;
            cp.ClassStyle |= CS_DROPSHADOW;
            return cp;
        }
    }
于 2018-03-26T13:01:53.637 回答