#724 – Sample Code for Examining Control Templates

January 1, 2013 Leave a comment

Charles Petzold, in his book Applications = Code + Markup, includes lots of useful sample code.  In chapter 25, talking about templates, he presents source code for a DumpControlTemplate project.  You can find the source code at http://www.microsoft.com/mspress/companion/0-7356-1957-3/.   Download the code samples and then look for the DumpControlTemplate project under chapter 25.

You start by selecting a control from the Control menu.

724-001

 

Once you select a control, the application will render the control in the top half of the window.  You can then select the template that you want to see from the Dump menu.  For example, we can choose to see the control template for a Button.

724-002

 

After you select the desired template, the XAML for that template is displayed in the main window.

724-003

 

(Note that you can select text in this window, right-click and select Copy).

Advertisement

Filed under Miscellaneous Tagged with , , ,

#176 – Two Kinds of Templates

January 4, 2011 2 Comments

In WPF, there are two different kinds of templates—control templates and data templates.

Control templates allow you to exactly specify the visual tree of a control, i.e. its constituent controls.  The example below shows a Button control being constructed out of a Button and two Label controls.

        <Button Name="btnWithTemplate" Content="Recreate Me" Foreground="Blue">
            <Button.Template>
                <ControlTemplate TargetType="{x:Type Button}">
                    <StackPanel Orientation="Horizontal">
                        <Label Content="**" Foreground="{TemplateBinding Foreground}"/>
                        <Button Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}"/>
                        <Label Content="**" Foreground="{TemplateBinding Foreground}"/>
                    </StackPanel>
                </ControlTemplate>
            </Button.Template>
        </Button>

 

Data templates allow you to specify how a bound data object will be mapped to one or more controls.  The example below maps properties of a Person object to several labels.

        <Label Name="lblPerson" Content="{Binding}">
            <Label.ContentTemplate>
                <DataTemplate>
                    <Border BorderThickness="2" BorderBrush="DarkBlue">
                        <StackPanel Orientation="Vertical">
                            <StackPanel Orientation="Horizontal">
                                <Label Content="{Binding Path=FirstName}"/>
                                <Label Content="{Binding Path=LastName}" FontWeight="Bold"/>
                            </StackPanel>
                            <Label Content="{Binding Path=BirthYear}" FontStyle="Italic"/>
                        </StackPanel>
                    </Border>
                </DataTemplate>
            </Label.ContentTemplate>
        </Label>

Filed under Basics Tagged with , , ,

#10 – Control Templates

July 22, 2010 1 Comment

Similar to styles in WPF, but different, are templates.  Templates allow you to replace all aspects of a UI control’s appearance without changing its behavior.

Every control in WPF has a default template that completely specifies its appearance.  You can replace the default template with a template that you’ve authored, to change the appearance of the control.

You change a control’s template by changing its Template property.  Here’s an example where we create a new button template that gives the button a thick blue border.

<Window.Resources>
    <ControlTemplate x:Key="Crazy" TargetType="Button">
        <Border BorderBrush="Blue" Background="White" BorderThickness="3">
            <ContentPresenter></ContentPresenter>
        </Border>
    </ControlTemplate>
</Window.Resources>
<Grid Height="auto" Width="503">
    <StackPanel Height="100" HorizontalAlignment="Left" Margin="85,139,0,0" Name="stackPanel1"  >
        <Button Content="Crazy template" Template="{StaticResource Crazy}"  />
        <Button Content="Default template" />
    </StackPanel>
</Grid>

Filed under Basics Tagged with ,