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

#86 – The Class Attribute Points to Your Code-Behind

The root element in a XAML file can have an x:Class attribute that specifies how to find the code-behind associated with the class being defined in the markup.

Examples:

 <Application x:Class="WpfApplication1.App"

or

 <Window x:Class="WpfApplication1.MainWindow"

When you build your project, the XAML is compiled and two things occur: 1) the XAML is converted into tokenized binary BAML; and 2) code is generated (e.g. C#) which will serve as a partial class that matches the partial class for your code-behind.  Notice that the value of the Class attribute matches the name of the corresponding class.

So in a default project, after building, you’ll get the following code files:

  • Main application
    • App.g.cs – code generated from App.xaml
    • App.xaml.cs – your code-behind for App class
  • Main window
    • MainWindow.g.cs – code generated from MainWindow.xaml
    • MainWindow.xaml.cs – your code-behind for MainWindow class

#12 – Markup and Code Behind

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.

WPF markup is written using XAML, a declarative markup language based on XML.  The XAML lists the controls that make up the application, how they are related, and how they appear.

<Grid>
    <StackPanel>
        <Button Content="Save" Height="23" Name="btnSave" Width="75" Click="btnSave_Click" />
        <Button Content="Load" Height="23" Name="btnLoad" Width="75" Click="btnLoad_Click" />
    </StackPanel>
</Grid>

The code-behind is the part of your application that exists as managed code (e.g. C#) and describes the behavior of the application at runtime.

private void btnSave_Click(object sender, RoutedEventArgs e)
{
    // Do actual work of saving file here
}