프로그램 개발/WPF: Style&Template

TabControl

(ㅇㅅㅎ) 2022. 6. 20. 15:43
728x90
반응형

 

 안녕하세요, 이번 글에서는 Microsoft에서 제공하는 WPF [TabControl의 스타일 및 템플릿] 예제를 톺아보겠습니다. TabControl Style의 경우 TabControl과 TabItem 순서로 나눠져 있습니다. 이번 글에서는 순서대로 보도록 하겠습니다.

 

 

 

TabControl

 화면에서 같은 공간을 공유하는 여러 항목이 포함된 Control을 나타냅니다. 예제의 XAML 코드를 TabControl에 적용하면 위와 같은 결과가 나옵니다. 이러한 결과에 도달하도록 코드 순서로 속성을 살펴보면 다음과 같습니다.

 

 

TabControl 속성

<Style TargetType="{x:Type TabControl}">
    <Setter Property="OverridesDefaultStyle" Value="True" />
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            ...
        </Setter.Value>
    </Setter>
</Style>

TargetType

 이 Style을 적용할 형식을 설정합니다.

 

 

OverridesDefaultStyle

 테마 스타일의 스타일 속성을 포함할지 여부를 설정합니다. 테마 스타일 속성을 사용하지 않으면 true이고 사용하면 false입니다.

 

 

SnapsToDevicePixels

 렌더링 하는 동안 TabControl의 렌더링에 디바이스 관련 픽셀 스냅(Pixel Snap)을 사용할지 여부를 설정합니다. 픽셀 스냅을 사용하면 값을 true로 설정하고 그렇지 않으면 false로 설정합니다.

⭐ 픽셀 스냅(Pixel Snap)을 사용하는 이유

더보기

 WPF는 시스템 DPI 설정에 맞게 자동으로 크기를 조정하게 됩니다. 조정할 때 가장자리가 흐려지거나 반투명하게 표시되는 문제가 발생하는데, 이 문제를 해결하기 위해서 픽셀 스냅 기능을 사용하여 객체의 가장자리를 픽셀에 맞추어 고정시키는 기능을 제공합니다. 픽셀 스냅을 사용하면 객체에 작은 단위의 offset을 적용하여 객체의 크기를 픽셀에 맞추거나 일부분을 렌더링 시점에서 제거하여 해결하는 방법입니다.

 

 

Template

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type TabControl}">
            <Grid ... >
                ...
                <VisualStateManager.VisualStateGroups>
                    ...
                </VisualStateManager.VisualStateGroups>

                <TabPanel x:Name="HeaderPanel" ... />
                <Border x:Name="Border" ... >
                    ...
                    <ContentPresenter x:Name="PART_SelectedContentHost" ... />
                </Border>
            </Grid>
        </ControlTemplate>
    </Setter.Value>
</Setter>

 TabControl의 템플릿을 설정합니다. 예제에서 사용되는 Template는 TabControl의 외형을 지정해줄 수 있는 ControlTemplate입니다.

👀 Template에 대해서 좀 더 아시고 싶으신 분은 이 페이지를 참고하시길 바랍니다.

 

 

TabControl Template 구성

 TabControl은 TabPanel과 ContentPresenter이 Grid에 Row로 나누어져 구성되어있습니다.

Grid

 열 및 행으로 구성되는 유연한 모눈 영역을 정의합니다.

⭐ Grid 속성

더보기 
<Grid KeyboardNavigation.TabNavigation="Local">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    ...
</Grid>

 

KeyboardNavigation.TabNavigation

 자식 요소에 대한 논리적 탭 탐색 동작을 설정합니다. 값으로는 Contained, Continue, Cycle, Local, None과 Once가 있습니다.

👀 값에 대한 자세한 설명은 이 페이지를 참고하시면 됩니다.

 

RowDefinitions

 Grid에 RowDefinition을 사용하여 RowDefinitionCollection(RowDefinition 개체의 순서가 지정된 컬렉션)을 설정합니다.

 

RowDefinition

 Grid에 적용되는 행 별 속성을 정의합니다. Height로 높이를 숫자 값, 'Auto', 또는 '*'로 설정할 수 있습니다.

 

TabPanel

 TabItem에서 TabControl의 레이아웃을 처리합니다.

