#322 – Giving StackPanel Child Controls an Explicit Size

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>

#321 – HorizontalAlignment and VerticalAlignment

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

By default, controls placed in a vertically oriented StackPanel are stretched horizontally to fill the width of the StackPanel.  The StackPanel container sizes its child elements this way because the children’s HorizontalAlignment property is set to Stretch by default.

We can override this behavior by setting HorizontalAlignment to Left, Center or Right.  The control will then be aligned as indicated and the width set to fit the content.

    <StackPanel >
        <Label Content="Gene Autry the singing cowboy" Background="Pink"/>
        <Button Content="I Like Gene" HorizontalAlignment="Center"/>
        <Label Content="Roy Rogers" Background="Aqua"/>
        <Button Content="I Like Roy Rogers Yes I Do" HorizontalAlignment="Right"/>
    </StackPanel>


The valid values for HorizontalAlignment are:

  • Left
  • Center
  • Right
  • Stretch – stretch to fill available width

The valid values for VerticalAlignment are:

  • Top 
  • Center
  • Bottom
  • Stretch – stretch to fill available height

#320 – Default Size of StackPanel Child Controls

By default, a StackPanel uses the following logic for sizing its child controls.

If Orientation is vertical

  • Child height set to fit content
  • Child width stretched to fit width of the StackPanel

If Orientation is horizontal

  • Child width set to fit content
  • Child height stretched to fit height of the StackPanel

The example below shows a set of child controls, layed out vertically.

    <StackPanel>
        <Label Content="Gene Autry the singing cowboy" Background="Pink"/>
        <Button Content="I Like Gene" FontSize="18"/>
        <Label Content="Roy Rogers" Background="Aqua" FontSize="20"/>
        <Button Content="I Like Roy Rogers Yes I Do"/>
        <TextBox Text="This is a TextBox"/>

        <Label Content="Tex Ritter" Background="PaleGoldenrod"/>
        <Button Content="I Like Tex" FontSize="20" />
        <Label Content="Jorge Negrete" Background="Lavender"/>
        <Button Content="I Like Jorge Yes I Do"/>
    </StackPanel>

Setting the Orientation to horizontal gives us:

#319 – The StackPanel Stacks Controls Vertically or Horizontally

StackPanel is a container that allows arranging its child controls in a single column vertically or a single row horizontally.

Like other panels, StackPanel contains child elements that are instances of the UIElement class.

    <StackPanel>
        <Label Content="Gene Autry"/>
        <Button Content="I Like Gene"/>
        <Label Content="Roy Rogers"/>
        <Button Content="I Like Roy"/>
        <Label Content="Tex Ritter"/>
        <Button Content="I Like Tex"/>
        <Label Content="Jorge Negrete"/>
        <Button Content="I Like Jorge"/>
    </StackPanel>


By default, StackPanel stacks its controls vertically.  You can stack them horizontally using the Orientation property.  You can specify the orientation in XAML as either Horizontal or Vertical.

    <StackPanel Orientation="Horizontal">
        <Label Content="Gene Autry"/>
        <Button Content="I Like Gene"/>
        <Label Content="Roy Rogers"/>
        <Button Content="I Like Roy"/>
        <Label Content="Tex Ritter"/>
        <Button Content="I Like Tex"/>
        <Label Content="Jorge Negrete"/>
        <Button Content="I Like Jorge"/>
    </StackPanel>

#318 – TextBox Basics

A TextBox control is a control that displays some text and allows a user to edit it.

The Text property controls that text that is displayed in the TextBox.  It can be set, to indicate the text that should appear in the TextBox.  It can also be read, to retrieve text entered by the user.

    <StackPanel>
        <TextBox Name="txtKing" Text="I'm Henry VIII." Height="25" Width="150"/>
        <Button Content="Display Text" Click="Button_Click" Width="100" Margin="10"/>
    </StackPanel>

When the program starts, the TextBox contains the desired text:

The user can edit this text or enter new text.

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show(txtKing.Text);
        }

#317 – Label Basics

The Label control in WPF typically contains text and serves to provide information to the user.  The text in a label might change dynamically, depending on the state of the application, or it might always be the same.

Users don’t typically interact with a Label control.  By default, clicking on a label doesn’t do anything and a user can’t change the text of a label.

You set the value of the text in a Label using the Content property.

        <Label Content="I'm Henry VIII, I am."/>

#316 – Changing the ClickMode of a Button

A standard Button in WPF (and in Windows in general) performs some action when you click it.  Traditionally “click it” has meant “depress and then release the left mouse button”.  The action associated with the button typically occurs only on the release of the button.

In WPF, you can change when the button fires its Click event by using the Button.ClickMode property.

  • ClickMode.Release – fires when you release the mouse button  (Default)
  • ClickMode.Press – fires when you press the mouse button
  • ClickMode.Hover – fires when you hover over the button
<StackPanel>
    <Button Content="Release" ClickMode="Release" Height="30" Width="100" Margin="15" Click="Button_Click"/>
    <Button Content="Press" ClickMode="Press" Height="30" Width="100" Margin="15" Click="Button_Click"/>
    <Button Content="Hover" ClickMode="Hover" Height="30" Width="100" Margin="15" Click="Button_Click"/>
    <Label Name="lblInfo" Margin="15"/>
</StackPanel>

 

        private int clickNum = 1;
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            Button b = sender as Button;

            lblInfo.Content = string.Format("Click {0}, Mode {1}", clickNum++, b.ClickMode.ToString());
        }

#315 – Setting IsDefault and IsCancel to the Same Button

You normally set either the IsDefault or IsCancel properties on a button, depending on its purpose.  But you can also set both properties to true for the same button.  You’d typically do this on a dialog that only has one button for closing the dialog.  In this case, you’d want the button to activate when the user pressed either ENTER or ESC (Escape).

	            <Button Content="OK" Width="100" Margin="15"
	                    IsDefault="True" IsCancel="True"
	                    Click="OK_Click"/>

#314 – Typical Usage for Default and Cancel Buttons

You’ll typically see Default and Cancel buttons used together in a window or dialog, to provide OK / Cancel functionality.

The idea is that if the user presses the ENTER key, the button marked with the IsDefault property receives a Click event, as if the user had clicked on the OK button.  The data that the user entered in the dialog is accepted and the window disappears.

If the user presses the ESC (Escape) button, the button marked with the IsCancel property receives a Click event, as if the user had clicked on the Cancel button.  The data that the user entered in the dialog is abandoned (not saved) and the window disappears.

#313 – Specify a Cancel Button in a Window

You can use the IsCancel property to specify that a particular button in a window is the cancel button.  You can still click on the button like you would any other button in the window, but if you press the ESC (Escape) key, the cancel button will respond as if it was clicked.  The button responds to the ESC key, no matter which control currently has keyboard focus.

		        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
		            <Button Content="Save" Width="100" Margin="10,20,10,20"
		                    IsDefault="True"
		                    Click="Save_Click"/>
		            <Button Content="Cancel" Width="100" Margin="10,20,10,20"
                            IsCancel="True"
		                    Click="Cancel_Click"/>
		        </StackPanel>

.