Windows SDK 10240 上的投影效果

Question

我知道有很多方法可以通过周年更新和以前的 SDK 添加阴影 Windows.Composition。不幸的是，我必须坚持使用版本 10240，并且此 API 不可用。我尝试使用 Win2D 但没有成功。关于如何向网格 XAML 元素添加阴影的任何想法？

Answer 1

据我所知，如果没有 xaml 中的周年纪念更新，您将无法制作真正的投影（如果不使用您需要自己创建的特定阴影位图）。

如果您只需要矩形 xaml 组件的阴影，您可以制作一个 3x3 网格，沿边缘渐变，并将其放置在组件下方一定的偏移量（取决于您希望光线从哪里来）。

这是一个例子：

<UserControl
x:Class="YourProject.UserControls.CustomShadow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:YourProject.UserControls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">

<Grid>
    <Grid x:Name="ShadowGrid" Opacity="0.2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="LeftColumn" Width="40"/>
            <ColumnDefinition x:Name="CenterColumn" />
            <ColumnDefinition x:Name="RightColumn" Width="40" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition x:Name="TopRow" Height="40"/>
            <RowDefinition x:Name="CenterRow" />
            <RowDefinition x:Name="BottomRow" Height="40"/>
        </Grid.RowDefinitions>

        <Grid Grid.Row="0" Grid.Column="0">
            <Rectangle>
                <Rectangle.Fill>
                    <LinearGradientBrush StartPoint="0.5,0.5" EndPoint="1,1">
                        <GradientStop Color="#4b4b50" Offset="1" />
                        <GradientStop Color="Transparent" Offset="0"/>
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
        </Grid>
        <Grid Grid.Row="0" Grid.Column="1">
            <Rectangle>
                <Rectangle.Fill>
                    <LinearGradientBrush StartPoint="0,1" EndPoint="0,0">
                        <GradientStop Color="#4b4b50" Offset="0" />
                        <GradientStop Color="Transparent" Offset="1"/>
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
        </Grid>
        <Grid Grid.Row="0" Grid.Column="2">
            <Rectangle>
                <Rectangle.Fill>
                    <LinearGradientBrush StartPoint="0.5,0.5" EndPoint="0,1">
                        <GradientStop Color="#4b4b50" Offset="1" />
                        <GradientStop Color="Transparent" Offset="0"/>
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
        </Grid>
        <Grid Grid.Row="1" Grid.Column="0">
            <Rectangle>
                <Rectangle.Fill>
                    <LinearGradientBrush StartPoint="1,0" EndPoint="0,0">
                        <GradientStop Color="#4b4b50" Offset="0" />
                        <GradientStop Color="Transparent" Offset="1"/>
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
        </Grid>
        <Grid Grid.Row="1" Grid.Column="1">
            <Rectangle Fill="#4b4b50"/>
        </Grid>
        <Grid Grid.Row="1" Grid.Column="2">
            <Rectangle>
                <Rectangle.Fill>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                        <GradientStop Color="#4b4b50" Offset="0" />
                        <GradientStop Color="Transparent" Offset="1"/>
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
        </Grid>
        <Grid Grid.Row="2" Grid.Column="0">
            <Rectangle>
                <Rectangle.Fill>
                    <LinearGradientBrush StartPoint="0.5,0.5" EndPoint="1,0">
                        <GradientStop Color="#4b4b50" Offset="1" />
                        <GradientStop Color="Transparent" Offset="0"/>
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
        </Grid>
        <Grid Grid.Row="2" Grid.Column="1">
            <Rectangle>
                <Rectangle.Fill>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Color="#4b4b50" Offset="0" />
                        <GradientStop Color="Transparent" Offset="1"/>
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
        </Grid>
        <Grid Grid.Row="2" Grid.Column="2">
            <Rectangle>
                <Rectangle.Fill>
                    <LinearGradientBrush StartPoint="0.5,0.5" EndPoint="0,0">
                        <GradientStop Color="#4b4b50" Offset="1" />
                        <GradientStop Color="Transparent" Offset="0"/>
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
        </Grid>
    </Grid>
    <Grid>
        <Rectangle Fill="Transparent" Width="350" Height="250" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10"/>
    </Grid>
</Grid>

调整对象大小时，调整CenterColumn/CenterRow的width/height，保持网格其他部分大小不变。径向渐变在角落看起来会更好，但 uwp 中也不存在径向渐变。

Windows SDK 10240 上的投影效果

Drop Shadow effect on Windows SDK 10240

c#

uwp

composition

win2d