The next challenge that I am going to share my solution with you is the Office 2007 like window style. As you know, the Office 2007 applications are using the layered windows functionality to display rounded corners and a custom title bar. This is how the typical  window in the new Office looks like:

Since the June CTP, WPF allows you to create layered windows by setting the AllowsTransparency to true, Background to Transparent and WindowsStyle to none. Result of that will be a transparent window with no titlebar or borders, so it is our task to draw a non-client area. It didn’t take long time for me to create XAML to display a titlebar with images on a particular window, but what do I do in order to re-use this style on any window in my app? It took me a while to figure out (trial and error again and again…) that the only way right now to declare a style/template for a Window is to do it in the App.xaml, so my first version contained all the xaml and a code in the App.xaml and App.xaml.cs which I didn’t feel was a good way to encapsulate your logic in a re-usable component. Luckily for me, I got to work with Josh Smith who knows quite a few things about WPF, showed me a way how to move my logic into a separate re-usable files. Which is to create XAML file as a ResourceDictionary and a corresponding code file. Don’t forget to declare x:Class attribute in order to associate the code file with this XAML:

  x:Class="OfficeStyleWindowProject.OfficeStyleWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:ctl="clr-namespace:Controls.Local"
    >

…

The App.xaml will have to be changed as well:

<Application.Resources>
   <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
         <ResourceDictionary Source="OfficeStyleWindow.xaml" />
       <ResourceDictionary.MergedDictionaries>
   <ResourceDictionary>
                     
Of course as soon as I moved to the “templated” world, the event handlers stopped working and I had to do the following: First of all, I created a few custom controls: ImageButton and TitleBar. I would imagine the ImageButton should be a pretty useful control on its own. It implements a few dependency properties ImageNormal, ImageOver and ImageDown which you would use to assign an appropriate images to a button. This control provides similar functionality to what Josh had described in his blog.
There is nothing too fancy in the TitleBar except for a way to hook up into the CloseButton, MinButton and MaxButton Click events. Here’s a snippet that shows how I did it:

First we need to hook up into the control’s Loaded event:

public TitleBar()
{

   this.MouseLeftButtonDown += new MouseButtonEventHandler(OnTitleBarLeftButtonDown);                   

this.MouseDoubleClick += new MouseButtonEventHandler(TitleBar_MouseDoubleClick);
   this.Loaded += new RoutedEventHandler(TitleBar_Loaded);

}

Second, in the loaded event we need to use the FindName method to get to the instances of the buttons:

void TitleBar_Loaded(object sender, RoutedEventArgs e)
{
      closeButton = (ImageButton)this.Template.FindName("CloseButton", this);
      minButton = (ImageButton)this.Template.FindName("MinButton", this);
      maxButton = (ImageButton)this.Template.FindName("MaxButton", this);
 
      closeButton.Click += new RoutedEventHandler(CloseButton_Click);
      minButton.Click += new RoutedEventHandler(MinButton_Click)
      maxButton.Click += new RoutedEventHandler(MaxButton_Click);
}

Overall I am pretty happy with the result. The code has become completely encapsulated in a separate and re-usable files and can be easily added to any project. Here's how the window looks in the test project:

You can download the project with the complete source code from here:

In the previous entry I mentioned that the project’s UI design required me to create an interface similar to the Office 2007 UI. I decided to start with seems to be a simple part: tab control. In the proposed design it looks like that:

While the standard Tab looks like this:

So I started to play with the available properties of the Tab control in XAML. While I managed to apply the appropriate gradient backgrounds, I still needed to modify the shape of the tabs and the background of selected tabs.
The internet search yielded the suggestion to use the Interactive Designer to create a custom template and style for the standard WPF’s TabControl. And I desided to fiddle with the Interactive Designer, thinking that if this tool is created for a non programmer type in mind, I should be able to figure it out pretty easy. I took the Martin’s guide for creation of a glass button and tried to follow the steps to create a required style for the Tab.  That was a mistaken assumption. I immediately got lost in the hierarchy of the objects. After many tries, I finally came upon the SimpleStyles sample which is a part of the .NET 3.0 SDK.  It is located in the Controls\ControlTemplateExamples\XAML folder and contains minimal templates for all standard controls. So I took the template for the Tab control as a base and using the VS started modifying XAML by hand. As it occurred later, this was the best decision for me to get things done. Every time I needed to get the custom style for a standard control, the SimpleStyles sample proved to be the best way to approach creation of the custom templates.

You can download the resulting XAML from here:

TabControlCustom.zip (1.46 KB)

Recently I was submerged into the WPF. I had to create a proof of concept screens for one of the clients. The UI that was designed closely resembled the Office 2007 interface with Ribbon and such.

So I bravely jumped into WPF. Installed .NET 3.0, Orcas extensions for VS, Interactive Designer and started on the UI. It is only after I jumped, I realized that am in a completely new world of the client development, that the learning curve has become a “learning cliff” and all of the tricks that I had learned when developing WinForm applications don't work here anymore. I had to start learning basics. Layouts and positioning, coloring, fonts and text etc... And as an early adapter you encounter with limited information available on the subject. There's only one book exists at this time (Chris Sells and Ian Griffits). Everything else is spread around in the WPF blogs, MSDN forums and documentation.

