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

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.

#192 – Setting a Control’s Properties Using Blend

You can set a control’s properties in either Blend or Visual Studio.  To set properties for a control from Blend, do the following:

Open the window containing the control.  Left-click to select the control.

Now make sure that the Properties icon on the Properties panel at the right side of the IDE is selected.

With the Properties icon selected, you can see all of the properties of the control that you selected, organized into logical groups.  You can view or edit the control’s properties from this panel.

For example, to change the button’s Background property, you can use the color editor in the Brushes section.

By default, Blend will create a background that is a gradient, rather than a solid color.

As you change the color in this editor, the button’s color will change in the designer.

You can also see the updated XAML, showing the linear gradient.

#191 – Setting a Control’s Properties Using Visual Studio

You can set a control’s properties in either Blend or Visual Studio.  To set properties for a control in Visual Studio, do the following:

Open the window containing the control.  Left-click to select the control.

Notice that all of the button’s properties are now listed on the Properties tab of the Properties window, at the right side of the main Visual Studio window.

You can change a property’s value by entering the value directly into the right column in this window.  When you click in this area, the appropriate editor will pop up, depending on the property’s type.  For example, clicking on the dropdown for the Background property causes a color selector to pop up.

Once you change a property value, you’ll see the new value reflected in the XAML for the control that you changed.  Notice that the value is converted to a textual representation.

 

#190 – Adding an Event Handler to a Control Using Blend

You’ll generally use Visual Studio to create and edit event handling code for a WPF application.  But you can also add event handling code using Blend.

To add an event handler using Blend, start by left-clicking to select the control for which you want to add an event (e.g. a Button).

Now, click on the Events icon on the Properties tab to see a list of the control’s events.

Next, find the event for which you want to add an event handler and double-click in the empty area next to the event name.  The event name will be filled in and you’ll be taken to the code editor for the new handler.

If you go back to look at the XAML, you’ll also see the new event handler defined there.

#189 – Adding an Event Handler to a Control Using Visual Studio

An event handler is code that executes in response to a user-initiated event–for example, code that executes when a user clicks a button.

In Visual Studio, you can add a new event handler in several ways.  You could edit the XAML directly and enter the name of a handler, or you can just double-click in the Properties window.

To add a new event handler from the properties window, start by left-clicking to select the control for which you want to add an event (e.g. a Button).

Next, find the desired event on the Events tab in the Properties window (e.g. Click).

Double-click in the empty area to the right of the event name, generating a name for the new handler (e.g. button1_Click)..

..and you’ll be taken to the code editor, where the body of the new event handler is located.

The name of the handler also now appears in XAML.

#188 – Adding Controls to a Window Using Blend

Like Visual Studio, you can use Blend to add controls to a window by dragging and dropping the control onto the window’s design surface.

Start by finding the window that you want to edit, listed as a .xaml file in the solution explorer.

The will open the window in a design view editor.  By default, you see just the design surface of the window.  Click on the Split icon, located to the upper right.

This will change the editor to show both the design surface and the XAML.

To drag a control onto the design surface, find the list of WPF controls on the Assets tab (right under the main menu).

Once you find the control that you want, left-click and drag it onto the window’s design surface.  In the example below, we add a CheckBox to the window.

#187 – Adding Controls to a Window Using Visual Studio

In Visual Studio, you can add user interface controls to a window by dragging them onto a design surface.  Start by double-clicking on the window’s .xaml file in the Solution Explorer.

This will open the window in a design view editor.  The editor will have a design surface at the top and a XAML editor below that.

You can add new controls to the window by dragging them onto the design surface in the top pane or by editing the XAML directly.

To drag a control onto the design surface, find the list of WPF controls in the Toolbox window.  Once you find the control that you want, left-click and drag it onto the window’s design surface.  In the example below, we add a CheckBox to the window.

When you’re done dragging, the new control will show up both on the design surface and in the XAML.

#186 – When to Use Blend (vs. Visual Studio)

You could develop your entire application using only Visual Studio.  Actually, you could develop an application without Visual Studio, using your editor of choice to write the code and command line tools to build your application.

But ideally, you’ll want to use both Visual Studio and Blend.  There is a fair amount of overlap in what you can do in each tool, but the basic model is:

  • Use Visual Studio to write and debug code
  • Use Blend to create or edit layout of visual elements in your application

While you can use Visual Studio to do layout and you can use Blend to edit code, Visual Studio is better at working with code and Blend is better at working with layout.

 

#185 – Creating a WPF Application Using Blend

You can create a WPF application in either Visual Studio 2010 or Blend 4.  To create a WPF Application using Blend 4, start by clicking on the New Project icon in the dialog that appears when Blend starts.

Alternatively, you can select File | New Project after Blend starts to launch the New Project dialog.  Once this dialog opens, select WPF Application and click OK.

The resulting project structure is nearly identical to what you get if you create the application with Visual Studio 2010.

The only real difference between the projects is that the project wizard in Visual Studio 2010 also creates a default resources file and an application settings class.

#184 – Creating a WPF Application Using Visual Studio

You can create a basic WPF application using Visual Studio 2010.  Open Visual Studio and select File | New | Project.  Then select WPF Application as the template to use for creating the project.

This will generate a project with the project structure shown below.

The project contains:

  • An App class, deriving from System.Windows.Application
    • Has Main() method, defined in automatically generated App.g.i.cs file
    • Empty App.xaml file, defining main <Application> element
    • Empty App.xaml.cs file with partial class for App
  • A MainWindow class, deriving from System.Windows.Window
    • InitializeComponent() method, defined in auto-generated MainWindow.g.i.cs file, which reconstitutes object from XAML file
    • MainWindow.xaml file, containing <Window> object and a child <Grid>
    • Empty MainWindow.xaml.cs file with partial class for MainWindow