Поделиться через

Стили и шаблоны элемента Frame

  • Статья

В этом разделе описываются стили и шаблоны для элемента управления Frame. Предусмотренный по умолчанию шаблон ControlTemplate можно изменить, чтобы придать элементу управления уникальный внешний вид. Дополнительные сведения см. в разделе Настройка внешнего вида существующего элемента управления путем создания объекта ControlTemplate.

Части Frame

В следующей таблице перечислены именованные части элемента управления Frame.

Часть

Тип

Описание

PART_FrameCP

ContentPresenter

Область содержимого.

Состояния Frame

В следующей таблице перечислены визуальные состояния элемента управления Frame.

Имя VisualState

Имя VisualStateGroup

Описание

Valid

ValidationStates

Элемент управления использует класс Validation, и значение присоединенного свойства Validation.HasError равно false.

InvalidFocused

ValidationStates

Значение присоединенного свойства Validation.HasError равно true, если элемент управления имеет фокус.

InvalidUnfocused

ValidationStates

Значение присоединенного свойства Validation.HasError равно true, если элемент управления не имеет фокус.

Пример шаблона элемента управления ControlTemplate элемента Frame

В следующем примере показано, как определить шаблон ControlTemplate для элемента управления Frame.


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

<Style x:Key="FrameButtonStyle"
       TargetType="{x:Type Button}">
  <Setter Property="OverridesDefaultStyle"
          Value="true" />
  <Setter Property="Command"
          Value="NavigationCommands.BrowseBack" />
  <Setter Property="Focusable"
          Value="false" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type Button}">
        <Grid>
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
              <VisualState x:Name="Normal" />
              <VisualState x:Name="MouseOver">
                <Storyboard>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetName="Ellipse"
                                                Storyboard.TargetProperty="(Shape.Fill).
                      (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                    <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource ControlMouseOverColor}" />
                  </ColorAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Pressed">
                <Storyboard>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetName="Ellipse"
                                                Storyboard.TargetProperty="(Shape.Fill).
                      (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                    <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource ControlPressedColor}" />
                  </ColorAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Disabled">
                <Storyboard>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetName="Ellipse"
                                                Storyboard.TargetProperty="(Shape.Fill).
                      (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                    <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource DisabledControlDarkColor}" />
                  </ColorAnimationUsingKeyFrames>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
                                                Storyboard.TargetProperty="(Shape.Fill).
                      (SolidColorBrush.Color)">
                    <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource DisabledForegroundColor}" />
                  </ColorAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <Ellipse x:Name="Ellipse"
                   StrokeThickness="1"
                   Width="16"
                   Height="16">
            <Ellipse.Stroke>
              <SolidColorBrush Color="{DynamicResource NavButtonFrameColor}" />
            </Ellipse.Stroke>
            <Ellipse.Fill>
              <LinearGradientBrush StartPoint="0,0"
                                   EndPoint="0,1">
                <LinearGradientBrush.GradientStops>
                  <GradientStopCollection>
                    <GradientStop Color="{DynamicResource ControlLightColor}" />
                    <GradientStop Color="{DynamicResource ControlMediumColor}"
                                  Offset="1.0" />
                  </GradientStopCollection>
                </LinearGradientBrush.GradientStops>
              </LinearGradientBrush>
            </Ellipse.Fill>
          </Ellipse>

          <Path x:Name="Arrow"
                Margin="0,0,2,0"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Data="M 4 0 L 0 4 L 4 8 Z" >
            <Path.Fill>
                <SolidColorBrush Color="{DynamicResource GlyphColor}"/>
            </Path.Fill>
          </Path>
        </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>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<!-- Frame Menu Style -->

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

<!-- Frame Menu Header Style -->