⭐ TabPanel 속성

더보기 
<TabPanel x:Name="HeaderPanel" Grid.Row="0" Panel.ZIndex="1" Margin="0,0,4,-1" IsItemsHost="True" KeyboardNavigation.TabIndex="1" Background="Transparent" />

 

x:Name

 TabPanel에 이름을 설정합니다. 이름을 설정하는 것과 동시에 다른 곳에서 사용할 수 있도록 만들어줍니다.

 

Grid.Row

 TabPanel을 표시할 Grid의 행 값을 설정합니다.

 

Panel.ZIndex

 TabPanel이 표시되는 z 평면의 순서를 나타내는 값을 설정합니다. 값이 클수록 앞에 배치됩니다.

 

Margin

 TabPanel의 외부 여백을 설정합니다. 예제에서는 값을 4개(좌, 상, 우, 하)로 나누어서 설정했습니다.

 

IsItemsHost

 ItemsControl에 의해 생성된 UI(사용자 인터페이스) 항목에 대한 Container임을 나타내는 Panel 값을 설정합니다. 항목 호스트이면 true이고 그렇지 않으면 false입니다.

 

KeyboardNavigation.TabIndex

 TabPanel의 Tab Index를 설정합니다.

 

Background

 TabPanel의 배경색을 설정합니다. 

 

Border

 다른 요소의 주위에 윤곽선, 배경 또는 둘 다를 그립니다.

⭐ Border 속성

더보기 
<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>
  ...
</Border>

 

x:Name

 Border에 이름을 설정합니다. 이름을 설정하는 것과 동시에 다른 곳에서 사용할 수 있도록 만들어줍니다.

 

Grid.Row

 Border을 표시할 Grid의 행 값을 설정합니다.

 

BorderThickness

 Border의 윤곽선 두께를 설정합니다.

 

CornerRadius

 Border의 모서리 둥근 정도를 설정합니다.

 

KeyboardNavigation.TabNavigation

 Border 자식에 대한 논리적 탭 탐색 동작을 설정합니다. 값으로는 Contained, Continue, Cycle, Local, None, Once가 있습니다.

 

KeyboardNavigation.DirectionalNavigation

 Border 자식에 대한 방향 탐색 동작을 설정합니다. 값으로는 Contained, Continue, Cycle, Local, None, Once가 있습니다.

👀 값에 대한 자세한 설명은 이 페이지를 참고하시면 됩니다.

 

KeyboardNavigation.TabIndex

 Border의 Tab Index를 설정합니다.

 

Background

 Border의 배경색을 설정합니다. 예제에서는 LinearGradientBrush를 사용하여 그라데이션 색으로 설정했습니다.

👀 그라데이션 색에 대해서 알고 싶으신 분은 이 페이지를 참고하시길 바랍니다.

 

BorderBrush

 Border의 윤곽선 색을 설정합니다. 예제에서는 SolidColorBrush를 사용하여 미리 정의된 색인 BorderMediumColor로 설정했습니다.

 

ContentPresenter

 ContentControl의 내용을 표시합니다.

⭐ ContentPresenter 속성

더보기 
<ContentPresenter x:Name="PART_SelectedContentHost" Margin="4" ContentSource="SelectedContent" />

 

x:Name

 ContentPresenter에 이름을 설정합니다. 이름을 설정하는 것과 동시에 다른 곳에서 사용할 수 있도록 만들어줍니다. 예제에서는 TabControl의 명명된 부분인 PART_SelectedContentHost로 설정했습니다.

🌟 PART_SelectedContentHost : 현재 선택된 TabItem의 Content를 표시하는 개체입니다.

 

Margin

 ContentPresenter의 외부 여백을 설정합니다.

 

ContentSource

 별칭을 자동으로 지정할 때 사용할 기본 이름을 설정합니다. 

 

 

TabControl 이벤트

 예제에서는 이벤트로 Disabled 변화를 VisualStateManager로 표현하였습니다.

 

VisualStateManager

<VisualStateManager.VisualStateGroups>
  <VisualStateGroup x:Name="CommonStates">
    ...
  </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

 VisualState는 Control의 시각적 상태를 나타냅니다. 예제의 이벤트에서 시각적 변화를 주기 위해서 VisualStateGroup의 x:Name을 CommonStates로 설정했습니다.

