TabControl Stilleri ve Şablonları

  • Makale

Bu konuda, denetimin stilleri ve şablonları TabControl açıklanmaktadır. Denetime benzersiz bir görünüm vermek için varsayılanı ControlTemplate değiştirebilirsiniz. Daha fazla bilgi için bkz . Denetim için şablon oluşturma.

TabControl Bölümleri

Aşağıdaki tabloda, denetimin adlandırılmış bölümleri TabControl listelenir.

Bölüm Türü Tanım
PART_SelectedContentHost ContentPresenter Seçili durumdaki TabItemöğesinin içeriğini gösteren nesne.

için TabControlbir ControlTemplate oluşturduğunuzda, şablonunuz içinde bir ItemsPresenterScrollVieweriçerebilir. (içindeki ItemsPresenter her öğeyi TabControlgörüntüler; ScrollViewer denetimin içinde kaydırmayı etkinleştirir). öğesinin ItemsPresenter doğrudan alt öğesi ScrollViewerdeğilse, adını ItemsPresentervermelisinizItemsPresenter.

TabControl Durumları

Aşağıdaki tabloda denetimin görsel durumları listelenmiştir TabControl .

VisualState Adı VisualStateGroup Adı Tanım
Normal Commonstates Varsayılan durum.
Devre Dışı Commonstates Denetim devre dışı bırakıldı.
Geçerli ValidationStates Denetim sınıfını Validation kullanır ve Validation.HasError ekli özelliği ise şeklindedir false.
InvalidFocused ValidationStates Validation.HasError Ekli özelliğin true odağı denetimindedir.
InvalidUnfocused ValidationStates Validation.HasError Ekli özellik, true denetimin odağı yok.

TabItem Bölümleri

Denetimin TabItem adlandırılmış bölümü yok.

TabItem Durumları

Aşağıdaki tabloda denetimin görsel durumları listelenmiştir TabItem .

VisualState Adı VisualStateGroup Adı Tanım
Normal Commonstates Varsayılan durum.
Mouseover Commonstates Fare işaretçisi denetimin üzerine yerleştirilir.
Devre Dışı Commonstates Denetim devre dışı bırakıldı.
Odaklı FocusStates Denetimin odağı vardır.
Odaklanmamış FocusStates Denetimin odağı yok.
Seçili SelectionStates Denetim seçilidir.
Seçili değil SelectionStates Denetim seçili değil.
Geçerli ValidationStates Denetim sınıfını Validation kullanır ve Validation.HasError ekli özelliği ise şeklindedir false.
InvalidFocused ValidationStates Validation.HasError Ekli özelliğin true odağı denetimindedir.
InvalidUnfocused ValidationStates Validation.HasError Ekli özellik, true denetimin odağı yok.

TabControl ControlTemplate Örneği

Aşağıdaki örnekte ve TabItem denetimleri için nasıl tanımlanacağı ControlTemplate gösterilmektedirTabControl.

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

Yukarıdaki örnekte aşağıdaki kaynaklardan biri veya daha fazlası kullanılır.

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

Örneğin tamamı için bkz . ControlTemplates Örneği ile Stil Oluşturma.

Ayrıca bkz.