Udostępnij za pośrednictwem

Style i szablony TabControl

  • Artykuł

W tym temacie opisano style i szablony kontrolki TabControl. Możesz zmodyfikować domyślne 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.

Część Typ Opis
PART_SelectedContentHost ContentPresenter Obiekt, który pokazuje zawartość aktualnie wybranego obiektu TabItem.

Tworząc ControlTemplate dla TabControl, szablon może zawierać ItemsPresenter w ScrollViewer. (ItemsPresenter wyświetla każdy element w TabControl; ScrollViewer włącza przewijanie w kontrolce). Jeśli ItemsPresenter nie jest bezpośrednim elementem podrzędnym ScrollViewer, musisz nadać ItemsPresenter nazwę ItemsPresenter.

Stany TabControl

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

Nazwa stanu wizualnego Nazwa grupy VisualStateGroup Opis
Normalny CommonStates Stan domyślny.
Niepełnosprawny CommonStates Kontrolka jest wyłączona.
Ważny StanyWalidacji Kontroler używa klasy Validation, a właściwość załączona Validation.HasError jest false.
Nieprawidłowe skupienie Stany Walidacji Właściwość dołączona Validation.HasError jest true ma fokus kontrolki.
NieprawidłoweBezSkupienia StanyWalidacji Właściwość dołączona Validation.HasError jest taka, że kontrolka true 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 VisualState Nazwa grupy VisualStateGroup Opis
Normalny WspólneStany Stan domyślny.
Najechanie kursorem CommonStates Wskaźnik myszy jest umieszczony nad kontrolką.
Niepełnosprawny WspólneStany Kontrolka jest wyłączona.
Skoncentrowany FocusStates Kontrolka ma fokus.
Nieskupiony FocusStates Kontrolka nie ma fokusu.
Wybrany SelectionStates Kontrolka jest zaznaczona.
Niezaznaczone SelectionStates Kontrolka nie jest zaznaczona.
Ważny StanyWalidacji Kontrolka używa klasy Validation, a właściwość dołączona Validation.HasError jest false.
Nieprawidłowy fokos StanyWalidacji Właściwość dołączona Validation.HasError jest true ma fokus kontrolki.
NieważneNieaktywne StanyWalidacji Właściwość dołączona Validation.HasError jest true ma kontrolkę, która nie ma fokusu.

TabControl ControlTemplate — przykład

W poniższym przykładzie pokazano, jak zdefiniować ControlTemplate dla kontrolek TabControl 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>

Aby zapoznać się z kompletnym przykładem, zobacz Styling with ControlTemplates Sample (Przykład ControlTemplates).

Zobacz też