WPF中Frame导航时隐藏主窗口Grid行内容的技术需求

我用XAML实现了简易UI，在Grid中嵌入Frame用于导航，点击主窗口按钮时将Frame的Content设置为指定Page。当前点击按钮后Page内容可正常显示，但主窗口Grid第0行的内容仍会显示，同时需要让Page占满整个Frame。

要实现需求，需完成两个核心修改：

1. 统一控制Grid第0行内容的显示隐藏 #

将Grid第0行的所有元素放入一个容器中，通过控制容器的可见性来批量隐藏头部内容。

2. 让Page占满Frame #

确保Frame填充所在的Grid单元格，Page的根布局默认会撑满Page空间，因此只要Frame占满单元格，Page内容就会自动铺满。

修改后主窗口XAML #

<Window x:Class="ADCP.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ADCP"
        mc:Ignorable="d"
        Title="ADCP" Height="350" Width="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="31*"/>
            <RowDefinition Height="303*"/>
        </Grid.RowDefinitions>
        <!-- 将第0行元素放入容器，方便统一控制显示隐藏 -->
        <Grid Grid.Row="0" Grid.ColumnSpan="2" x:Name="HeaderContainer">
            <Image Height="20" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Source="resources/testIcon.jpg" Width="149"/>
            <Image Height="30" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center" Source="resources/Logo.png" Margin="344,0,0,0" Width="56"/>
        </Grid>
        <Label x:Name="LabelProject" Content="PROJECT" Grid.Row="1" FontWeight="Bold" HorizontalAlignment="Left" FontSize="30" Grid.ColumnSpan="2" Margin="288,68,0,0" Width="224"></Label>
        <Button x:Name="BtnStart" Click="BtnStart_Click" FontWeight="SemiBold" FontSize="20" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Top" Content="START" Margin="174,154,0,0" Height="31" Width="61" />
        <!-- 设置Frame填充整个Grid单元格 -->
        <Frame Name="MainWindowFrame" Grid.Row="1" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
    </Grid>
</Window>

修改后后台C#代码 #

namespace ADCP
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public Page1 homePage;
        public Page2 helpPage;
        
        public MainWindow()
        {
            InitializeComponent();
            homePage = new Page1(); 
            helpPage = new Page2();
        }

        private void BtnStart_Click(object sender, RoutedEventArgs e)
        {
            MainWindowFrame.Content = homePage;
            // 隐藏头部内容
            HeaderContainer.Visibility = Visibility.Collapsed;
            // 可选：同时隐藏主窗口的PROJECT标签和START按钮
            LabelProject.Visibility = Visibility.Collapsed;
            BtnStart.Visibility = Visibility.Collapsed;
        }
    }
}

额外说明 #

• Page的XAML无需修改，其根Grid默认会撑满Page的可用空间，配合Frame的填充设置即可实现Page占满Frame的效果。
• 如果需要在返回主界面时重新显示头部及按钮，可在Page的返回逻辑中设置对应控件的Visibility为Visible。

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