• Like

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Overview of WPF in light of Ribbon UI Control

  • 2,608 views
Uploaded 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 …

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,608
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
36
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • As of request I am going to spend a few time with the initial discussion of WPF as many of the people don’t know what exactly WPF is, and later on I will go through with my topic on Ribbon UI control.The agenda comprises of Overview of WPF, Introduction of XAML, an Extensible Application Markup Language, Next with few concepts on WPF to get you started, WPF 5.0 version next and Finally with Ribbon UI controls.
  • Device Independent Pixel (DPI) : WPF introduces Device Independent DPI Settings for the applications built with it. For a window, it is very important to calculate how much Dots Per inch(DPI) the screen could draw. This is generally dependent on the hardware device and operating system in which the application runs and also how the DPI settings is applied on the Device.  Any user can easily customize these settings and hence make the application look horrible. Windows forms application uses pixel based approach so with changing DPI settings, each control will change its size and look. WPF addresses this issue and makes it independent of DPI settings of the computer. Lets look how its possible : Let say you have drawn a box, just like one in the figure, which is 1 inch long in 96 dpi screen. Now if you see the same application in 120 dpi settings the box will appear smaller. This is because the things that we see on the screen are totally dependent on dpi settings. In case of WPF, this is modified to density based approach. That means when the density of pixel is modified, the elements will adjust them accordingly and hence the pixel of WPF application is Device Independent Pixel. As you can see in the figure, the size of the control remains same in case of WPF application and it takes more pixel in case of 120 DPI application to adjust the size properly. Built-In Support for Graphics and Animation : WPF applications as being rendered within DirectX environment, it has major support of graphics and animation capabilities. A separate sets of classes are there which specifically deals with animation effects and graphics. The graphics that you draw over the screen is also Vector based and are object oriented. That means, when you draw a rectangle in WPF application, you can easily remove that from the screen as rectangle is actually an object which you always have hold on. On traditional Windows based application, once you draw a rectangle, you cant select that individually.  Thus programming approach in case of WPF is completely different and more sophisticated than traditional graphics approach. We will discuss graphics and animation in more detail in later section of the article.Redefine Styles and Control Templates :In addition to graphics and animation capabilities, WPF also comes with a huge flexibility to define the styles and ControlTemplates. Style based technique as you might come across with CSS are a set of definitions which defines how the controls will look like when it is rendered on the screen. In case of traditional windows applications, styles are tightly coupled with each controls, so that you need to define color, style etc for each individual control to make it look differently. In case of WPF, Styles are completely separated from the UIElement. Once you define a style, you can change the look and feel of any control by just putting the style on the element. Most of the UIElements that we generally deal with is actually made using more than one individual elements. WPF introduces a new concept of Templates, which you might use to redefine the whole control itself. Say for instance, you have a CheckBox, which has a Rectangle in it and a ContentPresenter (one where the caption of the TextBox appears). Thus you can redefine your checkbox and put a ToggleButton inside it, so that the check will appear on the ToggleButton rather than on the Rectangle. This is very interesting. We will look into more detail on Styles and ControlTemplates in later section of the article. Resource based Approach for every control:Another important feature of WPF is Resource based approach. In case of traditional windows applications, defining styles is very hectic. So if you have 1000 buttons, and you want to apply Color to each Buttons to Gold, you need to create 1000 objects of Color and assign each to one individual elements. Thus it makes it very resource hungry. In WPF, you can store styles, controls, animations, and even any object as resource. Thus each resource will be declared once when the form loads itself, and you may associate them to the controls. You can maintain a full hierarchy of styles in separate file called ResourceDictionary, from which styles for the whole application will be applied. Thus WPF application could be themed very easily. New Property System & Binding Capabilities:On the next step, I must introduce the new property system introduced with WPF. Every element of WPF defines a large number of dependency properties. The dependency properties have strong capabilities than the normal properties. Thus when I define our new property, we can easily register my own property to any object I wish to. It will add up to the same observer that is associated to every object. As every element is derived from DependencyObject in its object hierarchy, each of them contains the Dependency Observer. Once you register a variable as Dependency property, it will create a room on the observer associated with that control and set the value there. We will discuss in more detail in later sections of the series.

