#434 – Canvas Layout Mode in Blend

November 21, 2011 1 Comment

By default, when you edit a Grid in Blend, margins are preserved when you change the Grid layout, but the visual appearance of controls may change.  This is know as grid layout mode and is indicated by the small icon in the upper left corner of a Grid on the design surface.

You can also switch to canvas layout mode, which allows editing the Grid in a mode that behaves a little more like the Canvas panel.  Controls retain their position and size and their margins are adjusted as Grid elements are resized.

You can click on the icon shown above to switch to canvas layout mode.  In the example below, I switch to canvas layout mode and then change the width of the second column.  The Button’s position and size stay the same and its margins are adjusted.

Margins before the change:

Margins after the change:

Filed under Blend Tagged with , , , ,

#433 – Preservation of Margins While Editing Grid in Blend

November 18, 2011 2 Comments

Assume that you have a simple 2×2 Grid and you use the design surface in Blend to place a Button in the Grid.  If you place the Button by dragging it and dropping it, its Grid.Row and Grid.Column properties will be set accordingly and its Margin will be set to reflect the specific spot where you dropped it.

	<Grid Height="300" Width="300">
		<Grid.RowDefinitions>
			<RowDefinition Height="0.5*"/>
			<RowDefinition Height="0.5*"/>
		</Grid.RowDefinitions>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="0.5*"/>
			<ColumnDefinition Width="0.5*"/>
		</Grid.ColumnDefinitions>
		<Button Content="Button" Grid.Column="1" Margin="59,48,16,0" Grid.Row="1" VerticalAlignment="Top"/>
	</Grid>

If you now change the width of the 2nd column, making it wider, you’ll notice that the button’s Margin is preserved, which means that the size of the button changes.

		<Button Content="Button" Grid.Column="1" Margin="59,48,16,0" Grid.Row="1" VerticalAlignment="Top"/>

This is normally what you want.  As you change things on the design surface, the XAML does not change but the visual appearance of the controls may change.

Filed under Blend Tagged with , , , ,

#428 – Setting Other Layout Properties from Within Blend

November 11, 2011 Leave a Comment

You can use the Properties window in Blend to set any of the properties of a control hosted in a layout container, including layout-related properties.

For example, assume that we have a Grid containing a couple of Button controls.  If you click on one of the buttons, you’ll see its properties in the Properties window to the right of the design surface.

You can see all of the layout related properties in the Layout panel, including height and width, row and column (where in the Grid is the button located), and alignment and margin properties.

You can click on the various horizontal and vertical alignment icons to change the alignment.

Less frequently used properties can be accessed by clicking on the little expander icon at the bottom of the layout panel.

The new panel contains properties like HorizontalContentAlignment, VerticalContentAlignment and Padding values.

Filed under Blend Tagged with , ,

#427 – Changing Margins from Within Blend

November 10, 2011 1 Comment

You can adjust margins by entering values directly in XAML.  You can also change margins by clicking and dragging on elements on the design surface in Blend.

Below is a Grid with two buttons:

    <Grid ShowGridLines="True" Background="Beige" Margin="10">
        <-- row/col defs here -->
        <Button Grid.Row="0" Grid.Column="0" Content="Dance" Margin="5" VerticalAlignment="Center"/>
        <Button Grid.Row="1" Grid.Column="1" Content="Play Ukulele" Margin="5" HorizontalAlignment="Center"/>
    </Grid>

Left-click on the Dance button on the design surface in Blend to see an indication of the margins.

Because the Dance button’s VerticalAlignment property is set to Center, it autosizes its height and the top/bottom margin values are not used.  The dashed lines above/below the button indicate that this distance is automatically set.

You can change the left or right margins by left-clicking on the left or right edges of the button and dragging.

You’ll see the margin value updated in the XAML.

Filed under Blend Tagged with , ,

#414 – Creating a Grid in Expression Blend

October 24, 2011 Leave a Comment

You can create a Grid element by editing XAML directly, in Visual Studio or Blend.  You can also use the designer in Blend to add a Grid and set its properties.

To add a Grid, find it in the Assets panel (under Controls | Panels).  Double-click to add it to the current window.

You’ll notice that a Grid element is added to the XAML (with no hard-coded dimensions).

You can add rows/columns to the Grid by clicking in the blue bars at the left and top of the Grid in the designer.  An orange triangle/line will appear, showing you the location of the new row or column.

XAML is updated.

You can click on the icon next to each row (column) to cycle between Star sized, Pixel sized and Auto sized for the row height (column width).

You can also set properties for the entire Grid from the Properties pane.

Filed under Blend Tagged with , ,

#295 – Blend Provides Intellisense

May 9, 2011 Leave a Comment

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.

Filed under Blend Tagged with , ,

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

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

#194 – Hello WPF World, Love Blend

January 22, 2011 Leave a Comment

Let’s create a simple application using Blend.  We’ll just have a single button in a window, which will display a message when you click it.

Use Blend to create a new WPF Application project.

Find a Button on the Assets tab.

Drag it onto your main window.

Left-click to select the button.  Change its Content property to “Hello”.

The button’s content will update in the designer.

Left-click to select the button.  Click on the Events icon in the Properties panel.

Dbl-click in the text area to the right of the Click event.  A Button_Click event handler will be created and you’ll be taken to the code editor.

Erase the “TODO” comment line and add the following line:

    MessageBox.Show("I'm a Blend convert!", "About Me");

Press Ctrl-F5 to run the project.  You’ll see your main window.

Click on the Hello button to see your message.

Filed under Blend Tagged with , ,

#193 – You Can Have a Project Open in Blend and Visual Studio at the Same Time

January 21, 2011 1 Comment

Visual Studio is better for some things than Blend (e.g. writing code) and Blend is better than Visual Studio at other things (e.g. changing layout).

This means that you may often switch back and forth between the tools.  However, instead of closing and reopening the project every time, you can have the project open in both tools at the same time.

This is typically not a problem, since you’re likely not changing the same file in both tools.

If you do happen to have the same file open in both tools and you make changes and then save your changes in one tool, the other tool will warn you that changes were detected.

Visual Studio detecting changes to a file:

Blend detecting changes to a file:

The tools will warn of changes only if you happen to have the same file open in both tools.

Filed under Blend, Visual Studio Tagged with , ,

← Older posts

Follow

Get every new post delivered to your Inbox.

Join 110 other followers