Ribbon UI Control in WPF Application

Abhishek Sur

www.abhisheksur.com

Agenda

Windows Presentation Foundation Overview

Declarative Screen design with XAML

Getting started with WPF

WPF vNext

Ribbon UI control

Overview of WPF

.NET 3.0 (Codename WinFX)

Windows Presentation Foundation

A new approach of development

dealing with Rich UI, media and

documents while exposing the full

power of your computer

Features of WPF

Device Independent

Pixel

Built in support for

Graphics and Animation

Flexibility to redefine

Templates and Styles

Resource based

approach for most of the

controls

New Property System

Interoperability

WPF - Windows Forms Interoperability

WPF – HWNDs

(WindowsFormHost – ElementHost)

Declarative UI design with XAML (Extensible Application

Markup Language)

What is XAML?

XAML is declarative markup language that allows you to specify attributes of a class or to create a type itself.

XAML directly maps elements to actual objects and its attributes to actual members.XAML is basically used for UI design

Why XAML? Concise implementation (Similar to HTML) Human Readable (except Vector & Meshes) Can be used for any CLR object hierarchy Interoperable with tools like Expression Blend, XAML Pad, etc or even Visual

Studio Designer. Even large set of tools available to convert other formats like Adobe

Fireworks, Photoshop, Illustrator, 3D Studio etc to XAML and vice-versa.

Declarative Markup - XAML Declarative Markup Code and content are separation Can be rendered in the browser / standalone application Flexible to load loose XAML Various Markup Extensions enhances the capabilities of XAML Rich User Interface using DirectX

<Button Width="100"> OK <Button.Background> DarkBlue </Button.Background></Button>

XAML

Button b1 = new Button();b1.Content = "OK";b1.Background = new SolidColorBrush(Colors.DarkBlue);b1.Width = 100;

C#

Dim b1 As New Buttonb1.Content = "OK"b1.Background = New _ SolidColorBrush(Colors.DarkBlue)b1.Width = 100

VB.NET

Getting Started with WPF

Some Important Terms

Dependency Property Markup Extensions Routed Events Styles & Triggers Resources Animation 3D support DataBinding

Data Binding

• DataBinding can be OneTime, OneWay, TwoWay or OneWayToSource• UpdateSourceTrigger can be applied to PropertyChanged, LostFocus,

Explicit• INotifyPropertyChanged allows you to create binding between two

objects• Like DataBinding objects have inherent support of ICommand

Interface.

TargetSource

Dependency ObjectCLR Object

Dependency Property

Property

OnetimeOneWayOneWayToSourceTwoWay

ICommand

Useful WPF Controls

• ContentControl (eg. Button, Label..)• ItemsControl (eg. ListBox, ListView ..)• HeaderedContentControl (eg. GroupBox, Expander ..)• Layout Controls (eg. Grid, StackPanel ..)

<StackPanel><Label Content=“Select A Customer”/><ListBox Name="myListBox"

Background="HoneyDew"ItemsSource="{Binding {StaticResource myDataSource}}"

</ListBox></StackPanel>

Demo Application

WPF VNext

WPF 5.0 vNext

Integration of Ribbon Improved Collection Handling in Background

Threads Support for UI Virtualization with Grouping SilverlightHost control with DeepZoom support in

WPF Airspace problem Fix for Hwnd-based controls.

Ribbon UI Control

What is Ribbon?

Ribbon is an interface where a set of toolbars are placed on Tabs. It replaces the Traditional Menu and Toolbar and hence gives the user a better management of existing tools.

Each Ribbon can have one application Menu, and a set of Tabs while many of these tabs are contextual and hence will appear only when certain object is selected.

Forms the next generation of Windows Development.

Toolbar Vs Ribbon

Toolbar forms shortcut for each menuitem which helps in maintaining large sets of menuitems visible over the screen

Ribbon replaces Menu and Toolbar to provide Tabbed MenuItem.

Toolbar is preconfigured and will be disabled when not in use

Ribbon controls will be more contextual and hence many items will be hidden and appears only when it is requiredEach menu generally have its

own toolbar associated to it which can be opened for quick access.

Ribbon replaces Menu

