none
How to avoid Textboxes growing on typing?

    Question

  • Hi,

    I have a very simple and basic question, yet were unable to find it being discussed anywere. With the standard WPF Textbox control, when you don't set it's Witdth property, the text will autosize. That's ok, but the text will also grow when you type in a text longer that the view area.

    This behaviour is however annoying. I want the textbox to use the width it is given by the parent panel (grid, stackpanel), but not to dictate the width back. The only way one can stop the growth seems to be setting the Width or MaxWidth property, but that is pretty poor windows.forms solution. When I have a window containing a grid and there a couple of textboxes, then I want to resize the textboxes to resize when user resizes the window. But withouth the textboxes growing wild when user types.

    I tried binding MaxWidth to ActualWidth, which was not a good idea (the textbox remained at zero width), I tried playing with MeasureOverride and ArrangeOverride, none of them turned to work as expected. At best I was able to make the textbox stop growing, but still the caret was diappearing beyond the right edge like the textbox still continued there.

    So, is there any standard way to stop the textbox growing as the user types?
    Friday, March 07, 2008 1:20 PM

Answers

  • You should bind TextBox.MaxWith (or Width) to ActialWidth of other "placeholder/fake" element that will auto size

    together with TextBox. For example replave TextBox with:

     

    <Grid>

        <Border Name="b"  />

        <TextBox Width="{Binding ElementName=b,Path=ActialWidth}" />

    </Grid>

       

    Sunday, March 09, 2008 9:51 AM
  • you could listen to wndow sizechanged event to modify the width of the textbox... or you could bind the width to the window width* some factor using an arithmetic converter.

     

    Sunday, March 09, 2008 6:31 AM

All replies

  • Hi,

    you can make the text wrap to form additional lines by setting its TextWrapping property
    to Wrap or WrapWithOverflow. Wrap never allows a line to go beyond the control’s bounds,
    forcing wrapping even if it’s in the middle of a word. WrapWithOverflow only breaks a line
    if there’s an opportunity, so long words could get cut off.
    Friday, March 07, 2008 1:30 PM
  • you could use textwrapiing to control text within a certain width.... if you need to grow the textbox after a certain width then you could use the formatted text class ot determine the length of the string to increase the width of the textbox

    Friday, March 07, 2008 2:34 PM
  • Hi Mykhaylo,

    unfortunately, Wrapping does not solve it, I had tried it before. The use I am talking about is a Window of classical form-style, meaning the Window contains a grid and there is a set of labels in one column and a set of textboxes, comboboxes etc in the other column, just the classical form-style window as seen thousand times before. The textboxes are supposed to be single-line and not change any dimension by themselves - so it is like the classical TextBox as it was in the Windows.Forms.

    However, when you resize the window, the labels stay the same size, but the text/combo boxes adapt to the new size. This was easily achieved in Windows.Forms by setting the Anchor property of these text/comboboxes to Top | Left | Right.

    Now in WPF if i manually set the Width of the textbox, I get completely no adaptation to the window's size. If I set it to Auto, well, then it adapts, but also dictates the size according to the typed text so the window grows and for the form-filling community this is not acceptable.
    Friday, March 07, 2008 3:23 PM
  • you could listen to wndow sizechanged event to modify the width of the textbox... or you could bind the width to the window width* some factor using an arithmetic converter.

     

    Sunday, March 09, 2008 6:31 AM
  • You should bind TextBox.MaxWith (or Width) to ActialWidth of other "placeholder/fake" element that will auto size

    together with TextBox. For example replave TextBox with:

     

    <Grid>

        <Border Name="b"  />

        <TextBox Width="{Binding ElementName=b,Path=ActialWidth}" />

    </Grid>

       

    Sunday, March 09, 2008 9:51 AM
  • Other stuff. You can add Grid line instead of StackPanel.
    In example below text box occupy space between label at left and button at rigth edge.

    <Grid>

    <Grid.ColumnDefinitions>

    <ColumnDefinition Width="Auto"/>

    <ColumnDefinition/>

    <ColumnDefinition Width="Auto"/>

    </Grid.ColumnDefinitions>

    <Label Grid.Column="0" VerticalAlignment="Top">Select Folder</Label>

    <TextBox Grid.Column="1" VerticalAlignment="Top"></TextBox>

    <Button Grid.Column="2" Margin="10,0,0,0" VerticalAlignment="Top" Width="30" Click="SelectRootFolder_Click">...</Button>

    </Grid>

    Monday, August 18, 2008 7:23 AM
  • Wrap the TextBox in a Grid 
    <Grid>
      <Grid.RowDefinitions><RowDefinition Height="Auto"></Grid.RowDefinitions>
      <Grid.ColumnDefinitions><ColumnDefinition Height="*"></Grid.ColumnDefinitions>
      <TextBox />
    </Grid>
    The Grid will force TextBox to always display at the maximum available width and its natural height

     Or set TextBox.MaxWidth

    --Ifeanyi Echeruo
    This posting is provided "AS IS" with no warranties, and confers no rights.
    Tuesday, September 30, 2008 10:17 PM
  • You should bind TextBox.MaxWith (or Width) to ActialWidth of other "placeholder/fake" element that will auto size

    together with TextBox. For example replave TextBox with:

     

    <Grid>

        <Border Name="b"  />

        <TextBox Width="{Binding ElementName=b,Path=ActialWidth}" />

    </Grid>

       

    This works but also adding the same binding to the MaxWidth property. This is my example:

     

     

     

     

     


    LKZ:

    <TextBox Grid.Row="3" Name="txtComments" MinLines="1" MaxLines="4" TextWrapping="Wrap" VerticalScrollBarVisibility="Auto" AcceptsReturn="True" Height="80" Width="{Binding ElementName=borderComments, Path=ActualWidth}" MaxWidth="{Binding ElementName=borderComments, Path=ActualWidth}" Text="{Binding MyModel.Comments}" />
    <Border Grid.Row="2" BorderThickness="1, 0, 1, 0" BorderBrush="Black" Name="borderComments"><Label Grid.Row="1" Style="{StaticResource ColumnHeader}" HorizontalContentAlignment="Left" Content="{x:Static loc:MyRec.lblComments}" /> </Border>
    Wednesday, October 06, 2010 1:52 PM