Frame ControlTemplate 範例

發行項
08/21/2008

更新：2007 年 11 月

Windows Presentation Foundation (WPF) 中的控制項具有 ControlTemplate，其中包含該控制項的視覺化樹狀結構。您可以透過修改控制項的 ControlTemplate，變更該控制項的結構和外觀。您無法只取代控制項的視覺化樹狀結構的某一部分；若要變更控制項的視覺化樹狀結構，您必須將控制項的 Template 屬性設定為完整的新 ControlTemplate。

本主題將說明 WPFFrame 控制項的 ControlTemplate。

這個主題包含下列章節。

必要條件
Frame ControlTemplate 範例
相關主題

必要條件

若要執行本主題中的範例，您應該瞭解如何撰寫 WPF 應用程式。如需詳細資訊，請參閱 Windows Presentation Foundation 使用者入門。您也應該瞭解樣式在 WPF 中的使用方式。如需詳細資訊，請參閱設定樣式和範本。

Frame ControlTemplate 範例

雖然這個範例包含 Frame 之 ControlTemplate 中預設定義的所有項目，但是您應該將特定值視為範例。

<!-- 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>

前述範例使用了下列一或多項資源。

<!-- 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" />

如需完整範例，請參閱使用 ControlTemplates 設定樣式範例。

請參閱

概念

設計可設定樣式控制項的方針

其他資源

ControlTemplate 範例

共用方式為

Frame ControlTemplate 範例

必要條件

Frame ControlTemplate 範例

請參閱

概念

其他資源

其他資源