#57 – Markup vs. Code

September 7, 2010 Leave a comment

A WPF or Silverlight user interface is generally specified declaratively, using markup (XAML).  The XAML specifies the controls to be created and what their attributes should be.  But these controls could also be created procedurally, in code (e.g. C#).

For example, consider the following XAML code that creates two buttons in a StackPanel:

<Window x:Class="WpfApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="224" Width="334">
    <StackPanel Orientation="Horizontal">
        <Button Name="button1" Content="OK" Height="23" Width="75" />
        <Button Name="button2" Content="Cancel" Height="23" Width="75" />
    </StackPanel>
</Window>

Assuming that the Window object already exists, the above XAML would be equivalent to the following C# code:

 private void Window_Initialized(object sender, EventArgs e)
 {
     StackPanel sp = new StackPanel();
     sp.Orientation = Orientation.Horizontal;

     Button b1 = new Button();
     b1.Name = "button1";
     b1.Content = "OK";
     b1.Height = 23;
     b1.Width = 75;

     Button b2 = new Button();
     b2.Name = "button2";
     b2.Content = "Cancel";
     b2.Height = 23;
     b2.Width = 75;

     sp.Children.Add(b1);   // Add buttons to StackPanel
     sp.Children.Add(b2);

     this.Content = sp;     // Add StackPanel to Window
 }

Advertisement

Filed under XAML Tagged with , , ,

#13 – Benefits of Markup

July 25, 2010 Leave a comment

Using a Markup + Code-Behind model for application development has a number of benefits, as opposed to defining everything in code.

Benefits of using Markup/XAML:

  • Can change look and feel of the application without changing the behavior
    • Can change look/feel by changing the XAML
  • Designers can work on appearance (XAML) at the same time that developers work on behavior (code)
  • Easier for design tools to render the application
    • Tool can just interpret XAML, rather than having to execute code that creates controls
    • Means  that tools other than Visual Studio (e.g. Blend) can be used to work on just the user interface
  • XAML can be generated programmatically by design tool

Filed under Basics Tagged with , ,

#12 – Markup and Code Behind

July 24, 2010 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.

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
}

Filed under Basics Tagged with , , ,