Tayyab Bin Tariq » GUI

Create A Simple WPF Ribbon Control: What I learnt Today?

tayyabtariq — Sun, 18 Apr 2010 17:45:51 +0000

In this tutorial I would explain how to create a simple Ribbon Control using Windows Presentation Foundation.

Image Courtesy MSDN.

The WPF team is sharing new WPF Ribbon control starting on Monday, October 27, 2008! Binaries and source code for the Ribbon can be downloaded at the Office UI Licensing site.

So, your first step is to go to Office UI Licensing site and get yourself a free WPF ribbon control. You must accept and sign license (it’s not a big deal) and download free WPF ribbon control. Just follow this link.

What is Ribbon Control?

Ribbons are the modern way to help users find, understand, and use commands efficiently and directly—with a minimum number of clicks, with less need to resort to trial-and-error, and without having to refer to Help.

The preview version of the WPF Ribbon includes many of the features which Independent Software Vendors (ISVs) need to add a Ribbon control to their WPF applications. Ribbon is a command bar that organizes a program’s features into a series of tabs at the top of a window. The Ribbon UI was designed by Microsoft Office to increase discoverability of features and functions, enable quicker learning of the program as a whole, and make users feel more in control of their experience with the program. The Ribbon is designed to replace the traditional menu bar and toolbars. The WPF Ribbon will include all of the basic Ribbon features and functionality, including tabs, groups, controls (buttons, split buttons, galleries, etc.), title bar integration of the application menu button and quick access toolbar, and resizing with dynamic layout.

For more information, follow this link.

Step 1: Adding The Ribbon Control to your WPF Application

1. Create a new WPF Project using Visual Studio .NET 2008.

2. Add a reference to “RibbonControlsLibrary.dll” that you downloaded earlier.

3. Add the XAML Reference to the DLL you have just added to your project by adding this line to your XAML code.

xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"

4. Change the root element of your XAML code to r:RibbonWindow instead of Window.

<r:RibbonWindow x:Class="FirstRibbonApplication.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
    Title="Window1" Height="300" Width="300">
    <Grid>
        
    Grid>
r:RibbonWindow>

5. Add the r:Ribbon tag to your XAML code.

Your XAML code should now look like this;

<r:RibbonWindow x:Class="FirstRibbonApplication.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
    Title="Window1" Height="300" Width="300">
    <Grid>
       <r:Ribbon Title="WPF Ribbon - Document1" x:Name="ribbon" />
    Grid>
r:RibbonWindow>

Congratulations! you have successfully added a ribbon control to your WPF application. Before you can see the control you would need to make a few changes to the accompanying cs file. Open the cs and add the following library and make sure that the partial class inherits from RibbonWindow instead of Window.

using Microsoft.Windows.Controls.Ribbon;

Compile and run the application to see the results.

Step 2: Adding Tabs, Groups and Buttons

As described earlier a ribbon control contains different tabs, each tab contains a groups and groups in turn contain buttons. In this step we would create tabs, groups and buttons.

1. To add tabs to your ribbon control add the r:RibbonTab tag within the r:Ribbon tag you added in the last step.

<r:RibbonTab Label="Home">

r:RibbonTab><r:RibbonTab Label="Insert">

r:RibbonTab><r:RibbonTab Label="Help">

r:RibbonTab>

Your application should look somewhat like this now. Note that the support for hovering and clicking has been added automatically.

2. To add groups within a tab, place the r:RibbonGroup tag inside the r:RibbonTab tag.

<r:RibbonGroup Name="Clipboard">r:RibbonGroup><r:RibbonGroup Name="Fonts">r:RibbonGroup>

I am adding Clipboard and Fonts tabs within the Home tab.

Note: If you run the application containing empty Ribbon Groups it would crash.

3. Now to add buttons, place the r:RibbonButton tags inside the r:RibbonGroup tags you just created.

<r:RibbonButton >r:RibbonButton>

Your code should not look like this;

