PowerBuilder Blog

PowerBuilder is .NET: Control Templates

This post will further illuminate how PowerBuilder is .NET, and will further assist the reader in imparting to their employer or client list that initiatives or mandates to “go .NET” are met by implementing PowerBuilder 12 .NET.

In that PowerBuilder 12 .NET is hybridized with the Visual Studio Isolated Shell, PowerBuilder developers are using the same infrastructure, the same WPF designer, the same XAML Editor that are being tested by VS2010 beta participants…cutting edge, and with the additional productivity of PowerBuilder and DataWindow technologies.

http://www.sybase.com/powerbuilder12beta

This post will show that users of PowerBuilder 12 .NET will have a “PowerBuilder Experience” while developing WPF applications and will also have the freedom of using “off the street” XAML to create rich, cutting edge user interfaces.

Control Templates

Control Templates can modify the default UI for controls and allow the developer to adhere to, or if they deem it appropriate, depart from the style that is established for an application or an entire enterprise.

In this screenshot, you can see that within PowerBuilder 12 .NET’s Window Painter, I’ve placed a commandbutton within a grid layout.

Here is its XAML markup as it now appears in the XAML Editor…

<pbwpf:CommandButton Height=”82″ Margin=”152,256,0,0″ Name=”cb_1″ TabOrder=”10″ Text=”Click Me, I’m PowerBuilder” VerticalAlignment=”Top” X=”695″ Y=”1024″ PBWidth=”1138″ PBHeight=”328″ Width=”249″ HorizontalAlignment=”Left”/ >

Now I’ll prepare it for a Control Template by adjusting the termination of the element…

<pbwpf:CommandButton Height=”82″ Margin=”152,256,0,0″ Name=”cb_1″ TabOrder=”10″ Text=”Click  Me, I’m PowerBuilder” VerticalAlignment=”Top” X=”695″ Y=”1024″ PBWidth=”1138″ PBHeight=”328″ Width=”249″ HorizontalAlignment=”Left” >
</pbwpf:CommandButton>

In my reading, I found almost identical Control Template citations for a button on two different pages…

http://blogs.msdn.com/wpfsdk/archive/2007/03/16/how-do-i-programmatically-interact-with-template-generated-elements-part-i.aspx

http://msdn.microsoft.com/en-us/library/bb613586.aspx

What I’ll do next is adapt that XAML to use the pbwpf:CommandButton type rather than the base WPF Button…

<pbwpf:CommandButton Height=”82″ Margin=”152,256,0,0″ Name=”cb_1″ TabOrder=”10″ Text=”Click  Me, I’m PowerBuilder” VerticalAlignment=”Top” X=”695″ Y=”1024″ PBWidth=”1138″ PBHeight=”328″ Width=”249″ HorizontalAlignment=”Left” >
    <pbwpf:CommandButton.Template>
        <ControlTemplate TargetType=”{x:Type pbwpf:CommandButton}”>
            <Grid Margin=”5″>
                <Ellipse Stroke=”DarkBlue” StrokeThickness=”2″>
                    <Ellipse.Fill>
                        <RadialGradientBrush Center=”0.3,0.2″ RadiusX=”0.5″ RadiusY=”0.5″>
                            <GradientStop Color=”Azure” Offset=”0.1″ />
                            <GradientStop Color=”CornflowerBlue” Offset=”1.1″ />
                        </RadialGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
                <ContentPresenter Name=”content” HorizontalAlignment=”Center” VerticalAlignment=”Center”/>
            </Grid>
        </ControlTemplate>
    </pbwpf:CommandButton.Template>
</pbwpf:CommandButton>

With some adjustment of height/width and textsize, here are the visual results…

Other PowerBuilder controls in PowerBuilder 12 .NET are subclassed from the base WPF controls and may also utilize Control Templates. Here is a simple ListBox I’ve placed on my Window…

…and now I wish to dynamically apply a Control Template to it at runtime. This template is contained within a ResourceDictionary (as a reminder, each element is the declaration of a corresponding class in the framework)…and here is its markup…

