Someone asked me why there wasn't a Scribble sample app for WPF.  Maybe there is, but I thought it would be a great opportunity for me to play more with the technology, so if time allows (and time is in very short supply at this time of year) I'm going to build a Scribble app over a few days.  I'll make the code available as I go through the exercise.

The first step is to make sure you can write WPF apps.  If you have Vista and VS2005 then you're laughing.  If you don't you need to head off to MS, download the .Net framework 3.0, the Windows SDK and the VS 2005 extensions for WPF and WCF.  Don't worry it's only a few hundred Megs, should only take a few minutes on that super connection of yours.

Now to create a WPF application is fairly straightforward > Simply create a new project based on the Windows Application (WPF) template that the extensions have added for you. 

This will create two XAML files , App.xaml and Window1.xaml along with their code behind files.  At this point I usually either delete Window1.xaml or rename it.   Rename Window1.xaml to Scribble.xaml and then open App.xaml.  You will notice it is simply a holder for resources, but for now all you have to do is change the StartupUri attribute to be Scribble.xaml.

For the rest of this session you'll be working in either Scribble.xaml or the code behind file Scribble.xaml.cs, and all we're going to do in this session is create the basic GUI. For those of you have never seen the Scribble application, it's a simple MDI (multiple Document Interface) app where you can scribble stuff and save and retrieve it.  It looks a bit like

The basic GUI is a window, so Scribble.xaml currently has a Window root entry.  It also has a Grid container, which is exactly as its name suggests a grid where you can place components.  Our grid is fairly straightforward, it has 4 rows (1 for the menu, 1 for the toolbar, 1 for the main window and 1 for the status bar) so to start you will define this grid like this:

<grid background="White" name="DocumentRoot">
  <grid.rowdefinitions>
    <rowdefinition height="Auto">
      <!-- Menu -->
    <rowdefinition height="Auto">
      <!-- Tool Bar -->
    <rowdefinition height="*">
      <!-- Content Area -->
    <rowdefinition height="Auto">
      <!-- Status Bar -->
  </grid.rowdefinitions>
</grid>



You can see this is fairly straightforward, the 3 rows with embedded controls are all set to automatic height adjustment, while the row preserved for the content is scaled to fill the rest of the window.

Before I show you the completed XAML for the GUI, just a brief mention about layout controls.  You won't add items into the grid directly, rather you will use layout controls like DockPanels, which dock to the grid element, StackPanels which stack on top of each other or Panels which you can place anywhere.  This gives the most flexibility to control the layout, so you are going to add 4 DockPanels to the grid, like this:

<!-- Menu Bar -->
<DockPanel
    Name="DockPanel_Menu" 
    Grid.Row="0" />
<!-- Tool Bar -->
<DockPanel
   Name="DockPanel_Toolbar" 
   Grid.Row="1">
<DockPanel Name="DockPanel_MainDisplay"
   Background="DarkGray"
   Grid.Row="2">
</DockPanel>
<DockPanel Name="DockPanel_StatusBar"
   Grid.Row="3">
</DockPanel> 

Now all you have to do is add the menu, the toolbar and the status bar.  The menus are self explanatory, and the status bar is fairly straightforward too.  The toolbar no longer needs an ImageStrip, simply add an image to the button.  For now that image will be stored on the file system, but later in the project you'll turn them into resources.  The XAML now looks like:

    <DockPanel
      Name="DockPanel_Menu" 
      Grid.Row="0">
      <Menu Background="White" >
        <MenuItem Header="File" Click="NotImplementedMsg">
          <MenuItem Header="New" />
          <MenuItem Header="Open..." />
          <MenuItem Header="Close" "/>
          <MenuItem Header="Save" />
          <MenuItem Header="Save As..." />
          <Separator />
          <MenuItem Header="Print" />
          <MenuItem Header="Print Preview" />
          <MenuItem Header="Exit" InputGestureText="Alt-F4" 
            Click="ExitApplication">
            <MenuItem.ToolTip>
              <ToolTip>
                Click here to exit
              </ToolTip>
            </MenuItem.ToolTip>
          </MenuItem>
        </MenuItem>
      </Menu>
      <Menu Background="White">
        <MenuItem Header="Edit">
          <MenuItem Header="Clear All" />
        </MenuItem>
      </Menu>
      <Menu Background="White">
        <MenuItem Header="Pen">
          <MenuItem Header="Thick Pen" />
          <MenuItem Header="Pen Widths..." />
        </MenuItem>
      </Menu>
      <Menu Background="White">
        <MenuItem Header="View">
          
          <MenuItem Header="Toolbar" IsCheckable="True" 
                    Checked="SetToolBarVisibility" 
                    Unchecked="SetToolBarVisibility" IsChecked="True" />
          <MenuItem Header="Status Bar" IsCheckable="True" 
                    Checked="SetStatusBarVisibility" 
                    Unchecked="SetStatusBarVisibility" IsChecked="True" />
        </MenuItem>
      </Menu>
      <Menu Background="White">
        <MenuItem Header="Window">
          <MenuItem Header="New Window" />
          <Separator />
          <MenuItem Header="Tile" />
          <MenuItem Header="Cascade" />
        </MenuItem>
      </Menu>
      <Menu Background="White">
        <MenuItem Header="Help">
          <MenuItem Header="Help" />
          <Separator />
          <MenuItem Header="About WPFScribble" />
        </MenuItem>
      </Menu>
    </DockPanel>

    <!-- Tool Bar -->
    <DockPanel
      Name="DockPanel_Toolbar" 
      Grid.Row="1">
      <ToolBar Name="toolBar" Button.Click=="NotImplementedMsg" >
        <Button ToolTip="New">
          <Image Source="Images\new.bmp" Height="16" Width="16" />
        </Button>
        <Button ToolTip="Open">
          <Image Source="Images\open.bmp" Height="16" Width="16" />
        </Button>
        <Button ToolTip="Save">
          <Image Source="Images\save.bmp" Height="16" Width="16" />
        </Button>
        <Button Command="ApplicationCommands.PrintPreview" ToolTip="Print Preview">
          <Image Source="Images\preview.bmp" Height="16" Width="16" />
        </Button>
        <Button  Command="ApplicationCommands.Print" ToolTip="Print">
          <Image Source="Images\print.bmp" Height="16" Width="16" />
        </Button>
        <Button  ToolTip="Help">
          <Image Source="Images\help.bmp" Height="16" Width="16" />
        </Button>

      </ToolBar>
    </DockPanel>
    <DockPanel Name="DockPanel_MainDisplay"
               Background="DarkGray"
               Grid.Row="2">
    </DockPanel>
    <DockPanel Name="DockPanel_StatusBar"
               Grid.Row="3">
      <StatusBar Name="statusBar">
        <StatusBarItem>
          Press F1 for Help
        </StatusBarItem>
      </StatusBar>
    </DockPanel>

The MenuItem click events are simply being routed to a NotImplementedMsg method in the code behind.  This is coded up as:

        void NotImplementedMsg(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("This function is not yet implemented", "Patience");
        }

This is a fairly standard event wiring up model, except for the EventArgs object which is a RoutedEventArgs object.  WPF routes events (So does Windows Forms, it just routes them differently) up a tree hierarchy, so if an event is not handled it bubbles up the tree until it finds a handler.  You can also use a tunneling strategy, where the event goes to the tree root first, and then via the children.  You can of course still use a direct strategy, analogous to Windows Forms where only the listener registered for events gets the chance to handle the event.  in the next installment you'll find out how to deal with RoutedEvents properly.

If you'd like the code for this then you can download a zip from here.