2

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:

enter image description here

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.

Community
  • 1
  • 1
Fernando Santiago
  • 2,128
  • 10
  • 44
  • 75

2 Answers2

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.

Knells
  • 827
  • 2
  • 12
  • 24
  • Without the Viewbox's the text of the Textbox's is really small (this didn't happens with Viewbox). – Fernando Santiago Oct 28 '15 at 03:13
  • I see what you mean. You can always adjust the size of the text separately if you need to. Did the second method work for you? – Knells Oct 28 '15 at 03:32
  • Thank for your time, the second method works but is not exactly what i need. I need both Textbox's to fill all the space of the column grid, this will also make them to have the same size. – Fernando Santiago Oct 28 '15 at 03:39
  • Ahh, no problem! You only need to change the Viewboxes containing the TextBoxes to `Stretch="Fill"` and TextBoxes to `Margin="0"` and they should be what you want =) – Knells Oct 28 '15 at 03:57
  • When is set the Stretch="Fill" on the Viewbox, it seems like the characters are like stretched, even if i change the HorizontalAlignment="Center" it renders the characters like that – Fernando Santiago Oct 28 '15 at 04:08
  • That's because the Viewbox fills all the available space by stretching the view of everything inside. Asking for it to not be stretched and fill the whole box isn't possible with Viewboxes(at least if you want it for all screen resolutions). It's like asking for a box that stretches without stretching. – Knells Oct 28 '15 at 19:43
0

Try binding the width of your textbox to the width of its parent.

Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=Grid}}"
Noob
  • 710
  • 11
  • 15