#289 – Editing WPF Code-Behind in Blend

April 29, 2011 Leave a comment

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.

Advertisement

Filed under Blend Tagged with , ,

#288 – Editing WPF Code-Behind in Visual Studio

April 28, 2011 Leave a comment

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.

Filed under Visual Studio Tagged with , ,

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

April 27, 2011 Leave a comment

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.

Filed under Blend Tagged with , ,

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

April 26, 2011 Leave a comment

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.

Filed under Visual Studio Tagged with , ,

#285 – Rotating an Image

April 25, 2011 2 Comments

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>

Filed under Controls Tagged with , , , , ,

#284 – Making an Image Translucent Using the Opacity Property

April 22, 2011 1 Comment

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.

Filed under Controls Tagged with , , ,

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

April 21, 2011 Leave a comment

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>

Filed under Controls Tagged with , , ,

#282 – The Margin Property Stores a Thickness Value

April 20, 2011 Leave a comment

The Margin property, used by many controls to specify a margin around the outside of the control, is inherited from the FrameworkElement class.  The Margin property’s type is Thickness, which is a structure.

The Thickness structure has four fields, defining the size of the margin along each edge of the control: Left, Top, Right, Bottom.  The value of each of these fields is specified in device independent WPF Units.

You can specify a Thickness value in XAML by listing the four values in a comma-separated string, in the following order: “left, top, right, bottom”.

	<Image Name="imgKlondike" Source="TractorSm.png" Margin="5,10,5,10"/>

You can also change the value of a Margin in code.  You can’t set individual fields in the margin, but you can set the property to a new instance of a Thickness.

            Thickness oldMargin = imgKlondike.Margin;

            imgKlondike.Margin = new Thickness(
                oldMargin.Left + 2.0,
                oldMargin.Top + 2.0,
                oldMargin.Right + 2.0,
                oldMargin.Bottom + 2.0);

Filed under Controls Tagged with , , ,

#281 – Give an Image Control More Room with a Margin

April 19, 2011 1 Comment

An Image control will normally try to fill all of the available space, with the Stretch property dictating in which dimensions the image is stretched to fill the container.

If you want to stretch the image to fill the space, but you want a little whitespace around the edges of the image, you can use the Margin property.

When specified in XAML, the Margin property takes four comma-separated values, specifying “left, top, right, bottom” margin values.  The units are the standard WPF device independent units.

	<Image Name="imgKlondike" Source="TractorSm.png" Margin="5,10,5,10"/>

Notice that if we look at the Image control in the designer, we can see the margins.  The light blue lines show the boundaries of the Image control itself and you can see the margins outside the line.  The white vertical bands are due to the Stretch behavior–the image stretches just to fit, preserving its aspect ratio.


Filed under Controls 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 , , , ,

← Older posts