Get your xaml on using powerbuilder s xaml editor
This presentation is the property of its rightful owner.
Sponsored Links
1 / 59

Get your XAML on! : Using PowerBuilder’s XAML Editor PowerPoint PPT Presentation


  • 199 Views
  • Uploaded on
  • Presentation posted in: General

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.

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Get your xaml on using powerbuilder s xaml editor

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

John Strano

Technology Evangelist


Get your xaml on using powerbuilder s xaml editor

A XAML Primer

Get your XAML on! :

Using PowerBuilder’s XAML Editor


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


Get your xaml on using powerbuilder s xaml editor

  • …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


Get your xaml on using powerbuilder s xaml editor

  • 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


Get your xaml on using powerbuilder s xaml editor

  • 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


Get your xaml on using powerbuilder s xaml editor

  • 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


Get your xaml on using powerbuilder s xaml editor

  • 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


Get your xaml on using powerbuilder s xaml editor

  • 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


Get your xaml on using powerbuilder s xaml editor

  • 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


Get your xaml on using powerbuilder s xaml editor

  • 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


Get your xaml on using powerbuilder s xaml editor

  • XAML ELEMENT FLAVORS

    • Root Elements

    • Panel Elements

    • Control Elements

    • Geometric Elements

  • XAML ELEMENT FLAVORS


Get your xaml on using powerbuilder s xaml editor

  • 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


Get your xaml on using powerbuilder s xaml editor

  • 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


Get your xaml on using powerbuilder s xaml editor

  • 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


Get your xaml on using powerbuilder s xaml editor

  • 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>


Get your xaml on using powerbuilder s xaml editor

  • The PowerBuilder Control Namespace: Abbreviation

    • Shorthand for namespace citation/invocation

      Sybase.PowerBuilder.WPF.Controls

  • XAML Primer

XAML Element Flavors


Get your xaml on using powerbuilder s xaml editor

  • 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>


Get your xaml on using powerbuilder s xaml editor

  • Panel Elements

  • Immediate parent to controls

    <Grid>

    </Grid>

  • Canvas

  • Grid

  • Stack Panel

  • Dock Panel

  • Wrap Panel

  • XAML Primer

XAML Element Flavors


Get your xaml on using powerbuilder s xaml editor

  • Panel Elements

  • Immediate parent to controls

    <Grid>

    </Grid>

  • Canvas

  • Grid

  • Stack Panel

  • Dock Panel

  • Wrap Panel

  • XAML Primer

XAML Element Flavors


Get your xaml on using powerbuilder s xaml editor

  • Panel Elements

  • Immediate parent to controls

    <Grid>

    </Grid>

  • Canvas

  • Grid

  • Stack Panel

  • Dock Panel

  • Wrap Panel

  • XAML Primer

XAML Element Flavors


Get your xaml on using powerbuilder s xaml editor

  • Panel Elements

  • Immediate parent to controls

    <Grid>

    </Grid>

  • Canvas

  • Grid

  • Stack Panel

  • Dock Panel

  • Wrap Panel

  • XAML Primer

XAML Element Flavors


Get your xaml on using powerbuilder s xaml editor

  • Panel Elements

  • Immediate parent to controls

    <Grid>

    </Grid>

  • Canvas

  • Grid

  • Stack Panel

  • Dock Panel

  • Wrap Panel

  • XAML Primer

XAML Element Flavors


Get your xaml on using powerbuilder s xaml editor

  • Panel Elements

  • Immediate parent to controls

    <Grid>

    </Grid>

  • Canvas

  • Grid

  • Stack Panel

  • Dock Panel

  • Wrap Panel

  • XAML Primer

XAML Element Flavors


Get your xaml on using powerbuilder s xaml editor

  • Control Elements

  • XAML Primer

XAML Element Flavors


Get your xaml on using powerbuilder s xaml editor

  • 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


Get your xaml on using powerbuilder s xaml editor

  • …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


Get your xaml on using powerbuilder s xaml editor

  • Geometric Elements

    • Shapes, Lines

  • XAML Primer

XAML Element Flavors


Get your xaml on using powerbuilder s xaml editor

  • Resources are often used in WPF applications.

  • Resources can be defined for various “scopes”

    • e.g.: Window, Layout Panel

  • Declared Resources


Get your xaml on using powerbuilder s xaml editor

WPF/XAML have no concept of Visual Inheritance

  • XAML Primer

No Visual Inheritance in WPF/XAML?


Get your xaml on using powerbuilder s xaml editor

  • 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


Get your xaml on using powerbuilder s xaml editor

  • 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


Get your xaml on using powerbuilder s xaml editor

  • 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


Get your xaml on using powerbuilder s xaml editor

  • 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>


Get your xaml on using powerbuilder s xaml editor

  • 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>


Get your xaml on using powerbuilder s xaml editor

  • Split View Bar

    • Use the split view bar to control the relative sizes of the Design View and XAML View.

  • The XAML Editor


Get your xaml on using powerbuilder s xaml editor

  • 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


Get your xaml on using powerbuilder s xaml editor

  • 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


Get your xaml on using powerbuilder s xaml editor

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

  • The XAML Editor


Get your xaml on using powerbuilder s xaml editor

  • 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


Get your xaml on using powerbuilder s xaml editor

  • IntelliSense for the markup as well as for PowerScript

  • The xaml editor


Get your xaml on using powerbuilder s xaml editor

  • Syntax Highlighting

    • Increases ease of reading XAML

  • The xaml editor


Get your xaml on using powerbuilder s xaml editor

  • Syntax Highlighting

    • Colors can be changes in Preferences

  • The xaml editor


Get your xaml on using powerbuilder s xaml editor

  • 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


Get your xaml on using powerbuilder s xaml editor

  • 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


Get your xaml on using powerbuilder s xaml editor

  • 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


Get your xaml on using powerbuilder s xaml editor

  • Outlining

  • Portions of the markup can be collapsed to increase readability

  • The xaml editor


Get your xaml on using powerbuilder s xaml editor

  • Outlining

  • Portions of the markup can be collapsed to increase readability

  • The xaml editor


Get your xaml on using powerbuilder s xaml editor

  • Auto-Formatting

    • Block Indentation

  • The xaml editor


Get your xaml on using powerbuilder s xaml editor

  • Auto-Formatting

    • Block Indentation

  • The xaml editor


Get your xaml on using powerbuilder s xaml editor

  • Auto-Formatting

    • Auto-Indentation

  • The xaml editor


Get your xaml on using powerbuilder s xaml editor

  • Auto-Formatting

    • Brace Matching

  • The XAML EDITOR


Get your xaml on using powerbuilder s xaml editor

  • Capturing Events of

  • Non-Visual XAML-DECLARED Classes


Get your xaml on using powerbuilder s xaml editor

  • Capturing Events of

  • Non-Visual XAML-DECLARED Classes


Get your xaml on using powerbuilder s xaml editor

  • New Feature in PowerBuilder 12.1:

  • XAML / Script Synchronization


Get your xaml on using powerbuilder s xaml editor

  • New Feature in PowerBuilder 12.1:

  • XAML / Script Synchronization


Get your xaml on using powerbuilder s xaml editor

  • New Feature in PowerBuilder 12.1:

  • XAML / Script Synchronization


Get your xaml on using powerbuilder s xaml editor

DEMO

John Strano

Technology Evangelist


Get your xaml on using powerbuilder s xaml editor

THANK YOU

John Strano

Technology Evangelist


  • Login