TabControl — Style i szablony

  • Artykuł

W tym temacie opisano style i szablony kontrolki TabControl . Możesz zmodyfikować wartość domyślną ControlTemplate , aby nadać kontrolce unikatowy wygląd. Aby uzyskać więcej informacji, zobacz Tworzenie szablonu dla kontrolki.

Elementy TabControl

W poniższej tabeli wymieniono nazwane części kontrolki TabControl .

Element Type Opis
PART_SelectedContentHost ContentPresenter Obiekt, który pokazuje zawartość aktualnie wybranego TabItemobiektu .

Podczas tworzenia ControlTemplate elementu dla TabControlelementu szablon może zawierać element ItemsPresenter w obiekcie ScrollViewer. (Obiekt ItemsPresenter wyświetla każdy element w elemencie TabControl; ScrollViewer włącza przewijanie w kontrolce). Jeśli element ItemsPresenter nie jest bezpośrednim elementem podrzędnym ScrollViewerelementu , musisz podać ItemsPresenter nazwę . ItemsPresenter

Stany TabControl

W poniższej tabeli wymieniono stany wizualizacji dla kontrolki TabControl .

Nazwa wizualizacji Nazwa grupy VisualStateGroup opis
Normalne CommonStates Stan domyślny.
Disabled CommonStates Kontrolka jest wyłączona.
Prawidłowe ValidationStates Kontrolka Validation używa klasy , a Validation.HasError dołączona właściwość to false.
Nieprawidłowy fokos ValidationStates Dołączona Validation.HasError właściwość ma true fokus kontrolki.
InvalidUnfocused ValidationStates Dołączona Validation.HasError właściwość ma true kontrolkę nie ma fokusu.

Części tabitem

Kontrolka TabItem nie ma żadnych nazwanych części.

Stany TabItem

W poniższej tabeli wymieniono stany wizualizacji dla kontrolki TabItem .

Nazwa wizualizacji Nazwa grupy VisualStateGroup opis
Normalne CommonStates Stan domyślny.
Mouseover CommonStates Wskaźnik myszy jest umieszczony nad kontrolką.
Disabled CommonStates Kontrolka jest wyłączona.
Ustawiono fokus FocusStates Kontrolka ma fokus.
Unfocused FocusStates Kontrolka nie ma fokusu.
Wybrano SelectionStates Kontrolka jest zaznaczona.
Niezaznaczone SelectionStates Kontrolka nie jest zaznaczona.
Prawidłowe ValidationStates Kontrolka Validation używa klasy , a Validation.HasError dołączona właściwość to false.
Nieprawidłowy fokos ValidationStates Dołączona Validation.HasError właściwość ma true fokus kontrolki.
InvalidUnfocused ValidationStates Dołączona Validation.HasError właściwość ma true kontrolkę nie ma fokusu.

TabControl ControlTemplate — przykład

W poniższym przykładzie pokazano, jak zdefiniować ControlTemplate element dla TabControl kontrolek i TabItem .

<Style  TargetType="{x:Type TabControl}">
  <Setter Property="OverridesDefaultStyle"
          Value="True" />
  <Setter Property="SnapsToDevicePixels"
          Value="True" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type TabControl}">
        <Grid KeyboardNavigation.TabNavigation="Local">
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
          </Grid.RowDefinitions>
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
              <VisualState x:Name="Disabled">
                <Storyboard>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty="(Border.BorderBrush).
                    (SolidColorBrush.Color)">
                    <EasingColorKeyFrame KeyTime="0"
                                         Value="#FFAAAAAA" />
                  </ColorAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <TabPanel x:Name="HeaderPanel"
                    Grid.Row="0"
                    Panel.ZIndex="1"
                    Margin="0,0,4,-1"
                    IsItemsHost="True"
                    KeyboardNavigation.TabIndex="1"
                    Background="Transparent" />
          <Border x:Name="Border"
                  Grid.Row="1"
                  BorderThickness="1"
                  CornerRadius="2"
                  KeyboardNavigation.TabNavigation="Local"
                  KeyboardNavigation.DirectionalNavigation="Contained"
                  KeyboardNavigation.TabIndex="2">
            <Border.Background>
              <LinearGradientBrush EndPoint="0.5,1"
                                   StartPoint="0.5,0">
                <GradientStop Color="{DynamicResource ContentAreaColorLight}"
                              Offset="0" />
                <GradientStop Color="{DynamicResource ContentAreaColorDark}"
                              Offset="1" />
              </LinearGradientBrush>
            </Border.Background>
            <Border.BorderBrush>
              <SolidColorBrush Color="{DynamicResource BorderMediumColor}"/>
            </Border.BorderBrush>
            <ContentPresenter x:Name="PART_SelectedContentHost"
                              Margin="4"
                              ContentSource="SelectedContent" />
          </Border>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<Style TargetType="{x:Type TabItem}">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type TabItem}">
        <Grid x:Name="Root">
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="SelectionStates">
              <VisualState x:Name="Unselected" />
              <VisualState x:Name="Selected">
                <Storyboard>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty="(Panel.Background).
                    (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                    <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource ControlPressedColor}" />
                  </ColorAnimationUsingKeyFrames>
                  <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)"
                                                    Storyboard.TargetName="Border">
                    <EasingThicknessKeyFrame KeyTime="0"
                                             Value="1,1,1,0" />
                  </ThicknessAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="CommonStates">
              <VisualState x:Name="Normal" />
              <VisualState x:Name="MouseOver" />
              <VisualState x:Name="Disabled">
                <Storyboard>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty="(Panel.Background).
                    (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                    <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource DisabledControlDarkColor}" />
                  </ColorAnimationUsingKeyFrames>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty="(Border.BorderBrush).
                    (SolidColorBrush.Color)">
                    <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource DisabledBorderLightColor}"/>
                  </ColorAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <Border x:Name="Border"
                  Margin="0,0,-4,0"
                  BorderThickness="1,1,1,1"
                  CornerRadius="2,12,0,0">
            <Border.BorderBrush>
              <SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
            </Border.BorderBrush>
            <Border.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>

            </Border.Background>
            <ContentPresenter x:Name="ContentSite"
                              VerticalAlignment="Center"
                              HorizontalAlignment="Center"
                              ContentSource="Header"
                              Margin="12,2,12,2"
                              RecognizesAccessKey="True" />
          </Border>
        </Grid>
        <ControlTemplate.Triggers>
          <Trigger Property="IsSelected"
                   Value="True">
            <Setter Property="Panel.ZIndex"
                    Value="100" />
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

W poprzednim przykładzie użyto co najmniej jednego z następujących zasobów.

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

Pełny przykład można znaleźć w temacie Styling with ControlTemplates Sample (Styling with ControlTemplates Sample( Styling with ControlTemplates Sample (Styling with ControlTemplates Sample).

Zobacz też