Share via

Frame ControlTemplate Example

  • Article

Controls in Windows Presentation Foundation (WPF) have a ControlTemplate that contains the visual tree of that control. You can change the structure and appearance of a control by modifying the ControlTemplate of that control. There is no way to replace only part of the visual tree of a control; to change the visual tree of a control you must set the Template property of the control to its new and complete ControlTemplate.

This topic shows the ControlTemplate of the WPF Frame control.

This topic contains the following sections.

  • Prerequisites
  • Frame ControlTemplate Example
  • Related Topics

Prerequisites

To run the examples in this topic, you should understand how to write WPF applications. For more information, see Get Started Using Windows Presentation Foundation. You should also understand how styles are used in WPF. For more information, see Styling and Templating.

Frame ControlTemplate Example

While this example contains all of the elements that are defined in the ControlTemplate of a Frame by default, the specific values should be thought of as examples.

<!-- Back/Forward Button Style -->

<Style x:Key="FrameButtonStyle" TargetType="Button">
  <Setter Property="OverridesDefaultStyle" Value="true"/>
  <Setter Property="Command" Value="NavigationCommands.BrowseBack"/>
  <Setter Property="Focusable" Value="false"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="Button">
        <Grid>
          <Ellipse 
            Name="Ellipse" 
            Fill="{StaticResource NormalBrush}"
            Stroke="{StaticResource NormalBorderBrush}"
            StrokeThickness="1" 
            Width="16"
            Height="16"/>

          <Path 
            x:Name="Arrow"
            Margin="0,0,2,0"
            Fill="{StaticResource GlyphBrush}"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Data="M 4 0 L 0 4 L 4 8 Z"/>
        </Grid>
        <ControlTemplate.Triggers>
          <Trigger Property="Command"
                   Value="{x:Static NavigationCommands.BrowseForward}">
            <Setter TargetName="Arrow" Property="Data"
                    Value="M 0 0 L 4 4 L 0 8 z"/>
            <Setter TargetName="Arrow" Property="Margin" Value="2,0,0,0"/>
          </Trigger>
          <Trigger Property="IsMouseOver" Value="True">
            <Setter TargetName="Ellipse" Property="Fill"
                    Value="{StaticResource DarkBrush}"/>
          </Trigger>
          <Trigger Property="IsPressed" Value="true">
            <Setter TargetName="Ellipse" Property="Fill"
                    Value="{StaticResource PressedBrush}" />
            <Setter TargetName="Ellipse" Property="Stroke"
                    Value="{StaticResource PressedBorderBrush}" />
          </Trigger>
          <Trigger Property="IsEnabled" Value="false">
            <Setter TargetName="Ellipse" Property="Fill"
                    Value="{StaticResource DisabledBackgroundBrush}"/>
            <Setter TargetName="Arrow" Property="Fill"
                    Value="{StaticResource DisabledForegroundBrush}"/>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<!-- Frame Menu Style -->

<Style x:Key="FrameMenu" TargetType="Menu">
  <Setter Property="OverridesDefaultStyle" Value="true"/>
  <Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
  <Setter Property="IsMainMenu" Value="false"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="Menu">
        <DockPanel IsItemsHost="true"/>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<!-- Frame Menu Header Style -->

<Style x:Key="FrameHeaderMenuItem" TargetType="MenuItem">
  <Setter Property="OverridesDefaultStyle" Value="true"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="MenuItem">
        <Grid>
          <Popup x:Name="PART_Popup"
            Placement="Bottom"
            VerticalOffset="2"
            IsOpen="{TemplateBinding IsSubmenuOpen}"
            AllowsTransparency="True" 
            Focusable="False"
            PopupAnimation="Fade">
            <Border Name="SubMenuBorder"
              Background="{StaticResource WindowBackgroundBrush}"
              BorderThickness="1"
              BorderBrush="{StaticResource SolidBorderBrush}">
              <StackPanel IsItemsHost="true"
                Margin="2"
                KeyboardNavigation.TabNavigation="Cycle"
                KeyboardNavigation.DirectionalNavigation="Cycle"/>
            </Border>
          </Popup>

          <Grid x:Name="Panel" 
            Width="24" 
            Background="Transparent"
            HorizontalAlignment="Right" >

            <Border Visibility="Hidden" 
              Name="HighlightBorder" 
              BorderThickness="1" 
              BorderBrush="{StaticResource NormalBorderBrush}" 
              Background="{StaticResource NormalBrush}" 
              CornerRadius="2" />
            <Path x:Name="Arrow"
              SnapsToDevicePixels="false"
              HorizontalAlignment="Right"
              VerticalAlignment="Center"
              Margin="0,2,4,0"
              Fill="{StaticResource GlyphBrush}"
              StrokeLineJoin="Round"
              Data="M 0 0 L 4 4 L 8 0 Z"/>
          </Grid>
        </Grid>
        <ControlTemplate.Triggers>
          <Trigger Property="IsHighlighted" Value="true">
            <Setter TargetName="HighlightBorder"
                    Property="Visibility" Value="Visible"/>
          </Trigger>
          <Trigger Property="IsSubmenuOpen" Value="true">
            <Setter TargetName="HighlightBorder"
                    Property="Background" Value="{StaticResource PressedBrush}" />
            <Setter TargetName="HighlightBorder"
                    Property="BorderBrush" Value="{StaticResource PressedBorderBrush}" />
          </Trigger>
          <Trigger Property="IsEnabled" Value="false">
            <Setter TargetName="Arrow"
                    Property="Fill"  Value="{StaticResource DisabledForegroundBrush}"/>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<!-- Frame Menu Item Style -->

