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中也不存在径向渐变。

Windows SDK 10240上的阴影效果

1 个答案: