#920 – TextBox Sizes to Fit Its Content

October 3, 2013 3 Comments

Unless you constrain the size of a TextBox, it will changs its width to fit its contents.  If the TextWrapping property is set to wrap, it will also change its height.

Whether the TextBox is constrained depends on the its parent container and the use of alignment properties.  In the example below, the HorizontalAlignment of the TextBox defaults to Stretch, so the TextBox sizes to its container, rather than to its content.

    <StackPanel Margin="5">
        <TextBox Text="This"/>
    </StackPanel>

920-001
However, if we set the HorizontalAlignment to Center, the TextBox will size to fit its content. It will change its width as we type, accommodating the new characters.

920-002

920-003

If we also set its TextWrapping property to Wrap, it will grow until it fills the available with and then increase its height to accommodate the text.

920-004

In most applications, you’ll want to constrain the TextBox to some maximum width and height.

Advertisement

Filed under Controls Tagged with , , , , ,

#431 – Binding a Control’s Width to Its Height

November 16, 2011 5 Comments

Since you can bind a property of a control to a different property on that same control, you could bind a control’s width to its height to force the control to  always be square.

In the example below, the Button control’s width changes as the container is resized, since its HorizontalAlignment is set to Stretch.  The Height of the Button is then bound to the ActualWidth property, so that the height always matches the width.

    <StackPanel>
        <Button HorizontalAlignment="Stretch"
                Height="{Binding Path=ActualWidth, RelativeSource={RelativeSource Self}}"
                Content="Height set to Width"
                Margin="5" Padding="5"/>
    </StackPanel>


Filed under Layout Tagged with , , , ,

#430 – Setting Width and Height Using Different Units

November 15, 2011 1 Comment

When you specify the width or height of a control using a value that is a number, the value is interpreted in device independent units (1/96 in).  On a 96 dpi display, device independent units are equivalent to pixels.

<Button Width="80" Height="20" Content="80x20 units" HorizontalAlignment="Center" />

You can also add a suffix to the numeric value, indicating what type of units to use for the dimension.

  • px – device independent units (pixels on 96 dpi).  Same as including no suffix
  • in – inches
  • cm – centimeters
  • pt – points  (1 pt = 1/72 in)
    <StackPanel>
        <Button Width="100" Height="25" Content="100x25 units" HorizontalAlignment="Center" Margin="5"/>
        <Button Width="100px" Height="25px" Content="Also 100x25 units" HorizontalAlignment="Center" Margin="5"/>
        <Button Width="1.5in" Height="0.5in" Content="1-1/2 in x 1/2 in" HorizontalAlignment="Center" Margin="5"/>
        <Button Width="3cm" Height="0.5cm" Content="3 cm x 1/2 cm" HorizontalAlignment="Center" Margin="5"/>
        <Button Width="1in" Height="24pt" Content="1 in x 24 pt" HorizontalAlignment="Center" Margin="5"/>
    </StackPanel>

Filed under Layout Tagged with , , , , , , , ,

#412 – Three Ways to Set Row Height or Column Width in a Grid

October 20, 2011 3 Comments

You can set the height/width of rows/columns in a Grid using the Height and Width properties of the RowDefinition and ColumnDefinition elements.  You can specify these values in one of three different ways.

  • Auto – set height/width to fit the size of the contained element
  • numeric value – explicitly set height/width to specified number of device independent units (1/96th in)
  • * or n* – distribute remaining space proportionately across all rows/columns that set their height/width using the * mechanism

Below is an example showing these methods to set the width of four columns in a grid.

    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <!-- Contents of Grid go here -->
    </Grid>


The Chico column is set to 100 units wide, Harpo column set to fit content and all remaining space is split up between the Groucho and Zeppo columns.

Filed under Layout Tagged with , , , , , ,

#322 – Giving StackPanel Child Controls an Explicit Size

June 16, 2011 1 Comment

By default, a StackPanel will automatically size its child controls–either to fit their content, or to stretch them to fit the StackPanel‘s height or width.

You can also specify an explicit size for any child control, using the Height and Width properties.  These values override the HorizontalAlignment.Stretch or VerticalAlignment.Stretch property values.  (Note that Stretch is the default value for both of these properties).

    <StackPanel >
        <Label Content="Gene Autry the singing cowboy" Background="Pink"/>

        <!-- No explicit size and HorizontalAlignment defaults to Stretch. -->
        <!-- Height automatically fits content of button. -->
        <Button Content="I Like Gene" />

        <!-- Explicit height for label, width stretches -->
        <Label Content="Roy Rogers" Background="Aqua" Height="50"/>

        <!-- Explicith height and width for button -->
        <Button Content="I Like Roy Rogers Yes I Do" Height="50" Width="150"/>
    </StackPanel>

Filed under Layout Tagged with , , , ,

#269 – Automatically Sizing a Window to Fit Its Contents

April 7, 2011 3 Comments

You normally set the width and height of a WPF Window by setting its Width and Height properties directly.

<Window Width="400" Height="300" >

At runtime, this sets the starting window size.

If you want the window to automatically size to fit its contents, you can set the SizeToContent property.  By default, this property has a value of Manual, indicating that the Width and Height properties will dictate the window’s size.  (Ignoring the effect of min/max properties).

Setting SizeToContent to Height will force the window to adjust its height to fit the contents.

<Window Width="400" Height="300" SizeToContent="Height">

Setting SizeToContent to Width will force the window to adjust its width to fit the contents.

<Window Width="400" Height="300" SizeToContent="Width">


And setting it to WidthAndHeight will tell the window to adjust both dimensions.

<Window Width="400" Height="300" SizeToContent="Width">

Filed under Controls Tagged with , , , , ,