⭐ CommonStates

더보기 
<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>

Disabled

 Storyboard의 내용을 풀어보면 ["Border"의 BorderBrush를 변경하는 것]입니다.

 

ColorAnimationUsingKeyFrames

 KeyFrames 집합을 따라 Color 속성 값에 EasingColorKeyFrame의 애니메이션 효과를 줍니다.

 

 

 

 

 

 

TabItem

 TabItem은 TabControl 내의 선택 가능한 항목을 나타냅니다. 예제의 XAML 코드를 TabItem에 적용하면 위와 같은 결과가 나옵니다. 이러한 결과에 도달하도록 코드 순서로 속성을 살펴보면 다음과 같습니다.

 

 

TabItem 속성

<Style TargetType="{x:Type TabItem}">
  <Setter Property="Template">
    <Setter.Value>
      ...
    </Setter.Value>
  </Setter>
</Style>

TargetType

 이 Style을 적용할 형식을 설정합니다.

 

 

Template

<Setter Property="Template">
  <Setter.Value>
    <ControlTemplate TargetType="{x:Type TabItem}">
      <Grid x:Name="Root">
        <VisualStateManager.VisualStateGroups> ... </VisualStateManager.VisualStateGroups>
        
        <Border x:Name="Border" ... >
          ...
          <ContentPresenter x:Name="ContentSite" ... />
        </Border>
      </Grid>
      
      <ControlTemplate.Triggers> ... </ControlTemplate.Triggers>
    </ControlTemplate>
  </Setter.Value>
</Setter>

 TabItem의 템플릿을 설정합니다. 예제에서 사용되는 Template는 TabItem의 외형을 지정해줄 수 있는 ControlTemplate입니다.

👀 Template에 대해서 좀 더 아시고 싶으신 분은 이 페이지를 참고하시길 바랍니다.

 

 

 

TabItem Template 구성

 TabItem은 Grid, Border와 ContentPresenter로 구성되어 있습니다.

Grid

 열 및 행으로 구성되는 유연한 모눈 영역을 정의합니다.

⭐ Grid 속성

더보기 
<Grid x:Name="Root">
  ...
</Grid>

 

x:Name

 Grid의 이름을 설정합니다. 이름을 설정하는 것과 동시에 다른 곳에서 사용할 수 있도록 만들어줍니다.

 

Border

 다른 요소의 주위에 윤곽선, 배경 또는 둘 다를 그립니다.

⭐ Border 속성

더보기 
<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>
    ...
</Border>

 

x:Name

 Border에 이름을 설정합니다. 이름을 설정하는 것과 동시에 다른 곳에서 사용할 수 있도록 만들어줍니다.

 

Margin

 Border의 외부 여백을 설정합니다. 예제에서는 4개(좌, 상, 우, 하)의 값으로 나누어서 설정했습니다.

 

BorderThickness

 Border의 윤곽선 두께를 설정합니다. 예제에서는 4개(좌, 상, 우, 하)의 값으로 나누어서 설정했습니다.

 

CornerRadius

 Border의 모서리 둥근 정도를 설정합니다. 예제에서는 4개(좌, 상, 우, 하)의 값으로 나누어서 설정했습니다.

 

BorderBrush

 Border의 윤곽선 색을 설정합니다. 예제에서는 SolidColorBrush를 사용하여 미리 정의한 색인 BorderMediumColor로 설정했습니다.

 

Background

 Border의 배경색을 설정합니다. 예제에서는 LinearGradientBrush를 사용하여 그라데이션 색으로 설정했습니다.

👀 그라데이션 색에 대해서 알고 싶으신 분은 이 페이지를 참고하시길 바랍니다.

 

ContentPresenter

 ContentControl의 내용을 표시합니다.

⭐ ContentPresenter 속성

더보기 
<ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" Margin="12,2,12,2" RecognizesAccessKey="True" />

 

x:Name

 ContentPresenter에 이름을 설정합니다. 이름을 설정하는 것과 동시에 다른 곳에서 사용할 수 있도록 만들어줍니다.

 