<Style x:Key="FrameHeaderMenuItem"
       TargetType="{x:Type MenuItem}">
  <Setter Property="OverridesDefaultStyle"
          Value="true" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type MenuItem}">
        <Grid>
          <Popup x:Name="PART_Popup"
                 Placement="Bottom"
                 VerticalOffset="2"
                 IsOpen="{TemplateBinding IsSubmenuOpen}"
                 AllowsTransparency="True"
                 Focusable="False"
                 PopupAnimation="Fade">
            <Border x:Name="SubMenuBorder"
                    BorderThickness="1"
                    Background="{DynamicResource MenuPopupBrush}">
              <Border.BorderBrush>
                <SolidColorBrush Color="{StaticResource BorderMediumColor}" />
              </Border.BorderBrush>
              <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"
                    x:Name="HighlightBorder"
                    BorderThickness="1"
                    CornerRadius="2">
              <Border.BorderBrush>
                <LinearGradientBrush StartPoint="0,0"
                                     EndPoint="0,1">
                  <LinearGradientBrush.GradientStops>
                    <GradientStopCollection>
                      <GradientStop Color="{DynamicResource BorderLightColor}"
                                    Offset="0.0" />
                      <GradientStop Color="{DynamicResource BorderDarkColor}"
                                    Offset="1.0" />
                    </GradientStopCollection>
                  </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>

              </Border.BorderBrush>
              <Border.Background>
                <LinearGradientBrush StartPoint="0,0"
                                     EndPoint="0,1">
                  <LinearGradientBrush.GradientStops>
                    <GradientStopCollection>
                      <GradientStop Color="{DynamicResource ControlLightColor}" />
                      <GradientStop Color="{DynamicResource ControlMouseOverColor}"
                                    Offset="1.0" />
                    </GradientStopCollection>
                  </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>

              </Border.Background>
            </Border>
            <Path x:Name="Arrow"
                  SnapsToDevicePixels="false"
                  HorizontalAlignment="Right"
                  VerticalAlignment="Center"
                  Margin="0,2,4,0"
                  StrokeLineJoin="Round"
                  Data="M 0 0 L 4 4 L 8 0 Z">
              <Path.Stroke>
                <SolidColorBrush Color="{DynamicResource GlyphColor}" />
              </Path.Stroke>
            </Path>
          </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="BorderBrush">
              <Setter.Value>
                <LinearGradientBrush StartPoint="0,0"
                                     EndPoint="0,1">
                  <GradientBrush.GradientStops>
                    <GradientStopCollection>
                      <GradientStop Color="{DynamicResource BorderDarkColor}"
                                    Offset="0.0" />
                      <GradientStop Color="{DynamicResource BorderMediumColor}"
                                    Offset="1.0" />
                    </GradientStopCollection>
                  </GradientBrush.GradientStops>
                </LinearGradientBrush>
              </Setter.Value>
            </Setter>
            <Setter Property="Background"
                    TargetName="HighlightBorder">
              <Setter.Value>

                <LinearGradientBrush EndPoint="0,1"
                                     StartPoint="0,0">
                  <GradientStop Color="{DynamicResource ControlLightColor}"
                                Offset="0" />
                  <GradientStop Color="{DynamicResource ControlPressedColor}"
                                Offset="0.984" />
                </LinearGradientBrush>
              </Setter.Value>
            </Setter>
          </Trigger>
          <Trigger Property="IsEnabled"
                   Value="false">
            <Setter TargetName="Arrow"
                    Property="Fill">
              <Setter.Value>
                <SolidColorBrush Color="{DynamicResource DisabledForegroundColor}" />
              </Setter.Value>
            </Setter>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<!-- Frame Menu Item Style -->

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

            <ContentPresenter ContentSource="Header"
                              Margin="24,5,50,5" />
          </Grid>
        </Border>
        <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 Property="Background"
                    TargetName="Border">
              <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1"
                                     StartPoint="0.5,0">
                  <GradientStop Color="Transparent"
                                Offset="0" />
                  <GradientStop Color="{DynamicResource ControlMouseOverColor}"
                                Offset="1" />
                </LinearGradientBrush>
              </Setter.Value>
            </Setter>
            <Setter Property="BorderBrush"
                    TargetName="Border">
              <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1"
                                     StartPoint="0.5,0">
                  <GradientStop Color="{DynamicResource BorderMediumColor}"
                                Offset="0" />
                  <GradientStop Color="Transparent"
                                Offset="1" />
                </LinearGradientBrush>
              </Setter.Value>
            </Setter>
          </Trigger>
          <MultiTrigger>
            <MultiTrigger.Conditions>
              <Condition Property="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="Stroke"
                    Value="{x:Null}" />
            <Setter TargetName="Glyph"
                    Property="Fill">
              <Setter.Value>
                <SolidColorBrush Color="{StaticResource GlyphColor}" />
              </Setter.Value>
            </Setter>
          </MultiTrigger>
          <MultiTrigger>
            <MultiTrigger.Conditions>
              <Condition Property="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="Stroke"
                    Value="{x:Null}" />
            <Setter TargetName="Glyph"
                    Property="Fill">
              <Setter.Value>
                <SolidColorBrush Color="{StaticResource GlyphColor}" />
              </Setter.Value>
            </Setter>
          </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="{x:Type Frame}">
  <Setter Property="SnapsToDevicePixels"
          Value="true" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type Frame}">
        <DockPanel>
          <Border DockPanel.Dock="Top"
                  Height="22"
                  BorderThickness="1">
            <Border.BorderBrush>
              <LinearGradientBrush EndPoint="0.5,1"
                                   StartPoint="0.5,0">
                <GradientStop Color="{DynamicResource BorderLightColor}"
                              Offset="0" />
                <GradientStop Color="{DynamicResource BorderDarkColor}"
                              Offset="1" />
              </LinearGradientBrush>
            </Border.BorderBrush>
            <Grid>
              <Grid.Background>

                <LinearGradientBrush StartPoint="0,0"
                                     EndPoint="0,1">
                  <LinearGradientBrush.GradientStops>
                    <GradientStopCollection>
                      <GradientStop Color="{DynamicResource ControlLightColor}"
                                    Offset="0.0" />
                      <GradientStop Color="{DynamicResource ControlMediumColor}"
                                    Offset="1.0" />
                    </GradientStopCollection>
                  </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>

              </Grid.Background>
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="16" />
                <ColumnDefinition Width="*" />
              </Grid.ColumnDefinitions>

              <Menu x: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 (MenuItem.IsSubmenuOpen), 
                  Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
                  <MenuItem.ItemsSource>
                    <MultiBinding Converter="{StaticResource JournalEntryUnifiedViewConverter}">
                      <Binding RelativeSource="{RelativeSource TemplatedParent}"
                               Path="BackStack" />
                      <Binding RelativeSource="{RelativeSource TemplatedParent}"
                               Path="ForwardStack" />
                    </MultiBinding>
                  </MenuItem.ItemsSource>
                </MenuItem>
              </Menu>

              <Path Grid.Column="0"
                    SnapsToDevicePixels="false"
                    IsHitTestVisible="false"
                    Margin="2,1.5,0,1.5"
                    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"
                    Stroke="{x:Null}">
                <Path.Fill>
                  <LinearGradientBrush EndPoint="0.5,1"
                                       StartPoint="0.5,0">
                    <GradientStop Color="{DynamicResource ControlMediumColor}"
                                  Offset="0" />
                    <GradientStop Color="{DynamicResource ControlDarkColor}"
                                  Offset="1" />
                  </LinearGradientBrush>
                </Path.Fill>
              </Path>
              <Button Style="{StaticResource FrameButtonStyle}"
                      Command="NavigationCommands.BrowseBack"
                      Content="M 4 0 L 0 4 L 4 8 Z"
                      Margin="2.7,1.5,1.3,1.5"
                      Grid.Column="0" />
              <Button Style="{StaticResource FrameButtonStyle}"
                      Command="NavigationCommands.BrowseForward"
                      Content="M 4 0 L 0 4 L 4 8 Z"
                      Margin="1.3,1.5,0,1.5"
                      Grid.Column="1" />
            </Grid>
          </Border>
          <Border BorderThickness="1">
            <Border.BorderBrush>
              <SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
            </Border.BorderBrush>
            <ContentPresenter x:Name="PART_FrameCP"
                              Height="458"
                              Width="640" />
          </Border>
        </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>

В предыдущем примере используется один или несколько следующих ресурсов.

<!--Control colors.-->
<Color x:Key="WindowColor">#FFE8EDF9</Color>
<Color x:Key="ContentAreaColorLight">#FFC5CBF9</Color>
<Color x:Key="ContentAreaColorDark">#FF7381F9</Color>

<Color x:Key="DisabledControlLightColor">#FFE8EDF9</Color>
<Color x:Key="DisabledControlDarkColor">#FFC5CBF9</Color>
<Color x:Key="DisabledForegroundColor">#FF888888</Color>

<Color x:Key="SelectedBackgroundColor">#FFC5CBF9</Color>
<Color x:Key="SelectedUnfocusedColor">#FFDDDDDD</Color>

<Color x:Key="ControlLightColor">White</Color>
<Color x:Key="ControlMediumColor">#FF7381F9</Color>
<Color x:Key="ControlDarkColor">#FF211AA9</Color>

<Color x:Key="ControlMouseOverColor">#FF3843C4</Color>
<Color x:Key="ControlPressedColor">#FF211AA9</Color>


<Color x:Key="GlyphColor">#FF444444</Color>
<Color x:Key="GlyphMouseOver">sc#1, 0.004391443, 0.002428215, 0.242281124</Color>

<!--Border colors-->
<Color x:Key="BorderLightColor">#FFCCCCCC</Color>
<Color x:Key="BorderMediumColor">#FF888888</Color>
<Color x:Key="BorderDarkColor">#FF444444</Color>

