WPF FAQ - ControlTemplates

When you declare elements inside the ControlTemplate, use the ‘Name’ of each control for identifying it from the outside. We can then use the ‘FindName’ function for finding the resource.

An example shown below is for accessing the TextBlock of a button.

[XAML]

<Button Background='LightGoldenrodYellow'>
	<Button.Style>
		<Style TargetType='Button'>
		<!--Set to true to not get any properties from the themes.-->
			<Setter Property='OverridesDefaultStyle' Value='True'/>
			<Setter Property='Template'>
			<Setter.Value>
				<ControlTemplate TargetType='Button'>
				<Grid>
				<Ellipse Name='innerEllipse' Fill='{TemplateBinding Background}'/>
					<ContentPresenter HorizontalAlignment='Center'
                                  			VerticalAlignment='Center'/>
				</Grid>
				</ControlTemplate>
			</Setter.Value>
			</Setter>
		</Style>
	</Button.Style>
</Button>

[C#]
// From inside the custom Button type:
Ellipse ellipse = this.Template.FindName('innerEllipse', this) as Ellipse;

To get the Style for any given WPF control, get the control instance and use the ‘XAMLWriter’ class for writing the XAML related information.

[C#]

   System.Windows.Controls.TextBox t = new System.Windows.Controls.TextBox();
   StringBuilder sb = new StringBuilder();
   using (TextWriter writer = new StringWriter(sb))
   {
        System.Windows.Markup.XamlWriter.Save(t.Template, writer);
   }

To edit ControlTemplates using Blend do the following steps.

1. Locate the control in the visual tree.

2. Right-click on it and then select,

• Edit Control Parts (Template) -> Edit a Template / Edit a Copy. Blend would prompt for creating the template if it’s not already created.

The important key point when building an ItemsControl or any of it’s derived classes (listbox, combobox, listview etc.), is to make sure to include an ‘ItemsPresenter’ object somewhere in the ControlTemplate. It’s the place holder for the panel to display the ItemsControl items. An alternative is to include a panel into the ControlTemplate with the property ‘IsItemsHost’ set to ’true’.

It allows you to specify the visual structure of a class. The main advantage is we can override the default ControlTemplate defined in the control and replace it with new ControlTemplates, to reconstruct the visual structure of the class.

The following code illustrates the ControlTemplate of a button.

[XAML]

      <Style TargetType='Button'>
        <!--Set to true to not get any properties from the themes.-->
        <Setter Property='OverridesDefaultStyle' Value='True'/>
        <Setter Property='Template'>
          <Setter.Value>
            <ControlTemplate TargetType='Button'>
              <Grid>
                <Ellipse Fill='{TemplateBinding Background}'/>
                <ContentPresenter HorizontalAlignment='Center'
                                  VerticalAlignment='Center'/>
              </Grid>
            </ControlTemplate>
          </Setter.Value>
        </Setter>
      </Style>