Can be minimized when not in use.

Cannot be minimized.

Features

Quick Access Toolbar

RibbonWindow

Application Menu

RibbonTabGroup

Contextual Tab

SuperToolTip

GroupResizing

Ribbon Window

It is inherited from Window. The inherited RibbonWindow

includes few more properties like EffectiveLeft, EffectiveTop etc.

Ideal for Ribbon UI Control. Automatically adjusts the Ribbon

placements

<ribbon:RibbonWindow x:Class="RibbonTestApplication.RibbonWindow1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:ribbon="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary" Title="RibbonWindow1" x:Name="Window" Width="640" Height="480"></ribbon:RibbonWindow>

Application Menu

Unique menu for the window which allows you to list the most common items.

ApplicationMenu contains Auxilary Pane (for recent files), Footer Pane, and MenuItems in the left side.

<ribbon:Ribbon.ApplicationMenu> <ribbon:RibbonApplicationMenu SmallImageSource="Images\MyComputer.ico"> <ribbon:RibbonApplicationMenuItem Header="Desktop" ImageSource="Images\Desktop.ico" KeyTip="D" Click="RibbonApplicationMenuItem_Click"/> <ribbon:RibbonApplicationSplitMenuItem Header="Search Program" ImageSource="Images\Search.ico"> <ribbon:RibbonApplicationMenuItem Header="BMP Images" ImageSource="Images\BMPImage.ico" Click="RibbonApplicationMenuItem_Click"/></ribbon:RibbonApplicationSplitMenuItem></ribbon:Ribbon.ApplicationMenu>

QuickAccess Toolbar

It places small icons in the header section which allows quick access to useful commands.

QuickAccess Toolbar will be visible irrespective of any controls in the screen.

<ribbon:Ribbon.QuickAccessToolBar> <ribbon:RibbonQuickAccessToolBar HorizontalAlignment="Right"> <ribbon:RibbonButton SmallImageSource="Images\RAMDrive.ico" KeyTip="R" /> <ribbon:RibbonButton SmallImageSource="Images\OpenFolder.ico" KeyTip="O"/> <ribbon:RibbonButton SmallImageSource="Images\MyRecentDocuments.ico" KeyTip="R"/> </ribbon:RibbonQuickAccessToolBar> </ribbon:Ribbon.QuickAccessToolBar>

Super ToolTip

A special Tooltip which replaces old tooltip.

Places an image on the left and contextual text on the right with Tooltip heading on the top.

<ribbon:RibbonButton LargeImageSource="Images\ControlPanel.ico" Label="Settings Folder" ToolTipTitle="Settings Folder" ToolTipDescription="Helps you change settings of the folder and also allows you to change certain system settings" ToolTipImageSource="Images\MyDocuments.ico"/>

RibbonTab Groups

RibbonTabGroup allows you to group similar RibbonButtons into single TabGroup.

Each TabGroup is HeadedContentControl with the GroupName in the Footer just below the actual buttons.

<ribbon:RibbonGroup Header="Control Panel"> <ribbon:RibbonButton LargeImageSource="Images\ControlPanel.ico" Label="Settings Folder" ToolTipTitle="Settings Folder" ToolTipDescription="Helps you change settings of the folder and also allows you to change certain system settings" ToolTipImageSource="Images\MyDocuments.ico"/></ribbon:RibbonGroup>

Contextual Tabs

Contextual Tabs saves space. You can list the most appropriate controls for the

selected item into ContextualTabs. ContextualTab is specially highlighted.

<ribbon:RibbonTab ContextualTabGroupHeader="ContextualHeader" Header="Selected" > <ribbon:RibbonGroup> <ribbon:RibbonButton LargeImageSource="Images\HelpFile.ico" Label="Help" /> </ribbon:RibbonGroup> </ribbon:RibbonTab>

Demo Application

Special Links

WPF

• http://www.abhisheksur.com/search/label/WPF • http://www.abhisheksur.com/2010/05/new-wpf-learning-series.html

Ribbon

• http://www.abhisheksur.com/2010/08/introducing-ribbon-ui-control-for-wpf.html

• www.windowsclient.net

Questions and Answers

Thank You !