ListBox in Grid not resize in SplitView - listbox

Question

I have problem with resize gridlayout.
This is man page:
This page has ListBox in 3 column. But when I fill in the data my ListBox I don't see my buttons and scrollbar. I have ScrollBar in ScrollViewer but it doesn't work. I generate all values in For loop (100 items). For now I have something like this:
This is my code of page:
<Page
x:Class="MemoryWords.LernWords"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MemoryWords"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Name="mainPage">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="4*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" x:Name="LayoutRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width=".5*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Name="WordBeforeTranslation"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="20"/>
<StackPanel Grid.Column="1" >
<TextBlock Name="WordAfterTranslation"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="20"/>
<TextBlock Name="WordArticulation"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="20"/>
</StackPanel>
<ScrollViewer Grid.Column="2">
<ListBox Name="AllWords"/>
</ScrollViewer>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0"
Content="Previous"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
<Button Grid.Column="1"
Content="Check"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
<Button Grid.Column="2"
Content="Next"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0"
Name="BtnLoadFile"
Click="BtnLoadFile_Click"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="Load file"/>
<Button Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="New Random"/>
<Button Grid.Column="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="--------"/>
</Grid>
</Grid>
</Page>
Next case:
How I can set on starting, my grid filled all content of page without loaded data to ListBox? And Can I resize my app without lost of content? I don't want set permanent values to height and width. I would like have only layouts without permanent values. Generally, I would like when I will rescale app, my grid will by have similar layout.
I would like to make my page look like as on first my screenshot.
Is it possible?
EDIT:
This is my code from MainPage:
<Page
x:Class="MemoryWords.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MemoryWords"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<StackPanel>
<CommandBar HorizontalAlignment="Left">
<AppBarButton Label="Menu" Click="ToogleMenu_Click">
<AppBarButton.Icon>
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph=""/>
</AppBarButton.Icon>
</AppBarButton>
<AppBarButton Icon="Back" Label="Back" Click="GoBack_Click"/>
<AppBarButton Icon="Home" Label="Play" Click="GoHome_Click"/>
</CommandBar>
<!--<Button Content="Open" Click="Button_Click"/>-->
<SplitView Name="MySplitView"
DisplayMode="CompactOverlay"
CompactPaneLength="50"
OpenPaneLength="200">
<SplitView.Pane >
<StackPanel>
<ListBox SelectionMode="Single"
Name="ListOfMenu"
SelectionChanged="ListOfMenu_SelectionChanged">
<ListBoxItem Name="LearnWordsItem">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets"
Text=""
FontSize="30"
MinWidth="50"/>
<TextBlock Text="Nauka słówek"/>
</StackPanel>
</ListBoxItem>
<ListBoxItem Name="SettingItem">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets"
Text=""
FontSize="30"
MinWidth="50"/>
<TextBlock Text="Ustawienia"/>
</StackPanel>
</ListBoxItem>
</ListBox>
</StackPanel>
</SplitView.Pane>
<SplitView.Content>
<StackPanel>
<Frame Name="MyFrame">
</Frame>
</StackPanel>
</SplitView.Content>
</SplitView>
</StackPanel>
</Page>

Answer 1

I saw that you've set three RowDefinition as "*", it certainly will drive out those buttons. If you want to make these buttons always show there, you need to set fixed height for the two rows. See the following code:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="100" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" x:Name="LayoutRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width=".5*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Name="WordBeforeTranslation"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="20" />
<StackPanel Grid.Column="1">
<TextBlock Name="WordAfterTranslation"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="20" />
<TextBlock Name="WordArticulation"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="20" />
</StackPanel>
<ScrollViewer Grid.Column="2">
<ListBox Name="AllWords" />
</ScrollViewer>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button Grid.Column="0"
Content="Previous"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
<Button Grid.Column="1"
Content="Check"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
<Button Grid.Column="2"
Content="Next"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button Grid.Column="0"
Name="BtnLoadFile"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="Load file" />
<Button Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="New Random" />
<Button Grid.Column="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="--------" />
</Grid>
</Grid>

Answer 2

Ok, I found answer on my question. :) Yeeee :)
My mistake was that in mainPage I didn't contained all in the grid.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<CommandBar Grid.Row="0" HorizontalAlignment="Left">
<AppBarButton Label="Menu" Click="ToogleMenu_Click">
<AppBarButton.Icon>
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph=""/>
</AppBarButton.Icon>
</AppBarButton>
<AppBarButton Icon="Back" Label="Back" Click="GoBack_Click"/>
<AppBarButton Icon="Home" Label="Play" Click="GoHome_Click"/>
</CommandBar>
<SplitView Grid.Row="1" Name="MySplitView"
DisplayMode="CompactOverlay"
CompactPaneLength="50"
OpenPaneLength="200"
VerticalAlignment="Stretch">
<SplitView.Pane >
<StackPanel>
<ListBox SelectionMode="Single"
Name="ListOfMenu"
SelectionChanged="ListOfMenu_SelectionChanged">
<ListBoxItem Name="LearnWordsItem">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets"
Text=""
FontSize="30"
MinWidth="50"/>
<TextBlock Text="Nauka słówek"/>
</StackPanel>
</ListBoxItem>
<ListBoxItem Name="SettingItem">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets"
Text=""
FontSize="30"
MinWidth="50"/>
<TextBlock Text="Ustawienia"/>
</StackPanel>
</ListBoxItem>
</ListBox>
</StackPanel>
</SplitView.Pane>
<SplitView.Content>
<Frame Name="MyFrame" >
</Frame>
</SplitView.Content>
</SplitView>
</Grid>
Enough to change StackPanel on Grid. That is all.