How to change WPF control template

Question

A followup to this question: How do you hide a WPF DocumentViewer's menu bars?

I'm totally new to WPF and not sure where to start with control template customization. MSDN doesn't seem to help a lot.

All I need is to hide the main DocumentViewer toolbar, but when I try to customize the XAML file, it fails to compile. What are the customization steps?

What do you mean by "main WPF toolbar". Do you mean the toolbar found on a `DocumentViewer`? — user7116, Jun 03 '11 at 22:36
What errors are you getting when it fails to compile? You should be able to customize it just the same way as in the thread you pointed to. — Tim, Jun 03 '11 at 23:21

score 4 · Accepted Answer · answered Jun 04 '11 at 07:23

In WPF a control template is used to "skin" a control with a set of elements that compose the look-and-feel and the behavior of the control. You don't have to know any more than that to start using control templates. The steps to customizing a control template are:

Find the default style for ElementName (which includes the control template) using MSDN, ShowMeTheTemplate, Expression Blend or theme files
Copy the default style into the resources of your application, usually in App.xaml or in an element's resources such as a Window or Grid
Change the key from x:Key="{x:Type ElementName}" to x:Key="myStyleName"
Modify the control template to add, remove or change elements and properties from the defaults
Use that style on instances of ElementName by adding the attribute Style="{StaticResource myStyleName}"

So let's do that. Here's the default style for DocumentViewer from MSDN. We see a big section starting with <ToolBar ...> so we'll delete all of that. Then if you follow the rest of the steps you'll end up with XAML like this:

<Grid>
    <Grid.Resources>
        <Style x:Key="documentViewerNoToolbarStyle"
            TargetType="{x:Type DocumentViewer}">
            <Setter Property="Foreground"
                Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}" />
            <Setter Property="Background"
                Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
            <Setter Property="FocusVisualStyle"
                Value="{x:Null}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type DocumentViewer}">
                        <Border BorderThickness="{TemplateBinding BorderThickness}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            Focusable="False">
                            <Grid KeyboardNavigation.TabNavigation="Local">
                                <Grid.Background>
                                    <SolidColorBrush Color="{DynamicResource ControlLightColor}" />
                                </Grid.Background>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>

                                <ScrollViewer Grid.Row="1"
                                    CanContentScroll="true"
                                    HorizontalScrollBarVisibility="Auto"
                                    x:Name="PART_ContentHost"
                                    IsTabStop="true">
                                    <ScrollViewer.Background>
                                        <LinearGradientBrush EndPoint="0.5,1"
                                            StartPoint="0.5,0">
                                            <GradientStop Color="{DynamicResource ControlLightColor}"
                                                Offset="0" />
                                            <GradientStop Color="{DynamicResource ControlMediumColor}"
                                                Offset="1" />
                                        </LinearGradientBrush>
                                    </ScrollViewer.Background>
                                </ScrollViewer>

                                <ContentControl Grid.Row="2"
                                    x:Name="PART_FindToolBarHost"/>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Grid.Resources>
    <DocumentViewer Style="{StaticResource documentViewerNoToolbarStyle}"/>
</Grid>

How to change WPF control template

1 Answers1