<Style x:Key="FrameSubmenuItem" TargetType="MenuItem">
  <Setter Property="OverridesDefaultStyle" Value="true"/>
  <Setter Property="Header" Value="{Binding Path=(JournalEntry.Name)}"/>
  <Setter Property="Command" Value="NavigationCommands.NavigateJournal"/>
  <Setter Property="CommandTarget"
          Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type Menu}},
                          Path=TemplatedParent}"/>
  <Setter Property="CommandParameter"
          Value="{Binding RelativeSource={RelativeSource Self}}"/>
  <Setter Property="JournalEntryUnifiedViewConverter.JournalEntryPosition"
          Value="{Binding (JournalEntryUnifiedViewConverter.JournalEntryPosition)}"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="MenuItem">
        <Grid Name="Panel"
          Background="Transparent"
          SnapsToDevicePixels="true">
          <Path Name="Glyph"
            SnapsToDevicePixels="false"
            Margin="7,5"
            Width="10"
            Height="10"
            HorizontalAlignment="Left"
            StrokeStartLineCap="Triangle"
            StrokeEndLineCap="Triangle"
            StrokeThickness="2"
            Stroke="{StaticResource GlyphBrush}" />

          <ContentPresenter ContentSource="Header"
            Margin="24,5,50,5"/>
        </Grid>
        <ControlTemplate.Triggers>
          <Trigger Property="JournalEntryUnifiedViewConverter.JournalEntryPosition"
                   Value="Current">
            <Setter TargetName="Glyph"
                    Property="Data" Value="M 0,5 L 2.5,8 L 7,3 "/>
          </Trigger>
          <Trigger Property="IsHighlighted" Value="true">
            <Setter TargetName="Panel" Property="Background"
                    Value="{StaticResource SelectedBackgroundBrush}"/>
          </Trigger>
          <MultiTrigger>
            <MultiTrigger.Conditions>
              <Condition Property="MenuItem.IsHighlighted" Value="true"/>
              <Condition Property="JournalEntryUnifiedViewConverter.JournalEntryPosition"
                         Value="Forward"/>
            </MultiTrigger.Conditions>
            <Setter TargetName="Glyph" Property="Data" Value="M 3 1 L 7 5 L 3 9 z"/>
            <Setter TargetName="Glyph" Property="Fill" Value="{StaticResource GlyphBrush}"/>
            <Setter TargetName="Glyph" Property="Stroke" Value="{x:Null}"/>
          </MultiTrigger>
          <MultiTrigger>
            <MultiTrigger.Conditions>
              <Condition Property="MenuItem.IsHighlighted" Value="true"/>
              <Condition Property="JournalEntryUnifiedViewConverter.JournalEntryPosition"
                         Value="Back"/>
            </MultiTrigger.Conditions>
            <Setter TargetName="Glyph" Property="Data" Value="M 7 1 L 3 5 L 7 9 z"/>
            <Setter TargetName="Glyph" Property="Fill" Value="{StaticResource GlyphBrush}"/>
            <Setter TargetName="Glyph" Property="Stroke" Value="{x:Null}"/>
          </MultiTrigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<!-- Merges Back and Forward Navigation Stacks -->

<JournalEntryUnifiedViewConverter x:Key="JournalEntryUnifiedViewConverter"/>

<!-- SimpleStyles: Frame -->

<Style x:Key="{x:Type Frame}" TargetType="Frame">
  <Setter Property="SnapsToDevicePixels" Value="true"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="Frame">
        <DockPanel>
          <Grid Background="{StaticResource LightBrush}"
            DockPanel.Dock="Top"
            Height="22">
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="Auto"/>
              <ColumnDefinition Width="Auto"/>
              <ColumnDefinition Width="16"/>
              <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <Menu Name="NavMenu"
              Grid.ColumnSpan="3"
              Height="16"
              Margin="1,0,0,0"
              VerticalAlignment="Center" 
              Style="{StaticResource FrameMenu}">
              <MenuItem Style="{StaticResource FrameHeaderMenuItem}"
                ItemContainerStyle="{StaticResource FrameSubmenuItem}"
                IsSubmenuOpen="{Binding Path=(MenuItem.IsSubmenuOpen),Mode=TwoWay,
                                RelativeSource={RelativeSource TemplatedParent}}">
                <MenuItem.ItemsSource>
                  <MultiBinding Converter="{StaticResource JournalEntryUnifiedViewConverter}">
                    <MultiBinding.Bindings>
                      <Binding RelativeSource="{RelativeSource TemplatedParent}" 
                        Path="BackStack" />
                      <Binding RelativeSource="{RelativeSource TemplatedParent}" 
                        Path="ForwardStack" />
                    </MultiBinding.Bindings>
                  </MultiBinding>
                </MenuItem.ItemsSource>
              </MenuItem>
            </Menu>

            <Path Grid.Column="0" 
              SnapsToDevicePixels="false"
              IsHitTestVisible="false"
              Margin="2,0,0,0"
              Grid.ColumnSpan="3"
              StrokeThickness="1" 
              HorizontalAlignment="Left" 
              VerticalAlignment="Center" 
              Data="M15,14 Q18,12.9 20.9,14 A8.3,8.3,0,0,0,35.7,8.7 A8.3,8.3,0,0,0,25.2,0.6 Q18,
                    3.3 10.8,0.6 A8.3,8.3,0,0,0,0.3,8.7 A8.3,8.3,0,0,0,15,14 z"
              Fill="{StaticResource PressedBrush}"
              Stroke="{StaticResource LightBorderBrush}"/>
            <Button Style="{StaticResource FrameButtonStyle}"
              Command="NavigationCommands.BrowseBack"
              Content="M 4 0 L 0 4 L 4 8 Z"
              Margin="2.7,0,1.3,0" 
              Grid.Column="0"/>
            <Button Style="{StaticResource FrameButtonStyle}"
              Command="NavigationCommands.BrowseForward"
              Content="M 4 0 L 0 4 L 4 8 Z"
              Margin="1.3,0,0,0" 
              Grid.Column="1"/>
          </Grid>
          <ContentPresenter x:Name="PART_FrameCP"/>
        </DockPanel>
        <ControlTemplate.Triggers>
          <MultiTrigger>
            <MultiTrigger.Conditions>
              <Condition Property="CanGoForward" Value="false"/>
              <Condition Property="CanGoBack" Value="false"/>
            </MultiTrigger.Conditions>
            <Setter TargetName="NavMenu" Property="IsEnabled" Value="false"/>
          </MultiTrigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

The above example uses one or more of the following resources:

<!-- Fill Brushes -->

<LinearGradientBrush x:Key="NormalBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#FFF" Offset="0.0"/>
      <GradientStop Color="#CCC" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="HorizontalNormalBrush" StartPoint="0,0" EndPoint="1,0">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#FFF" Offset="0.0"/>
      <GradientStop Color="#CCC" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="LightBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#FFF" Offset="0.0"/>
      <GradientStop Color="#EEE" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="HorizontalLightBrush" StartPoint="0,0" EndPoint="1,0">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#FFF" Offset="0.0"/>
      <GradientStop Color="#EEE" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DarkBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#FFF" Offset="0.0"/>
      <GradientStop Color="#AAA" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="PressedBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#BBB" Offset="0.0"/>
      <GradientStop Color="#EEE" Offset="0.1"/>
      <GradientStop Color="#EEE" Offset="0.9"/>
      <GradientStop Color="#FFF" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />

<SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE" />

<SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF" />

<SolidColorBrush x:Key="SelectedBackgroundBrush" Color="#DDD" />

<!-- Border Brushes -->

<LinearGradientBrush x:Key="NormalBorderBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#CCC" Offset="0.0"/>
      <GradientStop Color="#444" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="HorizontalNormalBorderBrush" StartPoint="0,0" EndPoint="1,0">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#CCC" Offset="0.0"/>
      <GradientStop Color="#444" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DefaultedBorderBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#777" Offset="0.0"/>
      <GradientStop Color="#000" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="PressedBorderBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#444" Offset="0.0"/>
      <GradientStop Color="#888" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<SolidColorBrush x:Key="DisabledBorderBrush" Color="#AAA" />

<SolidColorBrush x:Key="SolidBorderBrush" Color="#888" />

<SolidColorBrush x:Key="LightBorderBrush" Color="#AAA" />

<!-- Miscellaneous Brushes -->
<SolidColorBrush x:Key="GlyphBrush" Color="#444" />

<SolidColorBrush x:Key="LightColorBrush" Color="#DDD" />

For the complete sample, see Styling with ControlTemplates Sample.

See Also

Concepts

Guidelines for Designing Stylable Controls

Other Resources

ControlTemplate Examples