VerticalAlignment

 ContentPresenter의 세로 정렬 위치를 설정합니다. 기본값은 Stretch이며, 다른 값으로는 Top, Center, Bottom이 있습니다.

 

HorizontalAlignment

 ContentPresenter의 가로 정렬 위치를 설정합니다. 기본값은 Stretch이며, 다른 값으로는 Left, Center, Right가 있습니다.

 

ContentSource

 별칭을 자동으로 지정할 때 사용할 기본 이름을 설정합니다.

 

Margin

 ContentPresenter의 외부 여백을 설정합니다. 값을 4개(좌, 상, 우, 하)로 나누어서 설정했습니다.

 

RecognizesAccessKey

 ContentPresenter의 Style에 AccessText가 사용되는지 여부를 설정합니다 AccessText가 사용되면 true이고, 그렇지 않으면 false입니다.

 

 

TabItem 이벤트

 예제에서는 이벤트로 Selected와 Disabled 변화를 VisualStateManager로 표현하고 IsSelected 변화를 Triggers로 표현하였습니다.

 

VisualStateManager

<VisualStateManager.VisualStateGroups>
  <VisualStateGroup x:Name="SelectionStates">
      ...
  </VisualStateGroup>
  <VisualStateGroup x:Name="CommonStates">
      ...
  </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

 VisualState는 Control의 시각적 상태를 나타냅니다. 예제의 이벤트에서 시각적 변화를 주기 위해서 VisualStateGroup의 x:Name을 SelectionStates와 CommonStates로 설정했습니다.

⭐ SelectionStates

더보기 
<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>

 

Selected

 Storyboard의 내용을 풀어보면 ["Border"의 Background와 BorderThickness 값을 변경하는 것]입니다.

 

ColorAnimationUsingKeyFrames

 KeyFrames 집합을 따라 Color 속성 값에 EasingColorKeyFrame의 애니메이션 효과를 줍니다.

 

ThicknessAnimationUsingKeyFrames

 KeyFrames 집합을 따라 Thickness 속성 값에 EasingThicknessKeyFrame의 애니메이션 효과를 줍니다.

 

⭐ CommonStates

더보기 
<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>

 

Disabled 

 Storyboard의 내용을 풀어보면 ["Border의 Background GradientStops 묶음의 색 중 1번(0번부터 시작)과 BorderBrush 값을 변경하는 것]입니다.

 

ColorAnimationUsingKeyFrames

 KeyFrames 집합을 따라 Color 속성 값에 EasingColorKeyFrame의 애니메이션 효과를 줍니다.

 

 

 

Triggers

<ControlTemplate.Triggers>
    <Trigger Property="IsSelected" Value="True">
        <Setter Property="Panel.ZIndex" Value="100" />
    </Trigger>
</ControlTemplate.Triggers>

 Trigger는 어떤 조건이나 이벤트 등이 주어졌을 때 Control의 상태 또는 이벤트 핸들러 등을 호출하는 기능을 의미합니다. 예제에서는 IsSelected의 값이 True일 경우 Panel.ZIndex의 값을 변경하는 것입니다.

 

 

 

 

 

 

전체 코드

더보기 
<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>
<!--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>

 

 

 

 

 

 

 이 글의 내용은 아래의 사이트에서 기초합니다.

https://docs.microsoft.com/ko-kr/dotnet/desktop/wpf/controls/tabcontrol-styles-and-templates?view=netframeworkdesktop-4.8 

 

TabControl 스타일 및 템플릿 - WPF .NET Framework

TabControl 스타일 및 템플릿 아티클 05/08/2022 읽는 데 5분 걸림 기여자 1명 이 문서의 내용 --> 이 항목에서는 TabControl 컨트롤에 대한 스타일 및 템플릿을 설명합니다. 기본값을 수정할 수 있습니다 Co

docs.microsoft.com

 

반응형

'프로그램 개발 > WPF: Style&Template' 카테고리의 다른 글

Thumb  (0) 2022.06.21
TextBox  (0) 2022.06.21
StatusBar  (0) 2022.06.19
Slider  (0) 2022.06.18
ScrollViewer  (0) 2022.06.17

'프로그램 개발/WPF: Style&Template'의 다른글

  • 현재글TabControl

관련글

댓글

티스토리툴바