Transcript

  • 1. Ribbon UI Control in WPF Application
    Abhishek Sur
    www.abhisheksur.com
  • 2. Agenda
  • 3. Overview of WPF
  • 4. .NET 3.0 (Codename WinFX)
  • 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. Features of WPF
  • 7. Interoperability
    WPF - Windows Forms Interoperability
    WPF – HWNDs
    (WindowsFormHost – ElementHost)
  • 8. Declarative UI design with XAML (Extensible Application Markup Language)
  • 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. Why XAML?
    • Concise implementation (Similar to HTML)
    • 11. Human Readable (except Vector & Meshes)
    • 12. Can be used for any CLR object hierarchy
    • 13. Interoperable with tools like Expression Blend, XAML Pad, etc or even Visual Studio Designer.
    • 14. Even large set of tools available to convert other formats like Adobe Fireworks, Photoshop, Illustrator, 3D Studio etc to XAML and vice-versa.
  • XAML
    C#
    VB.NET
    <Button Width="100"> OK
    <Button.Background>
    DarkBlue
    </Button.Background>
    </Button>
    Button b1 = new Button();
    b1.Content = "OK";
    b1.Background = new SolidColorBrush(Colors.DarkBlue);
    b1.Width = 100;
    Dim b1 As New Button
    b1.Content = "OK"
    b1.Background = New _SolidColorBrush(Colors.DarkBlue)
    b1.Width = 100
    Declarative Markup - XAML
    • Declarative Markup
    • 15. Code and content are separation
    • 16. Can be rendered in the browser / standalone application
    • 17. Flexible to load loose XAML
    • 18. Various Markup Extensions enhances the capabilities of XAML
    • 19. Rich User Interface using DirectX
  • Getting Started with WPF
  • 20. Some Important Terms
  • Data Binding
    Target
    Source
    Onetime
    OneWay
    OneWayToSource
    CLR Object
    Dependency Object
    TwoWay
    Dependency Property
    Property
    ICommand
    DataBindingcan 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 ICommandInterface.
  • 28. 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
    {StaticResourcemyDataSource}}"
    </ListBox>
    </StackPanel>
  • 29. Demo Application
  • 30. WPF VNext
  • 31. WPF 5.0 vNext
    • Integration of Ribbon
    • 32. Improved Collection Handling in Background Threads
    • 33. Support for UI Virtualization with Grouping
    • 34. SilverlightHost control with DeepZoom support in WPF
    • 35. Airspace problem Fix for Hwnd-based controls.
  • Ribbon UI Control
  • 36. 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.
    • 37. 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.
    • 38. 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.
    Ribbon controls will be more contextual and hence many items will be hidden and appears only when it is required
    Toolbar is preconfigured and will be disabled when not in use
    Each 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.
  • 39. Features
    RibbonWindow
    Application Menu
    Quick Access Toolbar
    RibbonTabGroup
    Contextual Tab
    SuperToolTip
    GroupResizing
  • 40. Ribbon Window
    • It is inherited from Window.
    • 41. The inherited RibbonWindow includes few more properties like EffectiveLeft, EffectiveTop etc.
    • 42. Ideal for Ribbon UI Control.
    • 43. Automatically adjusts the Ribbon placements
    <ribbon:RibbonWindowx: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>
  • 44. Application Menu
    • Unique menu for the window which allows you to list the most common items.
    • 45. ApplicationMenu contains Auxilary Pane (for recent files), Footer Pane, and MenuItems in the left side.
    <ribbon:Ribbon.ApplicationMenu>
    <ribbon:RibbonApplicationMenuSmallImageSource="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>
  • 46. QuickAccess Toolbar
    • It places small icons in the header section which allows quick access to useful commands.
    • 47. 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>
  • 48. Super ToolTip
    • A special Tooltip which replaces old tooltip.
    • 49. 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"/>
  • 50. RibbonTab Groups
    • RibbonTabGroup allows you to group similar RibbonButtons into single TabGroup.
    • 51. 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>
  • 52. Contextual Tabs
    • Contextual Tabs saves space.
    • 53. You can list the most appropriate controls for the selected item into ContextualTabs.
    • 54. ContextualTab is specially highlighted.
    <ribbon:RibbonTab ContextualTabGroupHeader="ContextualHeader" Header="Selected" >
    <ribbon:RibbonGroup>
    <ribbon:RibbonButton LargeImageSource="ImagesHelpFile.ico"
    Label="Help" />
    </ribbon:RibbonGroup>
    </ribbon:RibbonTab>
  • 55. Demo Application
  • 56. Special Links
  • 57. Questions and Answers
  • 58. Thank You !