Windows SDK上的陰影效果10240

Question

我知道有許多方法可以通過Windows.Composition爲週年更新和以前的SDK添加陰影。不幸的是，我必須堅持使用10240版本，並且此API不可用。我嘗試過使用Win2D，但沒有成功。關於如何向Grid XAML元素添加陰影的任何想法？

Answer 1

據我所知，如果沒有xaml週年更新（無需使用您需要自己創建的特定陰影位圖），您將無法制作真正的投影。

如果你只需要一個陰影矩形 XAML的組件，你可以用沿邊緣梯度的3×3格，並將其放置在組件下具有一定的偏移（取決於你想要的光來從）。

下面是一個例子：

<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中也不存在。