Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Overview of WPF in light of Ribbon UI Control

3,578 views

Published on

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

Published in: Technology
  • Be the first to comment

Overview of WPF in light of Ribbon UI Control

  1. 1. Ribbon UI Control in WPF Application Abhishek Sur www.abhisheksur.com
  2. 2. Agenda
  3. 3. Overview of WPF
  4. 4. .NET 3.0 (Codename WinFX)
  5. 5. Windows Presentation Foundation A new approach of development dealing with Rich UI, media and documents while exposing the full power of your computer
  6. 6. 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
  7. 7. Interoperability WPF - Windows Forms Interoperability WPF – HWNDs (WindowsFormHost – ElementHost)
  8. 8. Declarative UI design with XAML (Extensible Application Markup Language)
  9. 9. 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
  10. 10. 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.
  11. 11. 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 Button b1.Content = "OK" b1.Background = New _ SolidColorBrush(Colors.DarkBlue) b1.Width = 100 VB.NET
  12. 12. Getting Started with WPF
  13. 13. Some Important Terms Property  Markup Extensions  Routed Events  Styles & Triggers  Resources  Animation  3D support  DataBinding
  14. 14. 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
  15. 15. 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>
  16. 16. Demo Application
  17. 17. WPF VNext
  18. 18. 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.
  19. 19. Ribbon UI Control
  20. 20. 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.
  21. 21. 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.
  22. 22. Features Quick Access Toolbar RibbonWindow Application Menu RibbonTabGroup Contextual Tab SuperToolTip GroupResizing
  23. 23. 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=RibbonControlsLibra ry" Title="RibbonWindow1" x:Name="Window" Width="640" Height="480"></ribbon:RibbonWindow>
  24. 24. 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="ImagesMyComputer.ico"> <ribbon:RibbonApplicationMenuItem Header="Desktop" ImageSource="ImagesDesktop.ico" KeyTip="D" Click="RibbonApplicationMenuItem_Click"/> <ribbon:RibbonApplicationSplitMenuItem Header="Search Program" ImageSource="ImagesSearch.ico"> <ribbon:RibbonApplicationMenuItem Header="BMP Images" ImageSource="ImagesBMPImage.ico" Click="RibbonApplicationMenuItem_Click"/> </ribbon:RibbonApplicationSplitMenuItem> </ribbon:Ribbon.ApplicationMenu>
  25. 25. 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="ImagesRAMDrive.ico" KeyTip="R" /> <ribbon:RibbonButton SmallImageSource="ImagesOpenFolder.ico" KeyTip="O"/> <ribbon:RibbonButton SmallImageSource="ImagesMyRecentDocuments.ico" KeyTip="R"/> </ribbon:RibbonQuickAccessToolBar> </ribbon:Ribbon.QuickAccessToolBar>
  26. 26. 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="ImagesControlPanel.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="ImagesMyDocuments.ico"/>
  27. 27. 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="ImagesControlPanel.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="ImagesMyDocuments.ico"/> </ribbon:RibbonGroup>
  28. 28. 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="ImagesHelpFile.ico" Label="Help" /> </ribbon:RibbonGroup> </ribbon:RibbonTab>
  29. 29. Demo Application
  30. 30. 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
  31. 31. Questions and Answers
  32. 32. Thank You !

×