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?

Answer 1

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:

1. Find the default style for ElementName (which includes the control template) using MSDN, ShowMeTheTemplate, Expression Blend or theme files
2. 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
3. Change the key from x:Key="{x:Type ElementName}" to x:Key="myStyleName"
4. Modify the control template to add, remove or change elements and properties from the defaults
5. 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>