I have an App that has TabView on MainPage.xaml of my app. I also have ContentPage.xaml (note that it's not an actual ContentPage, it's just a Blank Page that I created and named it as "ContentPage") that only has one element — RichEditBox. When I create a new tab I use this code:
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;
}
So, as you can see, what I want to do is I want RichEditBox to appear every time I create a new Tab and I want to be able to open, keep and write different text on each tab. It works really well, but I have one problem: I can't stretch RichEditBox element to the full page vertically. It fulfills the page horizontally, but not vertically. This is what it looks like
I've tried to change margin parameters, tried to change Vertical and Horizontal Alignment, yet nothing helps to get the result that I want. I've tried to Google some information on this topic, but didn't manage to find any solution. I've been told that MVVM pattern might be what I want to look into, so I tried to look up some stuff on this topic as well, but still didn't manage to fully understand it. I apologize in advance if this is something very simple and basic, but I really have no idea how to address this issue. Maybe I'm thinking all wrong and there's actually supposed to be some easier solution for this problem. I'm very new to XAML and UWP, so any good and simple explanation would be great.
ContentPage.xaml code:
<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 code:
<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>
I think I found the problem
Make sure to set the Horizontal and Vertical Alignment of the TabView to Stretch.
<muxc:TabView HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
Edit:
Change the VerticalAlignment of the Grid in your MainPage.xaml from Top to Stretch and everything should work as expected.