如何在WinUI3中创建固定页脚？

最常用的两种实现方式是使用Grid布局或者RelativePanel布局，以下是具体代码示例：

方案一：Grid布局（推荐） #

通过Grid划分行区域，让页脚行始终处于页面底部，主内容区占据剩余空间：

<Page
    x:Class="YourAppNamespace.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:YourAppNamespace"
    mc:Ignorable="d">

    <Grid>
        <Grid.RowDefinitions>
            <!-- 顶部内容行（可选），高度自适应内容 -->
            <RowDefinition Height="Auto"/>
            <!-- 主内容行，占据顶部和页脚之外的所有剩余空间 -->
            <RowDefinition Height="*"/>
            <!-- 页脚行，高度自适应内容 -->
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <!-- 顶部内容（可根据需求移除） -->
        <TextBlock Grid.Row="0" Text="页面标题" FontSize="24" Margin="20"/>

        <!-- 主内容区域，内容过多时可嵌套ScrollViewer实现滚动 -->
        <ScrollViewer Grid.Row="1" Margin="20">
            <TextBlock Text="这里是页面的主要内容，会自动填充顶部与页脚之间的空间，内容超出时可以滚动查看。" 
                       FontSize="18" TextWrapping="Wrap"/>
        </ScrollViewer>

        <!-- 底部固定页脚 -->
        <Border Grid.Row="2" Background="#F5F5F5" Padding="20">
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                <TextBlock Text="© 2024 你的应用名称" FontSize="14"/>
                <TextBlock Text=" | " Margin="8 0"/>
                <TextBlock Text="隐私政策" FontSize="14" Foreground="#0078D4"/>
            </StackPanel>
        </Border>
    </Grid>
</Page>

关键说明： #

• RowDefinition Height="*" 会让主内容行自动占据所有剩余空间，保证页脚始终固定在底部。
• 页脚行使用Height="Auto"，会根据内部内容自动调整高度，不会出现内容被截断的情况。

方案二：RelativePanel布局 #

通过相对定位让页脚对齐页面底部，主内容区对齐页面顶部和页脚：

<Page
    x:Class="YourAppNamespace.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:YourAppNamespace"
    mc:Ignorable="d">

    <RelativePanel>
        <!-- 主内容区：顶部对齐页面，底部对齐页脚 -->
        <ScrollViewer RelativePanel.AlignTopWithPanel="True" 
                      RelativePanel.AlignBottomWith="FooterContainer" 
                      Margin="20">
            <TextBlock Text="这里是页面主要内容，会填充页脚上方的全部空间。" 
                       FontSize="18" TextWrapping="Wrap"/>
        </ScrollViewer>

        <!-- 底部固定页脚：对齐页面底部 -->
        <Border x:Name="FooterContainer" 
                RelativePanel.AlignBottomWithPanel="True" 
                Background="#F5F5F5" 
                Padding="20"
                Width="Auto">
            <TextBlock Text="固定页脚示例内容" FontSize="14"/>
        </Border>
    </RelativePanel>
</Page>

关键说明： #

• RelativePanel.AlignBottomWithPanel="True" 确保页脚始终停靠在页面底部。
• 主内容区通过RelativePanel.AlignBottomWith="FooterContainer"绑定到页脚，自动填充剩余空间。

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