Repsonsive textbox and text

Question

The textbox in the ViewBox dosen't display and respond propperly. First of all it dosn't align to the left and second of all it have an gigantic text. Anyone that knows why and can help me to fix it? It should be as wide as the size of the window and have a normal fontsize for a textbox.

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

    <Grid Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
            </Grid.RowDefinitions>
            <TextBlock Foreground="Black" Name="Title" Text="Namlöst dokument" FontSize="22"></TextBlock>
            <CommandBar Background="LightBlue" Grid.Row="1" HorizontalAlignment="Left" OverflowButtonVisibility="Collapsed">
                <AppBarButton Click="AppBarButton_Click" Name="NewFileButton" Icon="Add" Label="New File.."></AppBarButton>
                <AppBarButton Click="AppBarButton_Click" Name="OpenFileButton" Icon="OpenFile" Label="Open File.."></AppBarButton>
                <AppBarButton Click="AppBarButton_Click" Name="SaveFileButton" Icon="Save" Label="Save File.."></AppBarButton>
                <AppBarButton Click="AppBarButton_Click" Name="SaveLocalButton" Icon="SaveLocal" Label="Spara Som..."></AppBarButton>
                <AppBarButton Click="AppBarButton_Click" Name="ClearButton" Icon="Clear" Label="Clear..."></AppBarButton>
            </CommandBar>
        </Grid>
        <Viewbox Stretch="Fill" Grid.Row="1">
            <!--Tewxt Wrappingg="Wrap" och AcceptsReturn="True" gör att man kan skriva flera rader i rutan-->
            <TextBox FontSize="20" Foreground="Black" TextAlignment="Left"  BorderThickness="0"  Drop="myText_Drop_1" DragOver="myText_DragOver_1" AllowDrop="True" CanDrag="True" TextChanged="myText_TextChanged" TextWrapping="Wrap" AcceptsReturn="True" Name="myText" ></TextBox>
        </Viewbox>
        <Grid Grid.Row="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <!---->
            <Viewbox Stretch="Fill">
                <TextBlock Margin="10,10,20,10" Foreground="Black" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Name="Antaltecken" Text="Antal tecken: "></TextBlock>
            </Viewbox>
            <Viewbox Stretch="Fill" Grid.Column="1">
                <TextBlock Margin="10,10,20,10" Foreground="Black" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Name="Antalteckenmellanslag" Grid.Column="1" Text="Antal tecken med mellanslag: "></TextBlock>
            </Viewbox>
            <Viewbox Stretch="Fill" Grid.Column="2">
                <TextBlock Margin="10,10,20,10" Foreground="Black" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Name="Antalord" Grid.Column="2" Text="Antal ord: "></TextBlock>
            </Viewbox>
            <Viewbox Stretch="Fill" Grid.Column="3">
                <TextBlock Margin="10,10,20,10" Foreground="Black" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Name="Antalrader" Grid.Column="3" Text="Antal rader: "></TextBlock>
            </Viewbox>
        </Grid>
    </Grid>
</Page>

Answer 1

Hopefully this works as you expected, set the ColumnDefinition Width to “auto”, and set the Viewbox's Stretch property to "UniformToFill" and specify the font size.

<Grid Grid.Row="2">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto"></ColumnDefinition>
        <ColumnDefinition Width="auto"></ColumnDefinition>
        <ColumnDefinition Width="auto"></ColumnDefinition>
        <ColumnDefinition Width="auto"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <!---->
    <Viewbox Stretch="UniformToFill" >
        <TextBlock Margin="10,10,20,10" FontSize="20" Foreground="Black" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Name="Antaltecken" Text="Antal tecken: "></TextBlock>
    </Viewbox>
    <Viewbox Stretch="UniformToFill" Grid.Column="1" >
        <TextBlock Margin="10,10,20,10" FontSize="20" Foreground="Black" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Name="Antalteckenmellanslag" Grid.Column="1" Text="Antal tecken med mellanslag: "></TextBlock>
    </Viewbox>
    <Viewbox Stretch="UniformToFill" Grid.Column="2">
        <TextBlock Margin="10,10,20,10" FontSize="20" Foreground="Black" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Name="Antalord" Grid.Column="2" Text="Antal ord: "></TextBlock>
    </Viewbox>
    <Viewbox Stretch="UniformToFill" Grid.Column="3">
        <TextBlock Margin="10,10,20,10" FontSize="20" Foreground="Black" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Name="Antalrader" Grid.Column="3" Text="Antal rader: "></TextBlock>
    </Viewbox>
</Grid>