如何使用 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 的水平和垂直对齐设置为拉伸。

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

编辑：

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

如何使用 RichEditBox 加载页面，使其显示为整个页面？

How to load a page with RichEditBox, so it's displayed stretched to the entire page?

c#

user-interface

xaml

tabview

uwp