Posted by: Zeeshan Amjad | August 31, 2011

PART Control Template


I came across an interesting problem in WPF rather than adding something in the presentation, I had to remove something from the presentation. The task seems quite simple that is remove the animation from the progress bar. I know I have to define the control template for this, but where to go from there? I guess that I have to define rectangle or border, used its fill property (or background property in case of border) to the template binding. Here is my first guess.

Code Snippet
<ProgressBar.Template>
    <ControlTemplate>
            <Border Background="{TemplateBinding Foreground}"/>
    </ControlTemplate>
</ProgressBar.Template>

 

But it is not working. I see one border filled with green color. Now my problem is how can I defined the width of this. The situation is same even if I used the rectangle.

Code Snippet
<ProgressBar.Template>
    <ControlTemplate>
            <Rectangle Fill="{TemplateBinding Foreground}"/>
    </ControlTemplate>
</ProgressBar.Template>

 

Now here comes the magic. Microsoft already does this calculation for us, if we just used some predefined named in our control template. In this way we are define parts of our template and named of all predefined part of control template starts with PART_ prefix. Progress bar has three predefined template named PART_Indicator, PART_Track and PART_GlowRect. We are not interested in animation, therefore we are not going to use or define PART_GlowRect template part. PART_Track and PART_Indicator does all the magic and calculate the actual width (in case of horizontal progress bar) or height (in case of vertical progress bar) for us.

Here is updated version of our control template.

Code Snippet
<ProgressBar.Template>
    <ControlTemplate>
        <Grid Background="{TemplateBinding Background}">
            <Border Name="PART_Track"/>
            <Border Name="PART_Indicator"
                    HorizontalAlignment="Left"
                    Background="{TemplateBinding Foreground}"/>
        </Grid>
    </ControlTemplate>
</ProgressBar.Template>

 

We can do the same thing even with Rectangle.

Code Snippet
<ProgressBar.Template>
    <ControlTemplate>
        <Grid Background="{TemplateBinding Background}">
            <Rectangle Name="PART_Track"/>
            <Rectangle Name="PART_Indicator"
                    HorizontalAlignment="Left"
                    Fill="{TemplateBinding Foreground}"/>
        </Grid>
    </ControlTemplate>
</ProgressBar.Template>

 

Here is complete XAML of the program.

Code Snippet
<Window x:Class="ProgressBar.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
        Title="ProgressBar" Height="300" Width="400">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Slider Grid.Row="0" Margin="5" Minimum="0" Maximum="100" Name="slider"/>
        <ProgressBar Grid.Row="1" Margin="5" Minimum="0" Maximum="100" Orientation="Horizontal"
                   Value="{Binding ElementName=slider, Path=Value}">
            <ProgressBar.Template>
                <ControlTemplate>
                    <Grid Background="{TemplateBinding Background}">
                        <Rectangle Name="PART_Track"/>
                        <Rectangle Name="PART_Indicator"
                                HorizontalAlignment="Left"
                                Fill="{TemplateBinding Foreground}"/>
                    </Grid>
                </ControlTemplate>
            </ProgressBar.Template>
        </ProgressBar>
        <TextBlock Grid.Row="2" Margin="5" Text="{Binding ElementName=slider, Path=Value}"/>
    </Grid>
</Window>

 

Here is the output of the program.

ProgressBarControlTemplate

Advertisements

Responses

  1. […] Control Template and TemplatePartAttribute We already saw one example of PART Template here. But how do we know if any control has a part template or not? The answer is TemplatePartAttribute. […]

  2. […] they start with PART_. We already saw one example of PART_ control template of progress bar here. ComboBox uses two predefined control templates named PART_Popup and PART_EditableTextBox. Here we […]

  3. […] already saw an example of using PART_ template here and here. Now the question is if we want to use PART_ in our control then how can we do […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: