如何在WinUI 3中设计自适应窗口大小的图片背景

你可以通过以下步骤在 homepage.xaml 中实现自适应窗口的背景图效果：

基础实现（适配窗口+保持比例） #

在页面的根容器（如 Grid）中添加 Image 控件，并设置关键属性让图片自动适配窗口：

<Page
    x:Class="你的应用命名空间.Views.HomePage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Grid>
        <!-- 背景图控件（放在最底层，避免被其他内容遮挡） -->
        <Image Source="/Assets/background.png"
               Stretch="UniformToFill"
               HorizontalAlignment="Stretch"
               VerticalAlignment="Stretch"/>
        
        <!-- 你的现有内容：NavigationView 及其他控件 -->
        <NavigationView x:Name="MainNavView">
            <!-- NavigationView 的子内容 -->
        </NavigationView>
    </Grid>
</Page>

关键属性说明 #

• Stretch="UniformToFill"：让图片按原始比例缩放，填满整个窗口且不拉伸变形，和 WinUI 3 Gallery 的背景逻辑一致。
• HorizontalAlignment="Stretch" + VerticalAlignment="Stretch"：确保图片铺满整个页面容器，随窗口大小自动调整。

进阶：添加模糊效果（还原 WinUI 3 Gallery 视觉风格） #

如果需要类似 WinUI 3 Gallery 的模糊背景，可以给图片添加模糊效果，或者叠加亚克力层：

方式1：给图片直接加模糊 #

<Image Source="/Assets/background.png"
       Stretch="UniformToFill"
       HorizontalAlignment="Stretch"
       VerticalAlignment="Stretch">
    <Image.Effect>
        <BackdropBlurEffect BlurAmount="20"/> <!-- 模糊程度可自行调整 -->
    </Image.Effect>
</Image>

方式2：叠加亚克力模糊层 #

<Grid>
    <Image Source="/Assets/background.png"
           Stretch="UniformToFill"
           HorizontalAlignment="Stretch"
           VerticalAlignment="Stretch"/>
    <!-- 亚克力模糊覆盖层，增强视觉层次感 -->
    <Grid Background="{ThemeResource SystemControlAcrylicWindowBrush}"/>
    
    <!-- 你的页面内容 -->
    <NavigationView x:Name="MainNavView">
        <!-- 内容 -->
    </NavigationView>
</Grid>

注意事项 #

确保 background.png 的属性设置正确：

1. 将图片放入项目的 Assets 文件夹
2. 在 Visual Studio 中选中图片，设置：
   • 生成操作：内容
   • 复制到输出目录：如果较新则复制

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