#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 , , , , ,

#760 – Horizontal and Vertical Alignment Basics

February 20, 2013 1 Comment

The general idea of the HorizontalAlignment and VerticalAlignment properties, for objects that inherit from FrameworkElement, is to indicate how the element is positioned within the space that the parent panel provides, after accounting for any margins.

Different values for HorizontalAlignment and VerticalAlignment only lead to different layout if the parent panel provides more room than the child element requires, in the corresponding dimension.

In the grid shown below:

  • Labels in the 1st row have HorizontalAlignment set to Left
  • Labels in 2nd row have HorizontalAlignment set to Center
  • Labels in 3rd row have HorizontalAlignment set to Stretch
  • 1st column width is set to Auto–make wide enough for largest item
  • 2nd column width takes up remaining space

760-001

Things to note:

  • Labels in 2nd column have more room, so horizontal alignment results in different behavior
  • 1st column sizes to fit 2nd row, so horizontal alignment doesn’t always apply

Filed under Layout Tagged with , , , ,

#387 – Set Background Color to See How Layout Works

September 15, 2011 Leave a comment

It’s sometimes hard to understand how a container is laying out its children.  You can use the Background property of each control, or of the panels, to get a better idea of where things are.

Suppose that we have a GUI that includes a handful of controls and two nested panels.

    <StackPanel Orientation="Vertical">
        <Label Content="Bob's Your Uncle" HorizontalAlignment="Right"/>
        <StackPanel Orientation="Horizontal">
            <Label Content="Paul"/>
            <Button Content="Ringo" Margin="10"/>
            <TextBox Text="George" VerticalContentAlignment="Bottom"/>
        </StackPanel>
        <TextBox Text="Herman was here.."/>
    </StackPanel>

The GUI would look like this:

To better see how things are being layed out, we can set the Background to a different color for each element.

    <StackPanel Orientation="Vertical" Background="Pink">

        <Label Content="Bob's Your Uncle" HorizontalAlignment="Right" Background="Lavender"/>

        <StackPanel Orientation="Horizontal" Background="LightBlue">
            <Label Content="Paul" Background="Red"/>
            <Button Content="Ringo" Margin="10" Background="Green"/>
            <TextBox Text="George" VerticalContentAlignment="Bottom" Background="Blue"/>
        </StackPanel>

        <TextBox Text="Herman was here.." Background="Orange"/>
    </StackPanel>

Filed under Layout Tagged with , , , , ,

#386 – Layout = Panels + FrameworkElements + Alignment/Margins/Padding

September 14, 2011 1 Comment

Layout in WPF is the process by which the location and size of all user interface elements is determined.

A user interface is composed of an outer Window or Page which contains a hierarchy of user interface elements.  The hierarchy can contain individual user interface elements or Panels, which in turn contain a collection of child FrameworkElements.

Panel is an abstract class that serves as a parent for specific layout panels, including Canvas, DockPanel, Grid, StackPanel and WrapPanel.

A panel will contain a collection of child FrameworkElement instances.  These can be individual controls that derive from FrameworkElement, directly or indirectly.  Because Panel is itself a child of the FrameworkElement class, a panel can contain other panels.

FrameworkElement child elements are position within a parent using properties related to alignment, margins and padding.  These properties include:

  • HorizontalAlignment, VerticalAlignment  and Margin  (from FrameworkElement)
  • HorizontalContentAlignment, VerticalContentAlignment and Padding  (from Control)

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

#330 – HorizontalContentAlignment and VerticalContentAlignment

June 28, 2011 Leave a comment

Recall that the HorizontalAlignment and VerticalAlignment properties specify how child controls should be located and sized within their parent container.

The HorizontalContentAlignment and VerticalContentAlignment properties are similar, but specify how a control’s content should be aligned, within the interior of the control.

Below is an example of some non-default values for HorizontalContentAlignment.

    <StackPanel>
        <Label Content="Buttons:" FontWeight="Bold"/>
        <Button Content="Center (Default)"/>
        <Button Content="Left" HorizontalContentAlignment="Left"/>
        <Button Content="Right" HorizontalContentAlignment="Right" />

        <Label Content="Labels:" FontWeight="Bold" Margin="0,20,0,0"/>
        <Label Content="Left (Default)" Background="Thistle"/>
        <Label Content="Center" HorizontalContentAlignment="Center" Background="Goldenrod"/>
        <Label Content="Right" HorizontalContentAlignment="Right" Background="PaleGreen"/>
    </StackPanel>

Filed under Layout Tagged with , , , ,

#280 – Alignment Properties for an Image

April 18, 2011 Leave a comment

If an Image control is not set to fill all of the available space, you can specify how it should be aligned horizontally and vertically within the available space.

In the example below, the Stretch property is set to Uniform, so we would normally have empty space on either side of the image when the window’s aspect ratio is greater than the aspect ratio of the image.  The Image control’s HorizontalAlignment is set to Center, by default, so there are white bars on both sides of the image.

	<Image Name="imgKlondike" Source="TractorSm.png"/>

If we want to left-align the image in the available space, we can set the HorizontalAlignment property to Left.

<Image Name="imgKlondike" Source="TractorSm.png" HorizontalAlignment="Left"/>

Filed under Controls Tagged with , , , ,