Prevent a TextBox from horizontal expanding in WPF

Question

I have the following style defined in my App.xaml

<Style x:Key="textBoxMultiline" TargetType="{x:Type TextBox}" >
    <Setter Property="VerticalScrollBarVisibility" Value="Auto" />
    <Setter Property="HorizontalScrollBarVisibility" Value="Hidden" />
    <Setter Property="MinHeight" Value="50" />
    <Setter Property="TextWrapping" Value="Wrap" />
</Style>

And throughout the solution we're using it on every text box that needs a brief text.

<TextBox x:Name="textBoxDescription" Grid.Row="2" Grid.Column="1" Style="{DynamicResource textBoxMultiline}" />

Everything works great, but then the client complains about some fields were corped on older monitors with lower resolutions, so I placed a ScrollViewer on one of the higher visual tree nodes to prevent the corping.

<ScrollViewer Height="Auto" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
   ...
</ScrollViewer>

Strangely, the TextBoxes with the above style start expanding to the right instead of wrapping the text.

Is there a way to prevent this without removing the ScrollViewer?

Answer 1

If you don't want to hard code the width then you can go for element binding the width of the parent item.

Here I am binding TextBox MaxWidth with ScrollViewer actual width. You also have to make sure that the ColumnDefinition width should be set to "*" not to "Auto". If you set it to Auto it will neglect the ScrollViewer width and keep on expanding the width of ScrollViewer and TextBox. I think you fall in this case...

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <ScrollViewer HorizontalScrollBarVisibility="Auto" Name="scv">
        <TextBox Height="30" TextWrapping="Wrap" MaxWidth="{Binding ElementName=scv, Path=ActualWidth}"></TextBox>
    </ScrollViewer>
</Grid>

Answer 2

I tried the aforementioned examples and they didn't work so, I solved the problem myself. There are two ways of solving this issue:

The first solution is implemented in XAML using data bindings. I advice you not to bind the control by itself. The XAML solution is implemented by binding a control with the desired ActualWidth and ActualHeight proprieties to the textbox MaxHeight and MaxWidth proprieties.

<TextBlock x:Name="PasswordText" Margin="0,0,0,20" FontFamily="Bahnschrift SemiBold Condensed" Text="PASSWORD" FontSize="20"> 

 
<TextBox x:Name="PasswordTextBox" MaxWidth="{Binding ElementName=PasswordText, Path=ActualWidth}" MaxHeight="{Binding ElementName=PasswordText, Path=ActualHeight}">

The next solution is implemented by generating a Loaded event in XAML, creating it in the C# code and then setting within the Loaded event the MaxWidth and MaxHeight proprieties of the textbox as the textbox ActualWidth and ActualHeight proprieties.

//  It doesn't have a problem like in XAML if you pass the textbox its own   
//  ActualWidth and ActualHeight to the MaxWidth and MaxHeight proprieties. 


        private void Log_In_Page_Loaded(object sender, RoutedEventArgs e)
        {
            UsernameTextBox.MaxHeight = UsernameTextBox.ActualHeight;
            UsernameTextBox.MaxWidth = UsernameTextBox.ActualWidth;
        }

Choose the one that suits your design better, but I think, in my opinion, that this is the most effective, simple, stable and effective way of solving this problem.

Answer 3

You must define a MaxWidth for the TextBox, otherwise there's no limit because the ScrollViewer.

Answer 4

The solution provided from @bathineni helped me solve my problem. Here is what worked for me:

<Grid >
    <Grid.ColumnDefinitions>
    <ColumnDefinition Width="50"/>
    <ColumnDefinition  Width="*"/>
</Grid.ColumnDefinitions>
    <Button Grid.Column="0" Width="30" Height="23" Margin="10,5" Content="..."/>
    <ScrollViewer  Grid.Column="1" HorizontalScrollBarVisibility="Disabled" verticalScrollBarVisibility="Disabled" Name="scv">
         <TextBox Height="25" Text="Insert here long text" MaxWidth="{Binding ElementName=scv, Path=ActualWidth}" HorizontalAlignment="Stretch" />
    </ScrollViewer>
</Grid>