1 / 59

Get your XAML on! : Using PowerBuilder’s XAML Editor

Get your XAML on! : Using PowerBuilder’s XAML Editor. John Strano Technology Evangelist. A XAML Primer. Get your XAML on! : Using PowerBuilder’s XAML Editor. You do not need to learn XAML to use PowerBuilder .NET to develop WPF applications. XAML AND PowerBuilder .NET.

duncan
Download Presentation

Get your XAML on! : Using PowerBuilder’s XAML Editor

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Get your XAML on! :Using PowerBuilder’s XAML Editor John Strano Technology Evangelist

  2. A XAML Primer Get your XAML on! : Using PowerBuilder’s XAML Editor

  3. You do not need to learn XAML to use PowerBuilder .NET to develop WPF applications. • XAML AND PowerBuilder .NET

  4. …However, this presentation will give you that extra, optional knowledge to enable you to start down the road to taking full advantage of WPF. • XAML AND PowerBuilder .NET

  5. The Extensible Application Markup Language (XAML) • Declarative • Formatted as XML • Markup that describes the GUI for WPF/Silverlight • Can declaratively specify behavior as well as look and feel • XAML Primer

  6. XAML in PowerBuilder .NET offers strict separation between the presentation layer and behavior • Runtime logic is not tightly coupled to the UI • PowerBuilder .NET goes so far as to… • Save the markup and the code/behavior as two separate files • Have the two files kept in sync by the IDE • XAML Primer

  7. XAML in PowerBuilder .NET offers strict separation between the presentation layer and behavior • Runtime logic is not tightly coupled to the UI • PowerBuilder .NET goes so far as to… • Save the markup and the code/behavior as two separate files • Have the two files kept in sync by the IDE • XAML Primer

  8. XAML in PowerBuilder .NET offers strict separation between the presentation layer and behavior • Runtime logic is not tightly coupled to the UI • PowerBuilder .NET goes so far as to… • Save the markup and the code/behavior as two separate files • Have the two files kept in sync by the IDE • XAML Primer

  9. It can be said that implementing the WPF UI with XAML is “declarative” in that it has no procedural script. • While the preference is to maintain strict separation between presentation and behavior... …again…behavior can be dictated in the XAML markup • XAML primer XAML as Declarative Programming

  10. Since XAML is XML-based, it has “elements” • Each element may have “attributes” which may be initialized with values • Each element in XAML represents a CLR class • An element does not need an identifier if it's not referred to in a script • XAML primer Flavors of XAML Elements

  11. Each element in XAML represents a CLR class <Rectangle> <Rectangle.Effect> <BlurEffect/> </Rectangle.Effect> <Rectangle.OpacityMask> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#00000000" Offset="0.30"/> <GradientStop Color="White" Offset="1"/> </LinearGradientBrush> </Rectangle.OpacityMask> </Rectangle> • XAML primer Flavors of XAML Elements

  12. XAML ELEMENT FLAVORS • Root Elements • Panel Elements • Control Elements • Geometric Elements • XAML ELEMENT FLAVORS

  13. Root Elements • Window and Page are common root elements • For PowerBuilder .NET, “Window” and “UserObject” are the more common root elements • XAML ELEMENT FLAVORS XAML Element Flavors

  14. Root Elements • The default namespace for WPF XAML files is… http://schemas.microsoft.com/winfx/2006/xaml/presentation • …and there is a secondary namespace… xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" • …named or aliased as "x" and should be used for some declarations and classes that aren’t available in the default namespace. • XAML ELEMENT FLAVORS XAML Element Flavors

  15. Root Elements (cont’d) • The PowerBuilder Control Namespace • Gives access to PowerBuilder subclasses of WPF base controls Sybase.PowerBuilder.WPF.Controls • XAML Primer XAML Element Flavors

  16. Root Elements (cont’d) • The PowerBuilder Control Namespace • Gives access to PowerBuilder subclasses of WPF base controls Sybase.PowerBuilder.WPF.Controls • XAML Primer XAML Element Flavors <pbwpf:Windowx:Class="w_1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:pbwpf="clr-namespace:Sybase.PowerBuilder.WPF.Controls;assembly=Sybase.PowerBuilder.WPF.Controls" PBHeight="1640" PBWidth="1179" MinBox="True" MaxBox="True" ControlMenu="True" Uid="4" Height="410" Width="258" pbwpf:SkinManager.Skin=" "> ... </pbwpf:Window>

  17. The PowerBuilder Control Namespace: Abbreviation • Shorthand for namespace citation/invocation Sybase.PowerBuilder.WPF.Controls • XAML Primer XAML Element Flavors

  18. The PowerBuilder Control Namespace: Abbreviation • Shorthand for namespace citation/invocation Sybase.PowerBuilder.WPF.Controls • XAML Primer XAML Element Flavors • <pbwpf:Window> • ... • xmlns:pbwpf="clr-namespace:Sybase.PowerBuilder.WPF.Controls;assembly=Sybase.PowerBuilder.WPF.Controls“ • ... • <pbwpf:ListBox Margin="23”… • <pbwpf:CommandButton Height=… • <pbwpf:DataWindow Height=… • … • </pbwpf:Window>

  19. Panel Elements • Immediate parent to controls <Grid> … </Grid> • Canvas • Grid • Stack Panel • Dock Panel • Wrap Panel • XAML Primer XAML Element Flavors

  20. Panel Elements • Immediate parent to controls <Grid> … </Grid> • Canvas • Grid • Stack Panel • Dock Panel • Wrap Panel • XAML Primer XAML Element Flavors

  21. Panel Elements • Immediate parent to controls <Grid> … </Grid> • Canvas • Grid • Stack Panel • Dock Panel • Wrap Panel • XAML Primer XAML Element Flavors

  22. Panel Elements • Immediate parent to controls <Grid> … </Grid> • Canvas • Grid • Stack Panel • Dock Panel • Wrap Panel • XAML Primer XAML Element Flavors

  23. Panel Elements • Immediate parent to controls <Grid> … </Grid> • Canvas • Grid • Stack Panel • Dock Panel • Wrap Panel • XAML Primer XAML Element Flavors

  24. Panel Elements • Immediate parent to controls <Grid> … </Grid> • Canvas • Grid • Stack Panel • Dock Panel • Wrap Panel • XAML Primer XAML Element Flavors

  25. Control Elements • XAML Primer XAML Element Flavors

  26. XAML uses the first single underscore in a control label to define the character that follows the underscore as an accelerator character for the control. • This is different from PowerScript, which uses an ampersand to signal an accelerator character. • …cont’d… • XAML Coding consideration: • Accelerator Characters

  27. …cont’d… • In XAML, the control label myCommandButton__1_x designates the character x as the accelerator for the control. • XAML Coding consideration: • Accelerator Characters

  28. Geometric Elements • Shapes, Lines • XAML Primer XAML Element Flavors

  29. Resources are often used in WPF applications. • Resources can be defined for various “scopes” • e.g.: Window, Layout Panel • Declared Resources

  30. WPF/XAML have no concept of Visual Inheritance • XAML Primer No Visual Inheritance in WPF/XAML?

  31. The release of PowerBuilder 12 .NET is the advent of Visual Inheritance in XAML/WPF • The powerbuilder .NET XAML Editor • Bringing Visual Inheritance to the XAML World

  32. The release of PowerBuilder 12 .NET is the advent of Visual Inheritance in XAML/WPF • The powerbuilder .NET XAML Editor • Bringing Visual Inheritance to the XAML World

  33. The release of PowerBuilder 12 .NET is the advent of Visual Inheritance in XAML/WPF • The powerbuilder .NET XAML Editor • Bringing Visual Inheritance to the XAML World

  34. The release of PowerBuilder 12 .NET is the advent of Visual Inheritance in XAML/WPF • The powerbuilder .NET XAML Editor • Bringing Visual Inheritance to the XAML World w_ancestor.srw.xaml <pbwpf:Window x:Class="w_ancestor" … xmlns:pbwpf="clr-namespace:Sybase.PowerBuilder.WPF.Controls;assembly=Sybase.PowerBuilder.WPF.Controls" …Uid="7"> <Grid> <pbwpf:CommandButton Height="28" …Name="cb_1" TabOrder="10" Text="_Close" TextSize="-10" VerticalAlignment="Top" PBHeight="112" PBWidth="402" X="1883" Y="80" HorizontalAlignment="Right" Width="88" /> </Grid> </pbwpf:Window>

  35. The release of PowerBuilder 12 .NET is the advent of Visual Inheritance in XAML/WPF • The powerbuilder .NET XAML Editor • Bringing Visual Inheritance to the XAML World w_descendant.srw.xaml <pbwpf:Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:pbwpf="clr-namespace:Sybase.PowerBuilder.WPF.Controls;assembly=Sybase.PowerBuilder.WPF.Controls" x:Class="w_descendant" Uid="10"> <Grid> <pbwpf:CommandButton Height="28" … Name="cb_2" … <pbwpf:CommandButton Height="28" … Name="cb_3" … </Grid> </pbwpf:Window>

  36. Split View Bar • Use the split view bar to control the relative sizes of the Design View and XAML View. • The XAML Editor

  37. The default layout for the WPF Window painter has two views: • The Layout view, where you design the appearance of the window in a WYSIWYG fashion with the WPF Designer • The XAML Editor. …cont’d... • The XAML Editor The Split View Bar

  38. The default layout for the WPF Window painter has two views: • These views have buttons that let you… • Split the Design and XAML panes either vertically or horizontally • Hide one of the panes • Swap the pane positions by clicking the double arrow icon between the Design and XAML panes • The XAML Editor The Split View Bar

  39. The WPF Designer and the XAML Editor synchronize the currently selected item in the markup and in the design view. • The XAML Editor

  40. Tag Navigator • You can move to any parent tag of the currently selected tag in the XAML View by using the tag navigator. • When you hover over a tag in the tag navigator, a thumbnail preview is displayed for that element. • The XAML Editor

  41. IntelliSense for the markup as well as for PowerScript • The xaml editor

  42. Syntax Highlighting • Increases ease of reading XAML • The xaml editor

  43. Syntax Highlighting • Colors can be changes in Preferences • The xaml editor

  44. Document Outline View • The Document Outline View provides a hierarchical view of the XAML document underlying a WPF window. • Preview, select, or delete the window’s XAML elements. • The xaml editor

  45. Document Outline View • Access the Document Outline View by opening the View menu and selecting Document Outline, or by pressing CTRL+ALT+T. • Replaces the Control List View from the native PowerBuilder Window Painter. • The xaml editor

  46. Z Order • Controls added last are “on top” • “Final” Z Order is determined by a control’s order in the XAML • To change the Z Order… • Manipulate the XAML • Use the Context Menu • The xaml editor

  47. Outlining • Portions of the markup can be collapsed to increase readability • The xaml editor

  48. Outlining • Portions of the markup can be collapsed to increase readability • The xaml editor

  49. Auto-Formatting • Block Indentation • The xaml editor

  50. Auto-Formatting • Block Indentation • The xaml editor

More Related