Viewbox fill all column grid space WPF

Question

I am creating a program to tell the user his account balance and stuff like that. I show this information on a Grid with a ViewBox (so it can be resized to any screen resolution) the problem is that the ViewBox does not fills its space at the Grid. Here is my code:

<Grid ShowGridLines="True">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="0.5*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="0.5*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Viewbox Grid.Row="0" Grid.Column="1" Stretch="Uniform" HorizontalAlignment="Right" VerticalAlignment="Stretch">
                            <TextBlock Foreground="#5a5a5a"  TextAlignment="Center" Margin="1">Subtotal</TextBlock>
                        </Viewbox>
                        <Viewbox Grid.Row="0" Grid.Column="2" Stretch="Uniform" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                            <TextBox Margin="5" Text="155.60" TextAlignment="Center" IsReadOnly="True"/>
                        </Viewbox>
                        <Viewbox Grid.Row="1" Grid.Column="1" Stretch="Uniform" HorizontalAlignment="Right" VerticalAlignment="Stretch">
                            <TextBlock Foreground="#5a5a5a"  TextAlignment="Center" Margin="1">Descuentos</TextBlock>
                        </Viewbox>
                        <Viewbox Grid.Row="1" Grid.Column="2" Stretch="Uniform" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                            <TextBox Margin="5" Text="0.0" TextAlignment="Center"/>
                        </Viewbox>
</Grid>

Here is the result:

As you can see the "discount" TextBox is smaller than the above, and i need them to have the same width and height. How can i achieve this? I am putting everything inside a ViewBox to make the resize for me, but is it right? i already tried several methos like this one, but it makes the text really small.

Answer 1

You don't need the Viewboxes at all:

    <TextBlock Grid.Row="0" Grid.Column="1"  Foreground="#5a5a5a" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"  TextAlignment="Center" Margin="1">Subtotal</TextBlock>
    <TextBox Grid.Row="0" Grid.Column="2"  Margin="5" Text="155.60" TextAlignment="Center" IsReadOnly="True"/>
    <TextBlock Grid.Row="1" Grid.Column="1"  Foreground="#5a5a5a"  TextAlignment="Center" Margin="1">Descuentos</TextBlock>
    <TextBox Grid.Row="1" Grid.Column="2" Margin="5" Text="0.0" TextAlignment="Center"/>

Works just fine on my machine, no matter how I resize it.

If you need to keep the Viewboxes you can force your Textboxes to be the same size using Bindings

<Viewbox Grid.Row="0" Grid.Column="1" Stretch="Uniform" >
    <TextBlock Foreground="#5a5a5a" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"  TextAlignment="Center" Margin="1">Subtotal</TextBlock>
    </Viewbox>
    <Viewbox Grid.Row="0" Grid.Column="2" Stretch="Uniform" >
        <TextBox x:Name="SubtotalBox" Grid.Row="0" Grid.Column="2"  Margin="5" Text="155.60" TextAlignment="Center" IsReadOnly="True"/>
    </Viewbox>
    <Viewbox Grid.Row="1" Grid.Column="1" Stretch="Uniform" >
    <TextBlock Grid.Row="1" Grid.Column="1"  Foreground="#5a5a5a"  TextAlignment="Center" Margin="1">Descuentos</TextBlock>
    </Viewbox>
    <Viewbox Grid.Row="1" Grid.Column="2" Stretch="Uniform" >
            <TextBox Grid.Row="1" Grid.Column="2" Margin="5" Text="0.0" MaxLength="6" Height="{Binding ElementName=SubtotalBox, Path=ActualHeight}" Width="{Binding ElementName=SubtotalBox, Path=ActualWidth}" TextAlignment="Center"/>
    </Viewbox>

This binds the Width and Height of the second Textbox to the same as the first, keeping it consistent and forcing the Viewbox to size up to accommodate the bigger TextBox.