Cloud Training (Online)




Oxygene and WP8 – Templates in XAML

There are 2 different types of templates which the developers can use to customize the controls . These include.

  • ControlTemplate
  • DataTemplate

ControlTemplate

The ControlTemplate can be used to customize the look of the control without affecting its behavior.

One of the drawbacks of the Style element when compared to the ControlTemplate is that the Style can only be used to set the properties that are available in the TargetType Control.

With the ControlTemplate , one can access the complete primitive parts that make up a control.

Below is a sample code snippet that demonstrates how to use the ControlTemplate to display rounded corner for the button.

<Button x:Name="btnLaunch" >
  <Button.Template>
    <ControlTemplate>
      <Border CornerRadius="20"
        BorderThickness="10"
        BorderBrush="White">
        <TextBlock>
          LaunchMobileOSGeek Website
        </TextBlock>
      </Border>
    </ControlTemplate>
  </Button.Template>
</Button>

Oxygene and WP8 - Templates in XAML

DataTemplate

The DataTemplate is used to display the data inside the control or its area. The content displayed depends on the data that is bound to the template. Some of the Controls that uses the DataTemplate are ListBox , LongListSelector etc.

Below is a sample code snippet demonstrating the usage of the DataTemplate with the LongListSelector

<phone:LongListSelector >
  <phone:LongListSelector.ItemTemplate>
    <DataTemplate>
      <TextBlock Text="{Binding Name}">
      </TextBlock>
    </DataTemplate>
  </phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
Senthil Kumar B
Senthil Kumar is a former Microsoft MVP (Most Valuable Professional). He is a Co-Author of the book "Windows 10 Development Recipes using JavaScript and CSS" for Apress Publication. He is a technical presenter, blogger, mentor and a Geek.  Senthil is a regular speaker is various local user groups. He has presented at conferences like Great Indian Developer Summit (GIDS) & Microsoft DevCamps. You can reach out to him via his Twitter handle @isenthil.