When starting development with WPF you are presented with just a somewhat XP like looking standard controls. How do you change the look and feel of the control? Umm... inherit from the control and override some painting procedure... Right? - Nope, wrong! You create your own template and style in XAML! After 4 days of intensive “how do I do that, try, learn, search, download sample, try again...”, I started to see the light. The bits started to fall into pieces and the world had become a logical place to live again. With a mix of amusement and excitement I realized that MS had finally achieved its long winding goal - separate the presentation code from the functionality. A somewhat sophisticated UI that I have created had almost non existent C# code. Everything else has been done in XAML.

In the next posts I'll try to share a few tips that I learned during this process and hope they'll help somebody ease up the transition. 

Have you ever dreamed of being able to create a menu similar to the Start Menu in your .NET Compact Framework application? Now you can! Take a look at this screenshot of the sample:

The sample is using the PopupMenu component that I've developed and which will be available from OpenNETCF. The component allows you to assign the ImageList with your icons, specify the background image - all from the design-time. The PopupMenu also provides the ability for you to create a menu from the scratch by exposing the DrawItem and MeasureItem events. The usage of them should be similar to the desktop version of the MenuItem. Here is another screenshot of the PopupMenu assigned to the ContextMenu property of the Form:

We are planning to have a short and intensive beta testing period and release it pretty soon. If you are interested in participation in this beta program, please send us email at dcs(AT)opennetcf.com.

Microsoft have just published the source code for its Device Emulator!

http://www.microsoft.com/downloads/details.aspx?familyid=faa8c81d-7316-4461-a0ed-6c95b261ddcd&displaylang=en

It inlcudes:

• A CPU emulator that executes the ARM instruction set by JIT-compiling to x86
• An MMU emulator to support virtual memory and page protection
• A motherboard emulator that contains emulated RAM and NOR flash memory
• A collection of peripheral devices attached to the motherboard: serial ports, LCD controller, touchscreen, keyboard, interrupt controller, programmable timers, real-time-clock, network cards, audio, etc.
• A “DMA” interface which allows a Win32 application running outside the emulator to communicate with a WinCE application running inside the emulator, using a simple socket-like programming model.

This is an unexpected gift for anybody who is interested in innerworkings of the Device Emulator and can be used as a research and experimentation platform.

What do you do if the application you develop using .NET CF requires you to transform XML with some XSL and you know that .NET CF doesn't support that? You are not completelly out of luck here. Did you know that the native Microsoft XML Parser MSXML2 is included in all Windows Mobile devices and in most custom Windows CE devices as well? Of course it's a COM component, but CF v2 has added support for COM interop. So, here are 2 steps to enable MSXML2 usage in your CF application:

1. Open Visual Studio 2005 Command prompt, navigate to the ..\Include\Armv4i directory of the Windows Mobile SDK, and execute the following line:

midl msxml2.idl 

The result of this execution will be creation of the msxml2.tlb library.

2. Copy the msxml2.tlb into your project's directory and add the reference to it by browsing. The Visual Studio will recognize that this is a type libabry and will generate the MSXML2 interop assembly.

Now you can create an instance of the DOMDocumentClass and use its XSL transformation functionality:

MSXML2.DOMDocument doc = new MSXML2.DOMDocumentClass();
// Load XML document.
doc.load(“customer.xml"));

MSXML2.DOMDocument xsl = new MSXML2.DOMDocumentClass();
// Load XSLT document.
xsl.load(“customer.xslt"));
// Transform XML data.
string temp = doc.transformNode(xsl);

Microsoft just made the SQL Server Everywere Edition CTP available for download:

SQL Server Everywere Edition CTP Runtime

SQL Server Everywere Edition CTP Book Online

Keep in mind that these are the runtime binary files for desktop computers only.

Questions about how to make the Label control in CF transparent come up on the newsgroups or forums all the time. People want to have a transparent label on a top of an image. The answer to that is that transparency in the controls is not supported on the OS level. But what is the Label control? It is just a text drawn on a graphic surface. So this is what I've been doing -  drawing a text string on a top of an image. But not loose the design time goodness that you get with the Label, I was using the Label's properties (Text, Font, Location, Size etc..) to draw the required string in the location instead of the Label:

private void DrawLabel(Label label, Graphics grx)

{

      if (label.TextAlign == ContentAlignment.TopLeft)

      {

           gxOff.DrawString(label.Text, label.Font, new SolidBrush(label.ForeColor), label.Bounds);

      }

      else if (label.TextAlign == ContentAlignment.TopCenter)

      {

           SizeF size = grx.MeasureString(label.Text, label.Font);

           int left = this.Width / 2 - (int)size.Width / 2;

           Rectangle rect = new Rectangle(left, label.Top,  (int)size.Width, (int)label.Height);

           gxOff.DrawString(label.Text, label.Font, new SolidBrush(label.ForeColor), rect);

      }

      else if (label.TextAlign == ContentAlignment.TopRight)

      {

           SizeF size = grx.MeasureString(label.Text, label.Font);

           int left = label.Width - (int)size.Width + label.Left;

           Rectangle rect = new Rectangle(left, label.Top, (int)size.Width, (int)size.Height);

           gxOff.DrawString(label.Text, label.Font, new SolidBrush(label.ForeColor), rect);

      }

 }

In order to use this method you can assign an image to the PictureBox, drop a Label control on a top of a PictureBox, set Label 's Visible proprerty to false and call the DrawLabel method in the Paint event of the PictureBox.

Check it out at: http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnpag2/html/MCSFLP.asp

It has got a lot of useful stuff for WM and Windows CE development especially for enterprize mobile developlment.