<r:RibbonWindow x:Class="FirstRibbonApplication.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <r:Ribbon Title="Window1" x:Name="ribbon">
            <r:RibbonTab Label="Home">
                <r:RibbonGroup Name="Clipboard">
                    <r:RibbonButton >r:RibbonButton>
                r:RibbonGroup>
 
                <r:RibbonGroup Name="Fonts">
                    <r:RibbonButton >r:RibbonButton>
                r:RibbonGroup>
            r:RibbonTab>
            <r:RibbonTab Label="Insert">
 
            r:RibbonTab>
            <r:RibbonTab Label="Help">
 
            r:RibbonTab>
        r:Ribbon>
    Grid>
r:RibbonWindow>

Congratulations! You have successfully created tabs, groups and buttons in your ribbon control application.

Note that the buttons are still blank. We will take care of this in Step 3.

Step 3: Adding Commands to Ribbon Groups and Ribbon Buttons

In this step we would define resources for our ribbon groups and ribbon buttons and define commands on them.

1. Create an Images folder and add some images to act as icons for your ribbon buttons.

2. Use the following XAML code to define a resource dictionay within the RibbonWindow tag. We would use this to define resources for our buttons.

<r:RibbonWindow.Resources><ResourceDictionary>ResourceDictionary>r:RibbonWindow.Resources>

3. Now add a resource for our Clipboard Ribbon Group. The code would look like this.

<r:RibbonCommand x:Key="ClipboardGroupCommand"CanExecute="OnCanExecute"Executed="OnShowClipboardGroup"LabelTitle="Clipboard"/>

x:Key is used to reference this element.

CanExecute and Execute are holding names for events that would be fired.

LabelTitle holds the title of the group we are creating this resource for.

4. Once the resource has been defined, let us use it for the Clipboard group.

Find this part in your XAML code;

<r:RibbonGroup Name="Clipboard">

and replace it with

<r:RibbonGroup Name="Clipboard" HasDialogLauncher="True" Command="{StaticResource ClipboardGroupCommand}">

Now, we have connected our resource with RibbonGroup. I have added HasDialogLauncher=”True” because that will allow us to fire OnShowClipboardGroup event when user clicks on dialog launcher.

5. Go to your CS code-behind file and add these lines:

private void OnCanExecute(object target, CanExecuteRoutedEventArgs args){args.CanExecute = true;}

private void OnShowClipboardGroup(object target, ExecutedRoutedEventArgs args){MessageBox.Show("This is the Clipboard!.", "Clipboard Dialog");}

In principal we are done with this step and the essential concepts have been learnt. You can now learn your application and test to see that the message box is displayed.

Similar to step 4 and 5 create another RibbonCommand, add the resource to the Copy Button and write the corresponding cs code.

Creating another RibbonCommand;

<r:RibbonCommandx:Key="CopyCommand"CanExecute="OnCanExecute"Executed="OnCopyCommand"LabelTitle="Copy"LargeImageSource="Images\copy.png"ToolTipTitle="Copy (Ctrl+C)"ToolTipDescription="Copies the selected content on to the clipboard">r:RibbonCommand>

Adding the RibbonCommand to the RibbonButton;

<r:RibbonButton Name="Copy" Command="{StaticResource CopyCommand}">r:RibbonButton>

Adding the event to the code-beside file;

private void OnCopyCommand(object target, ExecutedRoutedEventArgs args){    MessageBox.Show("This is the copy button!.", "Copy Dialog");}

Your XAML code should look like this now;

