次の方法で共有

Frame ControlTemplate の例

  • [アーティクル]

更新 : 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>

前の例では、次の 1 つ以上のリソースを使用しています。

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

サンプル全体については、「ControlTemplate を使用したスタイル設定のサンプル」を参照してください。

参照

概念

スタイルの設定が可能なコントロールを設計するためのガイドライン

その他の技術情報

ControlTemplate の例