-
[WPF Style] TabControl_BlackMicrosoft .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