Current Conversion and required manual changes to enable the control templates

This section describes the actions required to activate the extracted control templates

Introduction

Control Templates are a difficult topic to move to Angular. It seems that there is no direct equivalent for it. This Silverlight feature allows the developer to replace the way to render any control without modifying its implementation.

Source code

Here you can download the source code that is used across the example.

The Silverlight example

Given the following example definition:

<Grid x:Name="LayoutRoot" Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <TextBlock HorizontalAlignment="Center" Grid.Column="0">Using Control Template</TextBlock>
        <Button Name="MyTemplatedButton" Grid.Column="0" Style="{StaticResource MyCustomButtonStyle}" Click="MyTemplatedButton_Click" ></Button>
        <TextBlock HorizontalAlignment="Center" Grid.Column="1">Not Using Control Template</TextBlock>
        <Button Name="MyNormalButton" Grid.Column="1" Width="80" Height="30" Content="Click Me!" Click="MyNormalButton_Click"></Button>
    </Grid>
</UserControl>

In the previous Xaml code, you can find the definition of two buttons, however, one of the button's appearance is being changed by using the Template property (System.Windows.Controls.Control.Template property) defined inside a custom style. This property is usually (but not always) specified in a Setter of a Style in a resource dictionary.

<Button Name="MyTemplatedButton" Grid.Column="0" Style="{StaticResource MyCustomButtonStyle}" Click="MyTemplatedButton_Click" ></Button>

The following code creates a custom style and defines the template by setting an instance of a Control Template.

<UserControl.Resources>
        <Style x:Key="MyCustomButtonStyle" TargetType="Button">
            <Setter Property="Visibility" Value="Visible"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Border Width="30" Height="30" BorderThickness="2" BorderBrush="BurlyWood" CornerRadius="5">
                                <Ellipse x:Name="closeButton" Fill="Red" Width="20" Height="20" ToolTipService.ToolTip="Close Application"/>
                            </Border>
                            <Path x:Name="DeleteGlyph" Width="10" Height="10" Stretch="Fill" StrokeThickness="2" 
                                  StrokeLineJoin="Round" Stroke="#E9EAEC" Fill="#E9EAEC" Data="M 2.81143,3.18926L 14.1886,13.8112M 2.81143,13.7614L 14.1401,3.18926"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

The previous code Renders:

Migrated Application without the Control Template Activation

If you run the migrated application before activating the Control Template, it will render:

Activating the control template

By default, the control templates are not active in the migrated code. When the migration tool converts the code, the Control Templates elements found in Xaml are extracted into new Angular components. These components are not registered in the module of its library. The reason for not registering them is that trying to make them work is not trivial and several different/specific cases have been found.

In the previous Silverlight example, there is a Control Template defined inside a custom style, and the style is being used in the first button definition of the MainPage. In the Angular/HTML template of the MainPage, you can see that the Resource dictionary that contains the custom style, and the control template are not included.

<wm-user-control [model]='model' class='usercontrol-wm-control0'>
   <wm-grid [model]='model.LayoutRoot' [name]='"LayoutRoot"' id="LayoutRoot" [background]='"White"' class='LayoutRoot' wmGenerateRadioGroups #ucItem>
      <wm-grid-column-definitions>
         <wm-grid-column-definition [model]='model.columndefinition__model0'>
         </wm-grid-column-definition>
         <wm-grid-column-definition [model]='model.columndefinition__model1'>
         </wm-grid-column-definition>

      </wm-grid-column-definitions>
      <wm-text-block [model]='model.textblock__model0' [horizontalAlignment]='"Center"' [column]="0" wmGrid [text]='"Using Control Template"' class='textblock-wm-control0' #gridItem>
      </wm-text-block>
      <wm-button [model]='model.MyTemplatedButton' [name]='"MyTemplatedButton"' id="MyTemplatedButton" [column]="0" [style]='{ resourceKey: "MyCustomButtonStyle"}' (click)="model.MyTemplatedButton_Click($event.sender,$event.e)" wmGrid class='MyTemplatedButton' #gridItem>
      </wm-button>
      <wm-text-block [model]='model.textblock__model1' [horizontalAlignment]='"Center"' [column]="1" wmGrid [text]='"Not Using Control Template"' class='textblock-wm-control1' #gridItem>
      </wm-text-block>
      <wm-button [model]='model.MyNormalButton' [name]='"MyNormalButton"' id="MyNormalButton" [column]="1" [width]="80" [height]="30" [content]='"Click Me!"' (click)="model.MyNormalButton_Click($event.sender,$event.e)" wmGrid class='MyNormalButton' #gridItem>
      </wm-button>

   </wm-grid>

</wm-user-control>

As with the control template, the Resource Dictionary is extracted. In this case, the dictionary is moved to the model of the MainPage component while the control template is extracted as a different component. You can see the files created for the extracted control template in the following image:

And here is the resulting Angular/HTML template of the template found in the "MainPage"

<wm-grid [model]='model.grid__model0' class='grid-wm-control0' wmGenerateRadioGroups>
   <wm-border [model]='model.border__model0' [width]="30" [height]="30" [borderThickness]='"2"' [borderBrush]='"BurlyWood"' [cornerRadius]='"5"' class='border-wm-control0' wmGrid #gridItem>
      <wm-ellipse [model]='model.closeButton' [name]='"closeButton"' id="closeButton" [fill]='"Red"' [width]="20" [height]="20" [wmTooltip]='"Close Application"' class='closeButton'>
      </wm-ellipse>

   </wm-border>
   <wm-path [model]='model.DeleteGlyph' [name]='"DeleteGlyph"' id="DeleteGlyph" [width]="10" [height]="10" [stretch]='"Fill"' [strokeThickness]="2" [stroke]='"#E9EAEC"' [fill]='"#E9EAEC"' [data]='"M 2.81143,3.18926L 14.1886,13.8112M 2.81143,13.7614L 14.1401,3.18926"' class='DeleteGlyph' wmGrid #gridItem>
   </wm-path>

</wm-grid>html

And the component definition:

import { ChangeDetectorRef, Component, ElementRef, Injector, Input, Optional, Renderer2} from "@angular/core";
import { BaseComponent} from "@mobilize/wms-i-components";
import { ComponentId, syncComponentAndModel, ModelProxy} from "@mobilize/wms-framework";
import { MyCustomButtonStyleCTModel} from "./MyCustomButtonStyleCTModel";
@Component({
   selector : "MyCustomButtonStyleCT",
   templateUrl : "MyCustomButtonStyleCT.html",
   styleUrls : ["MyCustomButtonStyleCT.scss"]
})
@ComponentId(["MyCustomButtonStyleCT"])
export class MyCustomButtonStyleCT extends BaseComponent {
   @Input()
   model : MyCustomButtonStyleCTModel;
   modelProxy : MyCustomButtonStyleCTModel = ModelProxy.create <MyCustomButtonStyleCTModel>();
   get declaringContext() : any {
      return (this.modelProxy)["declaringContext"];
   }
   constructor (cdRef : ChangeDetectorRef,injector : Injector,@Optional() public injectedModel : MyCustomButtonStyleCTModel,private element : ElementRef <HTMLElement>,protected renderer : Renderer2) {
      super(cdRef,injector);
   }
   ngOnInit () {
      this.model = this.model || this.injectedModel;
      syncComponentAndModel(this.element.nativeElement,this.model.TemplateParentModel ?? this.model);
      this.setupModel(this.model);
      this.renderer.addClass(this.element.nativeElement,"isUserControl");
      super.ngOnInit();
   }
}

The first step to enabling the control template is to register the component in the library or application module where it is defined (app.module.ts or lib.module.ts). Following the example included in this guide, you need to add MysCustomButtonStyleCT to the app.module.ts file.

...
import { MyCustomButtonStyleCT } from './MainPage/MyCustomButtonStyleCT';
...


import { App } from './App';
import { MainPageComponent } from './MainPage.component';

