Windows SDK 10240 上的投影效果

Question

我知道有很多方法可以通过周年更新和以前的 SDK 使用 Windows.Composition 添加阴影。不幸的是，我必须坚持使用 10240 版本，并且此 API 不可用。我尝试使用 Win2D 但没有成功。有关如何向 Grid 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的宽度/高度，并保持网格的其他部分相同大小。径向渐变在角落看起来会更好，但径向渐变在 uwp 中也不存在。