<r:RibbonWindow x:Class="FirstRibbonApplication.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
    Title="Window1" Height="600" Width="400">
    <r:RibbonWindow.Resources>
        <ResourceDictionary>
            <r:RibbonCommand x:Key="ClipboardGroupCommand"
                             CanExecute="OnCanExecute"
                             Executed="OnShowClipboardGroup"
                             LabelTitle="Clipboard">
            r:RibbonCommand>
            <r:RibbonCommand
                x:Key="CopyCommand"
                CanExecute="OnCanExecute"
                Executed="OnCopyCommand"
                LabelTitle="Copy"
                LargeImageSource="Images\copy.png"
                ToolTipTitle="Copy (Ctrl+C)"
                ToolTipDescription="Copies the selected content on to the clipboard">
            r:RibbonCommand>
        ResourceDictionary>
    r:RibbonWindow.Resources>
    <Grid  HorizontalAlignment="Stretch" VerticalAlignment="Top">
        <r:Ribbon Title="Window1" x:Name="ribbon"  VerticalAlignment="Top">
            <r:RibbonTab Label="Home">
                <r:RibbonGroup Name="Clipboard" HasDialogLauncher="True" Command="{StaticResource ClipboardGroupCommand}">
                    <r:RibbonButton Name="Copy" Command="{StaticResource CopyCommand}">r:RibbonButton>
                r:RibbonGroup>
 
                <r:RibbonGroup Name="Fonts">
                    <r:RibbonButton  Name="Paste">r:RibbonButton>
                r:RibbonGroup>
            r:RibbonTab>
            <r:RibbonTab Label="Insert">
 
            r:RibbonTab>
            <r:RibbonTab Label="Help">
 
            r:RibbonTab>
        r:Ribbon>
    Grid>
r:RibbonWindow>

Now you should be able to see an icon on your Copy Button and an accompanying tooltip.

Share on Facebook

Callbacks, Threads and GUI

tayyabtariq — Sat, 23 May 2009 20:39:51 +0000

This article assumes that you have a working knowledge of C++ callbacks. Recently me and a friend encountered a situation where we had to show some data on dialog box that was generated inside of an independent thread. Sharing memory can be a good idea of passing a pointer to the dialog box. However, we could not pass the pointer as we had to keep the dependence to a minimum and he latter resulted in a cyclic reference, because we creating the thread from the dialog box class. What we wanted to do was to be able to make a call back to function as if it were not a member function (so as to reduce dependence). An obvious way to call a member function as a non member using a callback is to make that function static in the dialog class. However, it would create a slight problem, the static function would not be able to use any of the controls on the dialog box, beating us back to square one.

So I though of using the ‘this’ pointer. Obviously the ‘this’ pointer is not static and cannot be used in a static context. As a work around i introduced a static member inside the dialog box class that was a pointer to the dialog box class itself. Since this pointer was static it could be used from the static context of the function. Now to keep this pointer pointing to whatever ‘this’ is pointing to, one can either use the gain focus event of the dialog box or some other event as may be appropriate to make the static pointer equal to ‘this’ pointer. Once this is done the static function can use the static pointer to make changes inside the GUI, while the thread can call this function just like a normal function (non member).

Here is the signature i used to pass the function to the thread.

   1:  
   2: void (*printFunction)(char * message);

This allows any function that accepts a char string and returns void to be used with the thread, allowing it to be used in many a context.

This article was written in very short time, if you find something lacking, please feel free to ask.

Share on Facebook

Windows Forms: Getting Started I

tayyabtariq — Wed, 29 Apr 2009 17:38:29 +0000

This tutorial contains some basic topics regarding getting started with windows forms.

All the data is courtesy MSDN.

Creating a Windows Forms Project

The foundation of most solutions that involve Windows Forms is the Windows Application project. Creating a project is easy within the integrated development environment (IDE).

To create a Windows Application project

On the File menu, point to New, and then select Project.
In the Project Types pane, choose the programming language you want to use.
In the Templates pane, choose Windows Application for Visual Basic, Visual J#, or Visual C# projects, or choose Windows Forms Application (.NET) for Visual C++ projects. We will mostly concern ourselves with C++.

The Windows Forms Designer opens, showing Form1 of the project you created.

Display Windows Forms in the Designer

Within the Windows Forms Designer, you can view the forms within your project and their controls.

To view forms in the Windows Forms Designer

In Solution Explorer, double-click the form. For details, see Windows Forms Overview.

If Solution Explorer is not visible, select it from the View menu or press CTRL+W, S.

To view the code for a form

In Solution Explorer, select the form and then click the View Code button. You can also right-click the form in Solution Explorer and choose the View Code item in the shortcut menu.

If the designer has focus, press F7 to switch to the Code Editor.

Share on Facebook