@NgModule({
  declarations: [
      App,
    MainPageComponent,
    ...
    MyCustomButtonStyleCT
    ...
  ],

The entire file after adding the MyCustomButtonStyleCT will look as follows:

import { BrowserModule, HammerModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';
import { IComponentsModule  } from '@mobilize/wms-i-components';
import { WmsFrameworkModule, UnhandledExceptionsHandler } from '@mobilize/wms-framework';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { MyCustomButtonStyleCT } from './MainPage/MyCustomButtonStyleCT';
import 'hammerjs';

import './App';
import './MainPage';


import { App } from './App';
import { MainPageComponent } from './MainPage.component';

@NgModule({
  declarations: [
      App,
    MainPageComponent,
    MyCustomButtonStyleCT
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HammerModule,
    HttpClientModule,
    BrowserAnimationsModule,
	WmsFrameworkModule,
    IComponentsModule,
  ],
  providers: [{provide: ErrorHandler, useClass: UnhandledExceptionsHandler}],
  bootstrap: [ App ]
})
export class AppModule {
    App: App;
    MainPageComponent: MainPageComponent;
}

Now that the component is registered, you can go to the converted resource dictionary where the control template was defined (in this case, the resource dictionary was extracted in the MainPage component model).

You can see in the following style definition (defined in MainPage.ts model class), that the setter for the Template property was generated but the value it's initialized to null.

function setupResources_0(resources : ResourceDictionary,declaringContext : any) {
   resources.Add("MyCustomButtonStyle",style_MyCustomButtonStyle_0(resources,declaringContext));
}
function style_MyCustomButtonStyle_0(ctxt : ResourceDictionary,declaringContext : any) {
   const style = new RuntimeStyleInfo();
   style.Setters.add(Object.assign(new Setter(),{
      Property : "Visibility",
      Value : true
   }));
   style.Setters.add(Object.assign(new Setter(),{
      Property : "Template",
      Value : null
   }));
   return style;
}

And to enable the control template, you need to add the following initialization instead of the initialization to null:

new ControlTemplate(MyCustomButtonStyleCTModel);

The control template initialization from the previous line of code must be added to the setter for the "Template" property.

style.Setters.add(Object.assign(new Setter(),{
      Property : "Template",
      Value : new ControlTemplate(MyCustomButtonStyleCTModel)
}));

It's important to add the import for ControlTemplate and MyCustomButtonStyleCTModel when adding the control template initialization. The final version of the component model after adding the Control Template initialization will be:

import { RoutedEventArgs, MessageBoxModel, UserControlModel, ResourceDictionary, RuntimeStyleInfo, Setter, ClassInfo, GridModel, GridColumnDefinition, TextBlockModel, ButtonModel, Application, Uri, UriKind, convertTypeTo, withName, ControlTemplate} from "@mobilize/wms-framework";
import { MyCustomButtonStyleCTModel } from "./MainPage/MyCustomButtonStyleCTModel";
@ClassInfo({
   classId : "CTDemo.MainPage",
   assembly : "CTDemo",
   implements : []
})
export class MainPage extends UserControlModel {
   AngularComponentId : any;
   public constructor () {
      super();
      this.InitializeComponent();
      this.AngularComponentId = "CTDemo.MainPage"
   }
   public MyTemplatedButton_Click (sender : any,e : RoutedEventArgs) : void {
      MessageBoxModel.Show("The button using a Control Template was clicked!");
   }
   public MyNormalButton_Click (sender : any,e : RoutedEventArgs) : void {
      MessageBoxModel.Show("The button without a Control Template was clicked!");
   }
   columndefinition__model0 : GridColumnDefinition;
   columndefinition__model1 : GridColumnDefinition;
   textblock__model0 : TextBlockModel;
   textblock__model1 : TextBlockModel;
   /**
    * Loads the model for the child elements defined in the component.
    *
    * @protected
    * @memberof MainPage
    */
   protected loadModels () {
      this.LayoutRoot = withName(new GridModel (),"LayoutRoot");
      this.Content = this.LayoutRoot;
      this.columndefinition__model0 = new GridColumnDefinition ();
      this.LayoutRoot.ColumnDefinitions.add(this.columndefinition__model0);
      this.columndefinition__model1 = new GridColumnDefinition ();
      this.LayoutRoot.ColumnDefinitions.add(this.columndefinition__model1);
      this.textblock__model0 = new TextBlockModel ();
      this.LayoutRoot.Children.add(this.textblock__model0);
      this.MyTemplatedButton = withName(new ButtonModel (),"MyTemplatedButton");
      this.LayoutRoot.Children.add(this.MyTemplatedButton);
      this.textblock__model1 = new TextBlockModel ();
      this.LayoutRoot.Children.add(this.textblock__model1);
      this.MyNormalButton = withName(new ButtonModel (),"MyNormalButton");
      this.LayoutRoot.Children.add(this.MyNormalButton);
   }
   /**
    * Initialize the child elements properties of the component in code behind.
    *
    * @protected
    * @memberof MainPage
    */
   protected initProperties () {
      setupResources_0(this.resources,this);
   }
   //Partial class contents from MainPage.g.cs
   public LayoutRoot : GridModel = null;
   public MyTemplatedButton : ButtonModel = null;
   public MyNormalButton : ButtonModel = null;
   private _contentLoaded : boolean = false;
   /**
    * 
    * InitializeComponent
    * 
    */
   public InitializeComponent () : void {
      if (this._contentLoaded) {
         return;
      }
      this._contentLoaded = true;
      this.loadModels();
      this.initProperties();
   }
}
function setupResources_0(resources : ResourceDictionary,declaringContext : any) {
   resources.Add("MyCustomButtonStyle",style_MyCustomButtonStyle_0(resources,declaringContext));
}
function style_MyCustomButtonStyle_0(ctxt : ResourceDictionary,declaringContext : any) {
   const style = new RuntimeStyleInfo();
   style.Setters.add(Object.assign(new Setter(),{
      Property : "Visibility",
      Value : true
   }));
   style.Setters.add(Object.assign(new Setter(),{
      Property : "Template",
      Value : new ControlTemplate(MyCustomButtonStyleCTModel) // Adding Control Template initialization
   }));
   return style;
}s

Now you can rebuild and run the application again to see how the application renders the buttons with the control template enabled:

Resources

Silverlight Application

Angular Migrated Application

PreviousControl Templates in Silverlight NextProduction mode

Last updated 3 years ago

Was this helpful?