如何在.NET MAUI中实现带圆角与模糊效果的目标UI？

一、移除ContentPage顶部TitleView #

在页面的XAML根节点添加属性，直接隐藏导航栏：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourNamespace.TargetPage"
             NavigationPage.HasNavigationBar="False">
    <!-- 页面内容 -->
</ContentPage>

如果是Shell项目，替换为Shell.NavBarIsVisible="False"即可。

二、实现顶部模糊渐变大图 #

使用Grid嵌套Image和渐变遮罩层，同时给图片添加模糊效果：

<Grid>
    <!-- 背景大图 -->
    <Image Source="your_top_image.jpg" Aspect="AspectFill">
        <!-- 模糊效果，Radius值越大模糊程度越高 -->
        <Image.Effects>
            <BlurEffect Radius="12" />
        </Image.Effects>
    </Image>
    <!-- 渐变遮罩，增强下方内容可读性 -->
    <BoxView>
        <BoxView.Background>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                <GradientStop Color="Transparent" Offset="0" />
                <GradientStop Color="#90000000" Offset="1" />
            </LinearGradientBrush>
        </BoxView.Background>
    </BoxView>
</Grid>

注意：图片需放在Resources/Images目录，设置Build Action为MauiImage。

三、实现下方宽度略窄的圆角白色区域 #

用MAUI推荐的Border控件，通过Margin控制宽度，CornerRadius设置圆角：

<Border CornerRadius="24" BackgroundColor="White"
        HorizontalOptions="Fill" Margin="16,0" VerticalOptions="Start">
    <StackLayout Padding="20" Spacing="12">
        <!-- 自定义区域内容 -->
        <Label Text="标题文本" FontSize="22" FontAttributes="Bold" />
        <Label Text="详细描述内容" FontSize="16" TextColor="#666666" />
        <Button Text="操作按钮" BackgroundColor="#2196F3" TextColor="White" CornerRadius="12" />
    </StackLayout>
</Border>

完整页面整合示例 #

将上述模块组合，通过Grid布局实现层级叠加：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourNamespace.TargetPage"
             NavigationPage.HasNavigationBar="False">
    <Grid RowDefinitions="*, Auto">
        <!-- 顶部模糊渐变大图区域 -->
        <Grid Grid.Row="0">
            <Image Source="top_banner.jpg" Aspect="AspectFill">
                <Image.Effects>
                    <BlurEffect Radius="12" />
                </Image.Effects>
            </Image>
            <BoxView>
                <BoxView.Background>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Color="Transparent" Offset="0" />
                        <GradientStop Color="#90000000" Offset="1" />
                    </LinearGradientBrush>
                </BoxView.Background>
            </BoxView>
        </Grid>

        <!-- 下方圆角白色区域 -->
        <Border Grid.Row="1" CornerRadius="24" BackgroundColor="White"
                HorizontalOptions="Fill" Margin="16,0" VerticalOptions="Start">
            <StackLayout Padding="20" Spacing="12">
                <Label Text="标题文本" FontSize="22" FontAttributes="Bold" />
                <Label Text="这里是详细描述内容，展示在圆角白色区域内。" FontSize="16" TextColor="#666666" />
                <Button Text="立即操作" BackgroundColor="#2196F3" TextColor="White" CornerRadius="12" Margin="0,8,0,0" />
            </StackLayout>
        </Border>
    </Grid>
</ContentPage>

可选调整项 #

• 模糊半径Radius、渐变遮罩颜色/透明度、Border的CornerRadius和Margin可根据视觉需求修改
• 若需单独设置圆角的某几个角，可使用CornerRadius="24,24,0,0"格式

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