#289 – Editing WPF Code-Behind in Blend

WPF applications are made up of markup (XAML) and code-behind (managed code).  The markup defines the layout and appearance of the application, whereas the code-behind defines the behavior.

You can use the code editor in either Visual Studio or Blend to edit code-behind.

The code editor in Blend is similar to the editor in Visual Studio, providing color coding and Intellisense.

You can open the code editor in several different ways.

Double-click the code file from the Project window.  For C#, this is a .cs file.

Right-click the code file in the Project window and select Open.

Note that in both cases, you need to first expand the parent .xaml file in the project hierarchy.  The code-behind is listed under its associated .xaml file.

#288 – Editing WPF Code-Behind in Visual Studio

WPF applications are made up of markup (XAML) and code-behind (managed code).  The markup defines the layout and appearance of the application, whereas the code-behind defines the behavior.

You use the code editor in Visual Studio to edit code-behind.

You can open the code editor in several different ways.

Double-click the code file from the Solution Explorer.  For C#, this is a .cs file.

Right-click a .xaml file and select View Code.

Right-click anywhere in the design view editor and select View Code.  You can do this either on the design surface or in the XAML editor.

You can also press the F7 key while you have a .xaml file open in the design view editor, or have a .xaml file selected in the Solution Explorer, to open the corresponding code-behind file in the code editor.

#287 – Adding Controls to a Window in Blend by Editing XAML

You can add a WPF control to a window by using the design view editor in Blend.  You add the control by dragging and dropping it onto a design surface.

You can also add a control by editing the XAML directly while in the design view editor in Blend.

To open the design view editor for a particular window, double-click the associated .xaml file in the Projects window.

The design view editor will open, with the design surface showing and the XAML hidden.

Change the editor to be XAML-only or split screen by clicking on the appropriate icon in the upper right corner of the tab that shows the design surface.

 

If you choose Split, the XAML editor will appear in the lower half of the screen.

You can then enter or edit XAML directly in the XAML editor.

#286 – Adding Controls to a Window in Visual Studio by Editing XAML

You can add a WPF control to a window by using the design view editor in Visual Studio.  You add the control by dragging and dropping it onto a design surface.

You can also add a control by editing the XAML directly while in the design view editor in Visual Studio.

To open the design view editor for a particular window, double-click the associated .xaml file in the Solution Explorer.

The editor will show up as a split screen, with the design surface on the top and the XAML that defines the window contents below.

You can add a control by manually entering XAML in the lower window.  Here’s the XAML for a simple button.

As you enter XAML in the lower half of the editor, the design surface in the top half of the window will update to reflect the changes to the XAML.

#285 – Rotating an Image

You can rotate an Image control by assigning a rotation transform to its LayoutTransform property.

		<Image Source="TractorSm.png">
			<Image.LayoutTransform>
				<RotateTransform Angle="45"/>
			</Image.LayoutTransform>
		</Image>

#284 – Making an Image Translucent Using the Opacity Property

Since the Image control inherits (indirectly) from UIElement, it has an Opacity property.  The Opacity property allows content behind the image to show through the image.  Its value ranges from 0.0 to 1.0, with 0.0 indicating that the image is fully transparent (doesn’t appear at all) and 1.0 indicating that the image is fully opaque (nothing shows through).

In the example below, we bind a Slider‘s Value property to the Opacity of an Image, so that we can easily change the opacity.  We also set the window background to a gradient fill.

When the Opacity is 1.0, the image is fully opaque and the gradient doesn’t show through the image at all.

When Opacity is 0.0, the image is transparent and we just see the gradient.

When the Opacity is between 0.0 and 1.0 (e.g. 0.2), the image is translucent and the background gradient shows through.

#283 – A Window Can Have Only a Single Child Element

In WPF, a Window can have only a single child element.  Window inherits from ContentControl, which is a control that contains a single child element, referenced by its Content property.

Your window might have a single simple child control, like a Button.

<Window>
	<Button Content="Big Daddy Button"/>
</Window>

Since having a single control in your application is not very useful, it’s more common that the single child control of a Window is a container control like StackPanel, which in turn can contain multiple child elements.

<Window>
	<StackPanel>
		<Label Content="You can enter your name here:"/>
		<TextBox />
		<Button Content="Push to Continue"/>
	</StackPanel>
</Window>