Templating Simple Controls

First, you have to consider that there are two types of controls under SB/XA, the ones that directly match WPF equivalent controls (Simple controls), and the others. It is very important while attempting to template/style existing SB/XA Controls.

For example, SBButton matches a Button, SBComboBox matches a ComboBox.

On the opposite, SBField does not match Field, as Field is not a WPF Control.

The reason for the difference is that SBField is a generic class used for all fields supported by SB/XA unless we had to do something very specific, as is the case with the ComboBox. So you will find that SBField is used for regular text fields, where the visual implementation is SBTextBox, password fields and image fields.

Multi-value fields also use a unique lookless class to start with SBMvEditControl, within each cell SBField, SBComboBox,etc. are used however they have different styles and in some cases templates compared to the standard fields.

Instead, SBField uses SBTextBoxes, Images, PasswordBoxes depending on the SB properties of the control.

The second important thing to understand is that SB Controls do not use a unique template, but can use many.

Fonctional Template and Graphic Template
We'll use here the example of SBButton and template it so you can understand the double templating.

SBButton is a child of the control SBControl. In the Default/Base definitions files, you will find the BaseSBButtonStyle.xaml, which defines the template (here the fonctional template) for the SBButton control.

Here is the template provided in SB/XA Default :

     

     <Button x:Name="PART_FocusSite" Style="{Binding Path=(sbc:SBControl.SBControlStyle), RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}" Command="{Binding Path=Command, RelativeSource={RelativeSource TemplatedParent}}" CommandParameter="{Binding Path=CommandParameter, RelativeSource={RelativeSource TemplatedParent}}" CommandTarget="{Binding Path=CommandTarget, RelativeSource={RelativeSource TemplatedParent}}" IsEnabled="{Binding Path=IsEnabled, RelativeSource={RelativeSource TemplatedParent}}" IsDefault="{Binding Path=IsDefault, RelativeSource={RelativeSource TemplatedParent}}" Padding="{Binding Path=Padding, RelativeSource={RelativeSource TemplatedParent}}" > ...  ...

There are two important things to see here. First you can see that the template consists of a Button :



As I said before, SBButton is a child of SBControl. And the SBControl has a property named SBControlStyle. This is the trick.

When you want to template a simple control, you may want to change the look and feel of the control, without loosing all the inheritance of the SB properties attached to this control. The trick is then to push your graphic style/template through the SBControlStyle property instead of redefining the SBButton Template.

Here we go :

    </DataTrigger> </Style.Triggers> </Style> <Style x:Key="MySBButtonStyle" TargetType="{x:Type sbc:SBButton}" > <Setter Property="SBControlStyle" Value="{DynamicResource MyButtonStyle}" /> </Style>