如何使用 RichEditBox 加载页面，使其拉伸到整个页面？

Question

我有一个在我的应用程序的 MainPage.xaml 上有 TabView 的应用程序。我也有 ContentPage.xaml（请注意，它不是一个实际的 ContentPage，它只是我创建的一个空白页面并将其命名为“ContentPage”），它只有一个元素 — RichEditBox。当我创建一个新标签时，我使用以下代码：

        private TabViewItem CreateNewTab(int index)
    {
        TabViewItem newItem = new TabViewItem();

        newItem.Header = $"Untitled-{index}.txt";
        newItem.IconSource = new Microsoft.UI.Xaml.Controls.SymbolIconSource() { Symbol = Symbol.Document };

        // The content of the tab is often a frame that contains a page, though it could be any UIElement.
        Frame frame = new Frame();
        
        frame.Navigate(typeof(ContentPage));

        newItem.Content = frame;

        return newItem;
    }

所以，如您所见，我想要做的是每次创建新选项卡时都会出现 RichEditBox，并且我希望能够在每个选项卡上打开、保留和编写不同的文本。它工作得非常好，但我有一个问题：我无法将 RichEditBox 元素垂直拉伸到整页。它水平填充页面，但不垂直填充。 This is what it looks like

我尝试更改边距参数，尝试更改垂直和水平对齐，但没有任何帮助获得我想要的结果。我尝试在 Google 上搜索有关此主题的一些信息，但没有找到任何解决方案。有人告诉我，MVVM 模式可能是我想要研究的，所以我也尝试查找有关该主题的一些内容，但仍然无法完全理解它。如果这是非常简单和基本的事情，我提前道歉，但我真的不知道如何解决这个问题。也许我的想法都错了，实际上应该有一些更简单的解决方案来解决这个问题。我对 XAML 和 UWP 非常陌生，所以任何好的简单解释都会很棒。

ContentPage.xaml 代码：

<Page
x:Class="TestApp.ContentPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:control="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
mc:Ignorable="d"
Background="{ThemeResource AcrylicBackgroundFillColorDefaultBrush}">

<Grid>
    <RichEditBox VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch"/>
</Grid>

MainPage.xaml 代码：

<Page
x:Class="TestApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
mc:Ignorable="d"
Background="{ThemeResource AcrylicBackgroundFillColorDefaultBrush}">

<Grid HorizontalAlignment="Stretch" VerticalAlignment="Top">
    <Image Source="Assets/Square44x44Logo.png" 
       HorizontalAlignment="Left" 
       Width="20" Height="20" Margin="10,8,0,0" VerticalAlignment="Top"/>
    <TextBlock x:Name="AppName" x:Uid="AppName" Text="TestApp" 
           Style="{StaticResource CaptionTextBlockStyle}" 
           Margin="44,8,44,896"/>
    <muxc:MenuBar VerticalAlignment="Top" Margin="5,33,-5,0">
        <muxc:MenuBarItem Title="Item1" x:Name="File" x:Uid="File">
            <MenuFlyoutItem Text="Settings" Icon="Setting" x:Name="FileSettings" x:Uid="FileSettings" Click="MenuFlyoutItem_ClickSettings">
                <MenuFlyoutItem.KeyboardAccelerators>
                    <KeyboardAccelerator Modifiers="Control" Key="I"/>
                </MenuFlyoutItem.KeyboardAccelerators>
            </MenuFlyoutItem>
            <MenuFlyoutItem Text="Exit" Icon="Cancel" x:Name="FileExit" x:Uid="FileExit" Click="MenuFlyoutItem_ClickExit">
            </MenuFlyoutItem>
        </muxc:MenuBarItem>
        <muxc:MenuBarItem Title="Item2">
        </muxc:MenuBarItem>
        <muxc:MenuBarItem Title="Item3">
        </muxc:MenuBarItem>
        <muxc:MenuBarItem Title="Item4">
        </muxc:MenuBarItem>
    </muxc:MenuBar>
    
    <muxc:TabView AddTabButtonClick="TabView_AddButtonClick" TabCloseRequested="TabView_TabCloseRequested" Loaded="TabView_Loaded" Margin="0,70,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <muxc:TabView.KeyboardAccelerators>
            <KeyboardAccelerator Key="T" Modifiers="Control" Invoked="NewTabKeyboardAccelerator_Invoked" />
            <KeyboardAccelerator Key="W" Modifiers="Control" Invoked="CloseSelectedTabKeyboardAccelerator_Invoked" />
            <KeyboardAccelerator Key="Number1" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
            <KeyboardAccelerator Key="Number2" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
            <KeyboardAccelerator Key="Number3" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
            <KeyboardAccelerator Key="Number4" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
            <KeyboardAccelerator Key="Number5" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
            <KeyboardAccelerator Key="Number6" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
            <KeyboardAccelerator Key="Number7" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
            <KeyboardAccelerator Key="Number8" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
            <KeyboardAccelerator Key="Number9" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
        </muxc:TabView.KeyboardAccelerators>
    </muxc:TabView>
    
</Grid>

Answer 1

我想我找到了问题

确保将 TabView 的水平和垂直对齐设置为 Stretch。

<muxc:TabView HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

编辑：

将 MainPage.xaml 中网格的 VerticalAlignment 从 Top 更改为 Stretch，一切都应该按预期工作。