<Color x:Key="PressedBorderLightColor">#FF888888</Color>
<Color x:Key="PressedBorderDarkColor">#FF444444</Color>

<Color x:Key="DisabledBorderLightColor">#FFAAAAAA</Color>
<Color x:Key="DisabledBorderDarkColor">#FF888888</Color>

<Color x:Key="DefaultBorderBrushDarkColor">Black</Color>

<!--Control-specific resources.-->
<Color x:Key="HeaderTopColor">#FFC5CBF9</Color>
<Color x:Key="DatagridCurrentCellBorderColor">Black</Color>
<Color x:Key="SliderTrackDarkColor">#FFC5CBF9</Color>

<Color x:Key="NavButtonFrameColor">#FF3843C4</Color>

<LinearGradientBrush x:Key="MenuPopupBrush"
                     EndPoint="0.5,1"
                     StartPoint="0.5,0">
  <GradientStop Color="{DynamicResource ControlLightColor}"
                Offset="0" />
  <GradientStop Color="{DynamicResource ControlMediumColor}"
                Offset="0.5" />
  <GradientStop Color="{DynamicResource ControlLightColor}"
                Offset="1" />
</LinearGradientBrush>

<LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill"
                     StartPoint="0,0"
                     EndPoint="1,0">
  <LinearGradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#000000FF"
                    Offset="0" />
      <GradientStop Color="#600000FF"
                    Offset="0.4" />
      <GradientStop Color="#600000FF"
                    Offset="0.6" />
      <GradientStop Color="#000000FF"
                    Offset="1" />
    </GradientStopCollection>
  </LinearGradientBrush.GradientStops>
</LinearGradientBrush>

Полный пример см. на веб-странице Styling with ControlTemplates Sample.

См. также

Ссылки

Style

ControlTemplate

Основные понятия

Стилизация и использование шаблонов

Настройка внешнего вида существующего элемента управления путем создания объекта ControlTemplate

Другие ресурсы

Стили и шаблоны элемента Control

Настройка элементов управления

Журнал изменений

Дата

Журнал

Причина

Август 2010 г.

Добавлен пример ControlTemplate.

Улучшение информации.