Overview of WPF in light of Ribbon UI Control
•Télécharger en tant que PPTX, PDF•
1 j'aime•2,210 vues
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
Recommandé
Contenu connexe
Similaire à Overview of WPF in light of Ribbon UI Control
Similaire à Overview of WPF in light of Ribbon UI Control (20)
Plus de Abhishek Sur
Plus de Abhishek Sur (20)
Dernier
Dernier (20)
Overview of WPF in light of Ribbon UI Control
- 1. Ribbon UI Control in WPF Application Abhishek Sur www.abhisheksur.com
- 2. Agenda
- 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 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. 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) 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. 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. Getting Started with WPF
- 13. Some Important Terms Property Markup Extensions Routed Events Styles & Triggers Resources Animation 3D support DataBinding
- 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. 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. Demo Application
- 17. WPF VNext
- 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.
- 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. 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. Features Quick Access Toolbar RibbonWindow Application Menu RibbonTabGroup Contextual Tab SuperToolTip GroupResizing
- 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. 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. 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. 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. 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. 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. Demo Application
- 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
- 32. Thank You !
Notes de l'éditeur
- 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.