15

Any property to set to make textbox to resize according to the window size?

user496949
  • 83,087
  • 147
  • 309
  • 426

4 Answers4

26

Layout in WPF is heavily influenced by the parent container. For example, if you are creating a form with labels and input fields, consider using a Grid panel. Controls in WPF by default resize according to the layout behavior of their parent. Here is an example of a window with two labeled text boxes and two buttons that resize along with the window.

<Window>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Label Content="Contact Name" Grid.Row="0" Grid.Column="0" />
        <TextBox Grid.Row="0" Grid.Column="1" />

        <Label Content="Contact Location" Grid.Row="1" Grid.Column="0" />
        <TextBox Grid.Row="1" Grid.Column="1" />

        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right"
                    VerticalAlignment="Bottom" Grid.Row="2" Grid.Column="1">
            <Button Content="OK" Width="75" Height="24" Margin="3" />
            <Button Content="Cancel" Width="75" Height="24" Margin="3" />
        </StackPanel>

    </Grid>
</Window>

Or if you wanted something similar to the address bar layout of a browser, you could do something like:

<Window>
    <DockPanel>
        <DockPanel DockPanel.Dock="Top">
            <Button Content="Back" DockPanel.Dock="Left" />
            <Button Content="Forward" DockPanel.Dock="Left" />
            <Button Content="Refresh" DockPanel.Dock="Right" />
            <TextBox /> <!-- fill is assumed for last child -->
        <DockPanel>
        <StatusBar DockPanel.Dock="Bottom" />
        <WebBrowser /> <!-- fill is assumed for last child -->
    </DockPanel>
</Window>

Note that in the above example, I nested two DockPanel's. It could also have been achieved with a Grid but the markup would have been much more cluttered. If you are new to WPF, I'd highly suggest playing around with the various panels available to you. Once you learn when to apply a particular panel to a particular layout, it makes WPF much easier to work with.

Josh
  • 68,005
  • 14
  • 144
  • 156
3

It could be little tricky because of few constraints.

  1. Text box you cant put width auto (in my case if some one copy paste long string it goes out of boundary because of Auto Width).
  2. I can't keep it default because in case of no text it's very small in width, So I needed MinWidth.
  3. At the same time you have to have a static width representation, because we want to wrap the text for particular line.

I tried this solution which makes your width bounded to parent ( I agree there could be better solutions as well, but this was easy and worked fine)

<Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" Name="LeftColumnDefinition" />
      <ColumnDefinition Width="150" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <TextBox Grid.Column="0" BorderThickness="3" VerticalScrollBarVisibility="Auto" HorizontalAlignment="Stretch" ClipToBounds="True"
                         TextWrapping="Wrap" Width= "{Binding ElementName=LeftColumnDefinition, Path=Width}"  MinWidth="560" MinHeight="57" AcceptsTab="True" Foreground="{StaticResource darkBlueBrush}">FIX message... </TextBox>
     <Button Margin="2,0,0,0"  Grid.Column="1" Content="Publish FIX Message" Name="PublishFIX" Click="publishFix_Click" HorizontalAlignment ="Center" Height="25"/>

</Grid>

So only good thing I did was, I binned the

Width= "{Binding ElementName=LeftColumnDefinition, Path=Width}"

to <ColumnDefinition Width="*" Name="LeftColumnDefinition" />

wonea
  • 4,783
  • 17
  • 86
  • 139
Rohit Sachan
  • 1,178
  • 1
  • 8
  • 16
2

Bit late, but i want this know by everybody.

To make textbox fill whole window and resize with it you need to explicitly set its Height to Auto even if it is the default one!

ASh
  • 34,632
  • 9
  • 60
  • 82
Programista
  • 1,037
  • 5
  • 15
  • 38
1

One method would be to bind the height and width of the TextBox to the height and width of the Window, for example:

<TextBox Height={Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=Height} />

There may be a different property that might want to bind to, or you might want to use an expression so the TextBox isn't exactly the Height/Width of the parent window. A lot depends on your specific usage scenario, but this should be enough to get you started.

Bobby D
  • 2,129
  • 14
  • 21
  • 6
    -1, layout in WPF is very straightforward and doesn't require workarounds like this. The correct way would be to select an appropriate panel and let the TextBox resize the way it naturally does. – Josh Dec 21 '10 at 03:15
  • Very true. I tend to have a custom label: textbox control and sometimes have to pass these values through. It took me a while to run up against the above when I needed it. But definitely, user496949, if your design allows for it, do this. – Bobby D Dec 21 '10 at 03:19
  • 3
    I've done the whole labeled textbox control thing before. It's a pain. One trick you might find useful that avoids having to bind explicit widths is to make each labeled textbox contain a Grid with a Auto col for the label and a Star col for the text box. Then put them all in a StackPanel and set Grid.IsSharedSizeScope="True" on the StackPanel. All of the labels will align. – Josh Dec 21 '10 at 03:39
  • liked that comment Josh, very usefull tip!! (I just started playing with the Grid.IsSharedSizeScope property a few days ago while retemplating menuItems, it's a pretty nifty piece of work from MS there, tricky but very usefull !) – David Dec 21 '10 at 11:00