Today
-
Yesterday
-
Total
-

ABOUT ME

-

방문자

  • [WPF Style] TabControl_Black
    Microsoft .NET/WPF Style 2019. 8. 20. 15:16

    검은색 계열을 색상으로 깔끔한 스타일 구성

    <Window.Resources>
        <Color x:Key="SkyBlueColor">#3399FF</Color>
        <SolidColorBrush x:Key="SkyBlueBrush"   Color="{StaticResource SkyBlueColor}"/>
        <Color x:Key="LightGrayColor">#C5C5C5</Color>
        <SolidColorBrush x:Key="LightGrayBrush" Color="{StaticResource LightGrayColor}"/>          
        <Color x:Key="GrayColor">#3F3F46</Color>
        <SolidColorBrush x:Key="GrayBrush"      Color="{StaticResource GrayColor}"/>
        <Color x:Key="DarkGrayColor">#2D2D30</Color>
        <SolidColorBrush x:Key="darkGray0Brush" Color="{StaticResource DarkGrayColor}"/>
        <Color x:Key="BlackColor">#252526</Color>
        <SolidColorBrush x:Key="BlackBrush"     Color="{StaticResource BlackColor}"/>
    
        <!--TabControl-->
        <Style x:Key="blkTab" TargetType="{x:Type TabControl}" >
            <Setter Property="TabStripPlacement"        Value="Bottom"/>
            <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="0"
                                CornerRadius="0"
                                KeyboardNavigation.TabNavigation="Local"
                                KeyboardNavigation.DirectionalNavigation="Contained"
                                KeyboardNavigation.TabIndex="2">
                                <Border.Background>
                                    <LinearGradientBrush 
                                        EndPoint="0.5,1"
                                        StartPoint="0.5,0">
                                        <GradientStop Color="{StaticResource DarkGrayColor}" Offset="0" />
                                        <GradientStop Color="{StaticResource DarkGrayColor}" Offset="1" />
                                    </LinearGradientBrush>
                                </Border.Background>
                                <Border.BorderBrush>
                                    <SolidColorBrush Color="{StaticResource SkyBlueColor}"/>
                                </Border.BorderBrush>
                                <ContentPresenter x:Name="PART_SelectedContentHost"
                                    Margin="4"
                                    ContentSource="SelectedContent" />
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    
        <!--TabItem-->
        <Style x:Key="blkTabItem" TargetType="{x:Type TabItem}">
            <Setter Property="Foreground" Value="White"/>
            <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 DarkGrayColor}" />
                                            </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="Red" />
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
                                                <EasingColorKeyFrame KeyTime="0"
                                            Value="Red"/>
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <!--모양조정-->
                            <Border x:Name="Border"
                                Margin="0,0,-4,0"
                                BorderThickness="1,1,1,1"
                                CornerRadius="5,5,0,0">
                                <Border.BorderBrush>
                                    <SolidColorBrush Color="{StaticResource DarkGrayColor}" />
                                </Border.BorderBrush>
                                <Border.Background>
                                    <LinearGradientBrush 
                                        StartPoint="0,0"
                                    EndPoint="0,1">
                                        <LinearGradientBrush.GradientStops>
                                            <GradientStopCollection>
                                                <GradientStop 
                                                    Color="{StaticResource GrayColor}"
                                                    Offset="0.0" />
                                                <GradientStop 
                                                    Color="{StaticResource GrayColor}"
                                                    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>
    </Window.Resources>
    <TabControl Style="{StaticResource blkTab}">
        <TabItem Style="{StaticResource blkTabItem}" 
            Header="asd"/>
        <TabItem Style="{StaticResource blkTabItem}" 
            Header="123123123"/>
    </TabControl>

    'Microsoft .NET > WPF Style' 카테고리의 다른 글

    [WPF Style] CheckBox_Slider  (0) 2019.08.20
Posted by virtualgiraffe.