#303 – Define an Access Key for a Control Using an Underline

You define an access key for a control by including an underscore ‘_’ character immediately before the desired access key character in the control’s caption or label.  You can then use that character, in combination with the ALT key, to activate the control or give it focus.

Here are some examples:

        <Button Content="_Eggs" Width="100" Margin="10" Click="Button_Click"/>
        <CheckBox Content="_I'm hungry now" Margin="10" HorizontalAlignment="Center"/>
        <RadioButton Content="Pick _Me" Margin="10" HorizontalAlignment="Center"/>

#302 – Access Keys for Controls that Don’t Have a Caption

Access keys are ALT key shortcuts that allow you to activate a control, or give focus to a control.

For controls that have captions, like buttons and checkboxes, the access key is the character in the caption that is underlined when you press the ALT key.

For controls that do not have a caption, a user interface will typically include a label near the control that does have an access key.  Activating the access key of that label will typically give focus to the nearby control.

In the example below, the TextBox and ComboBox controls do not have access keys of their own.  But both have an associated label with an access key.

Activating the access key of one of these labels will give focus to their associated control.

#301 – Using Access Keys

An access key is a keyboard shortcut assigned to a control that has an associated text label.  Access keys allow users to activate a control using the keyboard rather than using the mouse to click on the control.

Access keys are triggered by pressing the ALT key along with one of the characters in the control’s label.  When you click or hold the ALT key, Windows will show you the access keys for all controls in the current window by underlining the character used for the access key.

Here’s the main window for an application that was just started.  The access keys are not visible.


When you press the ALT key, Windows underlines the characters corresponding to the access keys.

You can activate a control by pressing the associated access key after pressing ALT.  Pressing ALT-H in this window would be equivalent to clicking on the “Ham” button.

#300 – Button is a ContentControl

Button is a ContentControl, which means that it can contain exactly one child control.  The child element can be any .NET object.

A simple string is the most common content for a Button.

        <Button Content="Click me" Click="Button_Click"/>

Examining the Button control at runtime, you can see that its stores an instance of a string in its Content property.  Also note that the base type of Content is object, meaning that the button could store any .NET object as its content.

Here’s a Button that contains a single Ellipse control as its content:

        <Button Click="Button_Click" Width="140" Height="80">
            <Ellipse Fill="PaleGreen" Stroke="Blue" StrokeThickness="5" Width="120" Height="60"/>
        </Button>


And here’s a Button that uses a StackPanel to host several child controls.

        <Button Click="Button_Click" Width="140" Height="120">
            <StackPanel>
                <Ellipse Stroke="Blue" StrokeThickness="5" Width="120" Height="60"/>
                <Label Content="Name my ellipse"/>
                <TextBox />
            </StackPanel>
        </Button>

#299 – Controls Do Not Need a Name

In WPF, giving a control a name is optional.  You name a control a name using the Name attribute.  (You can also use the x:Name attribute to name XAML elements that do not derive from FrameworkElement).

<Button Name="btnSave" Content="Save" Height="25" Width="80" Click="Save_Click"/>

You should give a control a name only if you need to access the control from your code-behind.  When a control has a name, you can use that name to interact with the control from the code-behind.

double buttonArea = btnSave.Height * btnSave.Width;
btnSave.Focus();

Notice that you don’t need to name a control in order to attach an event handler to it. You only need to define the name of the handler in the XAML.

		<Button Content="Save" Height="25" Width="80" Click="Save_Click"/>

The code-behind then defines the handler using the same name.

        private void Save_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("You clicked on the Save button");
        }

#298 – Button Basics – Content and Click

The Button control in WPF represents a visual representation of a button that a user can click on.  It will typically initate some action.

Here’s an example, with two buttons.

You specify a button’s content–typically a text label–using the Content property.  Like other controls that descend from FrameworkElement, you can specify the height and width using the Height and Width properties.

		<Button Content="Save" Height="25" Width="80" />

You can execute some piece of code when the user clicks on the button by adding an event handler for the button’s Click event.

First, attach the handler in the XAML:

		<Button Content="Save" Height="25" Width="80" Click="Save_Click"/>

Then, define the corresponding method in the code-behind class:

        private void Save_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("You clicked on the Save button");
        }

#297 – Create a Mirror Image of a Control or Image

You can flip any image or control, creating a mirror image, by using a 2D scaling transformation.

A scaling transform is represented by an instance of the ScaleTransform class.  You use it to scale the visual representation of any image or control in the X or Y dimension (or both).

The ScaleX and ScaleY properties of the ScaleTransform represent the scaling factors in either dimension.  These values are normally positive, but we can use values less than zero to indicate that we also want the object flipped in the corresponding dimension.

In the example below, we scale an image to half (50%) its original size, and flip it in the X dimension.

	<StackPanel Orientation="Horizontal">
		<Image Source="NativeAmerican.jpg" Margin="10" Stretch="None"/>
		<Image Source="NativeAmerican.jpg" Margin="10" Stretch="None">
			<Image.LayoutTransform>
				<ScaleTransform ScaleX="-0.5" ScaleY="0.5"/>
			</Image.LayoutTransform>
		</Image>
	</StackPanel>