<ResourceDictionary

  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”

  >

    <ResourceDictionary.MergedDictionaries>

        <ResourceDictionary Source=”pack://application:,,,/Sybase.PowerBuilder.WPF.Controls;component/Resources/PBDefault/ListBox.xaml”/>

    </ResourceDictionary.MergedDictionaries>

 

    <Style x:Key=”ColorListBoxItem_Style” TargetType=”{x:Type ListBoxItem}”>

        <Setter Property=”Template”>

            <Setter.Value>

                <ControlTemplate TargetType=”{x:Type ListBoxItem}”>

                    <Border Background=”WhiteSmoke”

                                    CornerRadius=”5″

                                    BorderThickness=”2″

                                    x:Name=”ItemBorder”

                                    Margin=”6,3,6,3″

                                    Padding=”3″

                         >

                        <ContentPresenter />

                    </Border>

                    <ControlTemplate.Triggers>

                        <EventTrigger

                            SourceName=”ItemBorder”

                            RoutedEvent=”TextBlock.MouseEnter”>

                            <BeginStoryboard>

                                <Storyboard>

                                    <ColorAnimation Storyboard.TargetName=”ItemBorder”   

                                        Storyboard.TargetProperty=”Background.Color”  

                                        To=”Blue” Duration=”00:00:00.2″ />

                                </Storyboard>

                            </BeginStoryboard>

                        </EventTrigger>

                        <EventTrigger

                            SourceName=”ItemBorder”

                            RoutedEvent=”TextBlock.MouseLeave”>

                            <BeginStoryboard>

                                <Storyboard>

                                    <ColorAnimation Storyboard.TargetName=”ItemBorder”   

                                        Storyboard.TargetProperty=”Background.Color”  

                                        To=”WhiteSmoke” Duration=”00:00:00.2″ />

                                </Storyboard>

                            </BeginStoryboard>

                        </EventTrigger>

 

                        <Trigger Property=”IsSelected” Value=”true”>

                            <Setter

                                    TargetName=”ItemBorder”

                                    Property=”BitmapEffect”>

                                <Setter.Value>

                                    <OuterGlowBitmapEffect

                                            GlowColor=”Blue”

                                            GlowSize=”10″ />

                                </Setter.Value>

                            </Setter>

                        </Trigger>

                    </ControlTemplate.Triggers>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

 

    <Style x:Key=”{x:Type pbwpf:ListBox}” TargetType=”pbwpf:ListBox”  BasedOn=”{StaticResource {x:Type pbwpf:ListBox}}”>

        <Setter Property=”ItemContainerStyle” Value=”{StaticResource ColorListBoxItem_Style}” />

         <Setter Property=”Template”>

            <Setter.Value>

                <ControlTemplate TargetType=”{x:Type pbwpf:ListBox}”>

                    <Border x:Name=”BoxBorder” SnapsToDevicePixels=”true” BorderBrush=”{TemplateBinding BorderBrush}” BorderThickness=”{TemplateBinding BorderThickness}”

                            Background=”Gold”

                            CornerRadius=”8″

                                                                                                                           >

                        <ScrollViewer x:Name=”Scroll_Viewer”

                             HorizontalScrollBarVisibility=”{Binding Path= HScrollBar, RelativeSource={RelativeSource AncestorType=pbwpf:ListBox},Converter={StaticResource pbScrollBarToScrollBarVisibilityConverter}}”

                             VerticalScrollBarVisibility=”{Binding Path= VScrollBar, RelativeSource={RelativeSource AncestorType=pbwpf:ListBox},Converter={StaticResource pbScrollBarToScrollBarVisibilityConverter}}”

                            >

                            <ItemsPresenter/>

                      </ScrollViewer>

                    </Border>

                </ControlTemplate>

                                                                        </Setter.Value>                                                                                  

                                                </Setter>

    </Style>

</ResourceDictionary>

…here is the PowerScript in the clicked event of the commandbutton for selecting and applying the Control Template…

Integer li_rc
String ls_path , ls_file , ls_directory

ls_directory = GetCurrentDirectory ( )
li_rc = GetFileOpenName &
 (“Skins, Themes and Control Templates”, ls_path, ls_file, &
 “*.xaml”, “Skins (*.xaml),*.xaml”, ls_directory, 12)

if ls_file <> “” then
 lb_1.Skin = ls_path
end if

…and here are the visual results…

…Here is the result after modifying some of the color values within the XAML…

Not only does PowerBuilder give you the freedom to use WPF/XAML resources you find in the wild, in that PowerBuilder gives you the only application migration path from Win32 to WPF in the industry, it gives you the ability to apply those resources to your tried and true applications that have been running your business for years.  This also enables you to utilize resources created by non-PowerBuilder .NET developers that may be on your team.

Yes, PowerBuilder now gives you visually sophisticated user interfaces that will compete with anything else in the industry bar none. It will in a similar fashion give you access to other features and capabilities of .NET that will continue to “future proof” your PowerBuilder investment.