The text box will not stretch to fill the viewport

Question

I want the font size of my labels and text fields in my LOB form to increase and decrease with changing the size of the window or changing the resolution. To do this, I placed my labels and text fields in the viewports.

Shortcuts and custom radio buttons behave as I expect, but text fields will not stretch horizontally to fill the viewport (sorry, cannot send image due to rep). Text fields will horizontally fill the viewport if you enter them.

Here is an example of the code I'm working with:

<Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="0.186*"/> <ColumnDefinition Width="0.814*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="0.127*"/> <RowDefinition Height="0.873*"/> </Grid.RowDefinitions> <Viewbox Margin="0,0,0.917,0"> <Label Content="First name:"/> </Viewbox> <Viewbox Grid.Column="1"> <TextBox TextWrapping="Wrap"/> </Viewbox> </Grid> 

I tried placing the grid, the glass panel and the dock panel (with LastChildFill = "True") in the viewport, and then putting the text fields in these layout controls, but that didn't work either. In any case, so that the text fields horizontally fill the parent view?

This issue is similar to this: WPF TextBox will not populate the StackPanel , but this issue is related to the stack, not viewports.

Answer 1

I think what you want is not easy. ViewBox informs its subsidiaries that they have an inifite space in the layout bandwidth. After that, the display is inserted into the viewing window. Now the text field, which is ordered to infinite space, clearly can not be stretched. I have 2 solutions which, I think, are not what you want, but can be useful anyway.

First:

 <Viewbox Grid.Column="1" Grid.Row="0" Stretch="Uniform" > <Grid Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Viewbox}}, Path=ActualWidth}"> <TextBox TextWrapping="Wrap" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/> </Grid> </Viewbox> 

this will stretch the infact text box, but disable the behavior expected from the viewport. What for? We told the ViewBox to keep the aspect ratio and set the text box to fill the entire width of the viewport, which preserves the size of the text box.

The second:

it would be to add height to the grid taken from the label, modified using the scaling formula of its viewport.

I have not tried this one yet, but it will include a value converter.

In conclusion: there is no easy way to achieve what you want, due to the way the viewbox arranges its children. If you just want to stretch horizontally, my first solution works great if you want to scale. I think you should do it yourself.

Answer 2

If what you want is not working / hard then fake it:

  <TextBox GotFocus="TextBox_GotFocus" HorizontalAlignment="Stretch" BorderThickness="0" Grid.Column="1"/> <Viewbox HorizontalAlignment="Left" Stretch="Uniform" Grid.Column="1"> <TextBox x:Name="NameTextBox" Width="50" TextWrapping="Wrap" Text="Text" BorderThickness="0"/> </Viewbox> private void TextBox_GotFocus(object sender, RoutedEventArgs e) { NameTextBox.Focus(); NameTextBox.SelectionStart = NameTextBox.Text.Length; } 

Basically, what happens with the other TextBox is behind the Viewbox , and when the focus is behind the TextBox , it switches focus to the Viewbox TextBox . This will lead to some odd resizing, since you have a grid setting with relative sizes. You will need to play around with your column sizes / grid widths until you get the desired effect.