Question

当我向一个矩形添加一个drops阴影位图效果时，这些阴影会考虑到矩形的透明度（有意义）。有没有办法在透明矩形上渲染阴影'就好像'矩形是不透明的？即会出现的是一个长方形的“洞”，带有阴影。

以下是带有阴影的透明矩形的XAML - 不显示任何内容：

<Rectangle Fill="Transparent" Margin="10" Width="100" Height="100">
  <Rectangle.BitmapEffect>
    <DropShadowBitmapEffect/>
  </Rectangle.BitmapEffect>
</Rectangle>

Answer 1

将其放入Kaxaml。它创建一个大小为500x500的透明矩形，带有SystemDropShadowChrome装饰器。投影的剪辑设置为排除Rectangle的区域。

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:theme="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Canvas>
        <theme:SystemDropShadowChrome Margin="0,0,5,5">
            <Rectangle Width="500" Height="500" Fill="transparent"/>
            <theme:SystemDropShadowChrome.Clip>
                <CombinedGeometry GeometryCombineMode="Exclude">
                    <CombinedGeometry.Geometry1>
                        <RectangleGeometry Rect="0,0,505,505"/>
                    </CombinedGeometry.Geometry1>
                    <CombinedGeometry.Geometry2>
                        <RectangleGeometry Rect="0,0,500,500"/>
                    </CombinedGeometry.Geometry2>
                </CombinedGeometry>
            </theme:SystemDropShadowChrome.Clip>
        </theme:SystemDropShadowChrome>
    </Canvas>
</Page>

如果您希望投影具有圆角，请将CornerRadius的{{1}}设置为任意（假设为10），然后设置SystemDropShadowChrome的{{1}}和Geometry1值为10，然后每个Left的{{1}}和Top为10。

Answer 2

我希望看到更好的解决方案，但这是我通常做的事情（提防：提前令人毛骨悚然的代码）。

将矩形包裹为三到四个矩形，并使用笔触颜色进行播放，使其变为更暗和更暗，因为它会变为原始矩形。这是代码：

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Grid>
      <Rectangle
         Width="106"
         Height="106"
         Stroke="#10000000"
         StrokeThickness="1"/>
      <Rectangle
         Width="104"
         Height="104"
         Stroke="#5C000000"
         StrokeThickness="1"/>
      <Rectangle
         Width="102"
         Height="102"
         Stroke="#AC000000"
         StrokeThickness="1"/>
      <Rectangle
         Width="100"
         Height="100"
         Fill="Transparent"
         Stroke="#FF000000"
         StrokeThickness="1">
      </Rectangle>
   </Grid>
</Page>

这会给你：

alt text http://img521.imageshack.us/img521/7664/shadowo.jpg

另一种方法是使用边框 - 它更好，因为当你将它们放在Grid中时，你不必指定尺寸。

最好的方法（从未见过实现过）：自定义像素着色器，可以满足您的需求。

Answer 3

嗯，这是一种在不使用位图效果的情况下实现矩形“阴影”的冗长方法。在这种情况下，'阴影矩形'的中心是彩色的，但它可以设置为透明，以给你一个'光环'样式投影（即，一直相等 - 不偏移）

<UserControl x:Class="RectShadow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:System="clr-namespace:System;assembly=mscorlib">
    <UserControl.Resources>
        <System:Double x:Key="CornerSize">5</System:Double>
        <Color x:Key="ShadowColor">#60000000</Color>
        <Color x:Key="TransparentColor">#00000000</Color>
    </UserControl.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>   
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition/>
            <ColumnDefinition Width="auto"/>
        </Grid.ColumnDefinitions>

        <Rectangle Width="{StaticResource CornerSize}" Height="{StaticResource CornerSize}">
            <Rectangle.Fill>
                <RadialGradientBrush Center="1,1" GradientOrigin="1,1" RadiusX="1" RadiusY="1">
                    <GradientStop Color="{StaticResource ShadowColor}"/>
                    <GradientStop Offset="1" Color="{StaticResource TransparentColor}"/>
                </RadialGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

        <Rectangle Grid.Row="2" Grid.Column="2" Width="{StaticResource CornerSize}" Height="{StaticResource CornerSize}">
            <Rectangle.Fill>
                <RadialGradientBrush Center="0,0" GradientOrigin="0,0" RadiusX="1" RadiusY="1">
                    <GradientStop Color="{StaticResource ShadowColor}"/>
                    <GradientStop Offset="1" Color="{StaticResource TransparentColor}"/>
                </RadialGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

        <Rectangle Grid.Row="0" Grid.Column="2" Width="{StaticResource CornerSize}" Height="{StaticResource CornerSize}">
            <Rectangle.Fill>
                <RadialGradientBrush Center="0,1" GradientOrigin="0,1" RadiusX="1" RadiusY="1">
                    <GradientStop Color="{StaticResource ShadowColor}"/>
                    <GradientStop Offset="1" Color="{StaticResource TransparentColor}"/>
                </RadialGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

        <Rectangle Grid.Row="2" Grid.Column="0" Width="{StaticResource CornerSize}" Height="{StaticResource CornerSize}">
            <Rectangle.Fill>
                <RadialGradientBrush Center="1,0" GradientOrigin="1,0" RadiusX="1" RadiusY="1">
                    <GradientStop Color="{StaticResource ShadowColor}"/>
                    <GradientStop Offset="1" Color="{StaticResource TransparentColor}"/>
                </RadialGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

        <Rectangle Grid.Column="1">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0,1">
                    <GradientStop Offset="1" Color="{StaticResource ShadowColor}"/>
                    <GradientStop Color="{StaticResource TransparentColor}"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>


        <Rectangle Grid.Column="1" Grid.Row="2">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0,1">
                    <GradientStop Color="{StaticResource ShadowColor}"/>
                    <GradientStop Offset="1" Color="{StaticResource TransparentColor}"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

        <Rectangle Grid.Row="1">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="1,0">
                    <GradientStop Offset="1" Color="{StaticResource ShadowColor}"/>
                    <GradientStop Color="{StaticResource TransparentColor}"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

        <Rectangle Grid.Row="1" Grid.Column="2">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="1,0">
                    <GradientStop Color="{StaticResource ShadowColor}"/>
                    <GradientStop Offset="1" Color="{StaticResource TransparentColor}"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

        <Rectangle Grid.Row="1" Grid.Column="1">
            <Rectangle.Fill>
                <SolidColorBrush Color="{StaticResource ShadowColor}"/>
            </Rectangle.Fill>
        </Rectangle>
    </Grid>
</UserControl>

Answer 4

将矩形包裹在边框中。并为边框添加阴影。你会得到同样的效果。

如何在透明矩形上绘制阴影？

4 个答案: