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

#296 – Controls that Derive from the Control Class

The Control class in WPF inherits from FrameworkElement and is itself the base class for controls that a user interacts with.

Some of the more common controls that derive from Control are:

  • Calendar – select a date
  • Expander – expand/collapse other controls
  • GroupBox – groups other controls
  • Label – displays some text
  • Button – click to initiate an action
  • RepeatButton – click repeatedly
  • CheckBox – turn something on/off
  • RadioButton – select one item from a group
  • DatePicker – select a date
  • ContextMenu – displays context-sensitive menu
  • Menu – select a command from a menu
  • ComboBox – select an item from a dropdown list
  • ListBox – select an item from a list
  • DataGrid – view/edit data in a grid
  • TabControl – displays a set of tabs, each containing child controls
  • StatusBar – shows information in horizontal bar
  • TreeView – displays hierarchical view
  • PasswordBox – enter a password
  • ProgressBar – shows progress of ongoing operation
  • Slider – select from a range of values
  • RichTextBox – edit a formatted document
  • TextBox – enter/edit some text

#295 – Blend Provides Intellisense

Expression Blend 4 provides Intellisense in its code editor in the same way that Visual Studio 2010 does.  It offers suggestions for next elements that make sense in the current context.  Intellisense in Blend is a little less rich than the version in Visual Studio, offering suggestions a little less frequently.  But it does suggest available methods and properties for objects.

Blend also provides Intellisense in its XAML editor, suggesting elements and attributes.  Notice that it provides a little more information than Intellisense in Visual Studio, when editing XAML.

Unfortunately, Blend’s version of Intellisense will not suggest events for XAML elements.  Within the context of an element, only its properties are listed.  You’re better off adding events using the property pane in Blend, or using Visual Studio 2010 to add event handlers.  The version of Intellisense in Visual Studio 2010 does suggest events.

#294 – Intellisense Is Also Available in the XAML Editor

In Visual Studio, Intellisense works in not only the code editor, but also the XAML editor.  As you being typing an element name, for example, Intellisense will display a window listing possible elements.

If you press TAB while an element is highlighted, Intellisense will insert the entire element name into the XAML.

As you continue typing, Intellisense will display a list of possible attributes that are appropriate for the current element.

Again, you can press TAB to insert the complete attribute name.  Intellisense will also add an equals (=) sign and a pair of quotation (“) marks.

Intellisense is also available when entering binding expressions.

#293 – Intellisense Will Show Overloaded Methods

Intellisense in Visual Studio presents you with a list of possible methods that you can call, based on what you’ve already typed.  If there are overloaded methods available in the current context, it will let you cycle through a list of the methods.  Overloaded methods are methods that have the same name, but a different argument list and/or return type.

In the example below, there are three different methods named Bark in the Dog class.  After you’ve entered the full method name and the opening parenthesis, Intellisense displays information about the first of the three methods.  The first overload of Bark takes a single int parameter.

If you press the down arrow key, or click on the downward facing arrow icon, Intellisense shows you the second of the three methods.

You can press the down arrow key again to see the third overload.

#292 – Intellisense Includes Information About a Method’s Parameters

Intellisense will display not only a list of methods that match what you’ve already typed, but will also show you information about the method’s parameters.

Assume that you begin entering the name of a method in the Dog class.  Intellisense shows you information about the  method.

If you now press the Tab key, Visual Studio will fill in the complete method name.

If you now enter an opening parenthesis, Intellisense will list the name of the Bark method again, with the first parameter in bold and a description of the first parameter.  (The method and parameter information will only be displayed if the class has defined the appropriate XML Documentation elements).


At this point, you can enter a value for the first parameter and then enter a comma.  Intellisense displays information about the second parameter.

#291 – Intellisense Lists Available Methods and Properties

When you type a period (.) after a variable that is a reference-typed variable, Intellisense in Visual Studio will display a list of relevant class members.

In the example below, the variable d is an instance of the Dog class.  When you enter a period (.) after the variable name, Intellisense displays a list of the members of the Dog class.  This includes both methods and properties.

You can use the arrow keys to select a specific class member.  As each class member is highlighted, information about the method or property is display to the right.