Upload
abhishek-sur
View
2.764
Download
2
Tags:
Embed Size (px)
DESCRIPTION
The slides introduces Ribbon UI control as released on Aug 2010 with the basic overview of WPF and XAML. I (Abhishek Sur) have demonstrated this on Community Tech Days session at Kolkata on 28th November 2010
Citation preview
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 !