WinUI3应用实现中心向下渐变效果（仿微软商店样式）

要实现从图片中心向下延伸、底部与背景色融合的渐变效果，可通过XAML层叠布局结合LinearGradientBrush完成，以下是具体实现步骤：

核心思路 #

用Grid容器将图片和渐变遮罩层叠，渐变遮罩从图片中心垂直向下过渡到背景色，模拟微软商店的视觉效果。

基础实现代码 #

<!-- 外层Grid的背景色即为渐变底部要匹配的颜色 -->
<Grid Width="300" Height="400" Background="#1E1E1E">
    <!-- 目标图片，根据需求设置Stretch模式 -->
    <Image x:Name="TargetImage" Source="YourImage.png" Stretch="UniformToFill" />
    <!-- 渐变遮罩层，垂直对齐底部，高度设为图片的一半（覆盖中心到底部区域） -->
    <Rectangle VerticalAlignment="Bottom" Height="200">
        <Rectangle.Fill>
            <LinearGradientBrush 
                StartPoint="0.5,0.5"  <!-- 渐变起始点：图片中心 -->
                EndPoint="0.5,1">    <!-- 渐变结束点：图片底部中心 -->
                <GradientStop Color="Transparent" Offset="0"/>
                <GradientStop Color="#1E1E1E" Offset="1"/> <!-- 与外层Grid背景色一致 -->
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
</Grid>

优化调整 #

1. 平滑过渡效果
   若需要更自然的渐变过渡，可添加中间渐变停止点，让透明度逐步变化：

   <LinearGradientBrush StartPoint="0.5,0.5" EndPoint="0.5,1">
       <GradientStop Color="Transparent" Offset="0"/>
       <GradientStop Color="#7F1E1E1E" Offset="0.5"/> <!-- 半透明背景色 -->
       <GradientStop Color="#1E1E1E" Offset="1"/>
   </LinearGradientBrush>
   

2. 适配动态图片高度
   如果图片高度不固定，可通过值转换器绑定Image.ActualHeight，自动将遮罩高度设为图片的一半：

   • 首先实现值转换器：

     public class HalfValueConverter : IValueConverter
     {
         public object Convert(object value, Type targetType, object parameter, string language)
         {
             return value is double height ? height / 2 : 0;
         }
     
         public object ConvertBack(object value, Type targetType, object parameter, string language)
         {
             throw new NotImplementedException();
         }
     }
     

   • 在页面资源中声明转换器：

     <Page.Resources>
         <local:HalfValueConverter x:Key="HalfValueConverter"/>
     </Page.Resources>
     

   • 修改Rectangle的高度绑定：

     <Rectangle VerticalAlignment="Bottom" 
                Height="{Binding ElementName=TargetImage, Path=ActualHeight, Converter={StaticResource HalfValueConverter}}">
     

内容的提问来源于stack exchange，提问作者JurijG