WPF 탭 컨트롤의 기본 색을 사용하는 WPF 응용 프로그램에 TabControl이 있습니다. 즉, 활성 탭은 흰색이고 비활성화 탭은 은색입니다. TabControl 개체의 Background 속성을 설정하여 모든 탭 페이지의 Background 색을 베이지 색으로 변경했지만 탭 색은 변경하지 않고 클라이언트 영역 만 변경합니다. 그래서, 나는 베이지 색 클라이언트 영역과 흰 탭이있는 활성 탭으로 끝났습니다.WPF 탭 컨트롤 : 설정 탭 색상?
전체 페이지가 베이지가되도록 클라이언트 영역과 일치하도록 Color 탭을 설정하고 싶습니다. 내가 어떻게 그럴 수 있니? 감사.
다음은 내 프로젝트 중 하나의 탭 항목 스타일의 예입니다. 관련성이없는 코드를 사용해 드려 죄송합니다. 필요한 코드를 추출 할 것입니다.
<Style x:Uid="Style_21" TargetType="{x:Type TabItem}">
<Setter x:Uid="Setter_75" Property="Template">
<Setter.Value>
<ControlTemplate x:Uid="ControlTemplate_7" TargetType="{x:Type TabItem}">
<Grid x:Uid="Grid_13">
<Border
x:Uid="Border" Name="Border"
Background="#F0F0F0"
BorderBrush="LightGray"
BorderThickness="1,1,1,0"
CornerRadius="4,4,0,0"
Margin="0,0,2,0" SnapsToDevicePixels="True" >
<TextBlock x:Uid="TextBlock" FontSize="15"
HorizontalAlignment="Center"
Name="TextBlock"
Foreground="DarkGray">
<ContentPresenter x:Uid="ContentSite" x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="12,2,12,2"/>
</TextBlock>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger x:Uid="Trigger_14" Property="IsSelected" Value="True">
<Setter x:Uid="Setter_76" TargetName="Border" Property="Background" Value="White" />
<Setter x:Uid="Setter_77" TargetName="Border" Property="BorderBrush" Value="Gray" />
<Setter x:Uid="Setter_78" TargetName="TextBlock" Property="Foreground" Value="Black" />
<Setter x:Uid="Setter_79" TargetName="Border" Property="Margin" Value="0,0,2,-1" />
</Trigger>
<Trigger x:Uid="Trigger_15" Property="IsMouseOver" Value="True" SourceName="Border" >
<Setter x:Uid="Setter_80" TargetName="Border" Property="Background" Value="White" />
<Setter x:Uid="Setter_81" TargetName="Border" Property="BorderBrush" Value="DarkGray" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
희망이 있습니다.
그래, 내가 컨트롤 템플릿에 들어가야 할 것 같았 어. 나는 더 간단한 것을 놓쳤다는 것을 희망했다. 마크 업은 훌륭한 가이드입니다! 도와 주셔서 감사합니다. –
나는 해결책을 찾아 냈다. 나는 levanovd의 대답을 그의 도움에 대한 감사의 말로 올바른 것으로 선택하겠습니다.
기본적으로 픽스는 TabItem 제어 템플릿의 한 줄로 변경되었습니다. 일반 TabItem 컨트롤 템플릿의 복사본으로 시작하여 TabItem 유형의 모든 컨트롤을 대상으로 컨트롤 템플릿을 설정합니다. IsSelected 트리거를 찾아 다음으로 변경 :
<Setter Property="Background" TargetName="Bd" Value="{Binding Path=Background, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabControl}}}"/>
Bd가 TabItem의 탭 영역의 테두리 및 배경을 설정 Border 컨트롤입니다. 이 마크 업은 WPF에게 BdBackground 속성을 상대 소스에 바인딩하도록 지시합니다. 이 경우 상대 소스는 TabItem을 호스트하는 TabControl의 Background 속성입니다. 결과적으로 TabControl의 Background 속성을 설정하면 TabControl에 호스트 된 모든 TabItem 컨트롤의 탭 영역으로 색상이 흐르게됩니다.
는 여기에 내가 혼합 3에서 만든 데모의 전체 마크 업입니다 :
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="WpfApplication1.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Window.Resources>
<Style x:Key="TabItemFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1" Margin="3,3,3,1" SnapsToDevicePixels="true"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<SolidColorBrush x:Key="TabControlNormalBorderBrush" Color="#8C8E94"/>
<LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#F3F3F3" Offset="0"/>
<GradientStop Color="#EBEBEB" Offset="0.5"/>
<GradientStop Color="#DDDDDD" Offset="0.5"/>
<GradientStop Color="#CDCDCD" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="TabItemHotBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#EAF6FD" Offset="0.15"/>
<GradientStop Color="#D9F0FC" Offset=".5"/>
<GradientStop Color="#BEE6FD" Offset=".5"/>
<GradientStop Color="#A7D9F5" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="TabItemSelectedBackground" Color="#F9F9F9"/>
<SolidColorBrush x:Key="TabItemHotBorderBrush" Color="#3C7FB1"/>
<SolidColorBrush x:Key="TabItemDisabledBackground" Color="#F4F4F4"/>
<SolidColorBrush x:Key="TabItemDisabledBorderBrush" Color="#FFC9C7BA"/>
<Style TargetType="{x:Type TabItem}">
<Setter Property="FocusVisualStyle" Value="{StaticResource TabItemFocusVisual}"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Padding" Value="6,1,6,1"/>
<Setter Property="BorderBrush" Value="{StaticResource TabControlNormalBorderBrush}"/>
<Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid SnapsToDevicePixels="true">
<Border x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" Padding="{TemplateBinding Padding}">
<ContentPresenter x:Name="Content" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="Header" RecognizesAccessKey="True"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemHotBackground}"/>
</Trigger>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Panel.ZIndex" Value="1"/>
<Setter Property="Background" TargetName="Bd" Value="{Binding Path=Background, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabControl}}}"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="false"/>
<Condition Property="IsMouseOver" Value="true"/>
</MultiTrigger.Conditions>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabItemHotBorderBrush}"/>
</MultiTrigger>
<Trigger Property="TabStripPlacement" Value="Bottom">
<Setter Property="BorderThickness" TargetName="Bd" Value="1,0,1,1"/>
</Trigger>
<Trigger Property="TabStripPlacement" Value="Left">
<Setter Property="BorderThickness" TargetName="Bd" Value="1,1,0,1"/>
</Trigger>
<Trigger Property="TabStripPlacement" Value="Right">
<Setter Property="BorderThickness" TargetName="Bd" Value="0,1,1,1"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="TabStripPlacement" Value="Top"/>
</MultiTrigger.Conditions>
<Setter Property="Margin" Value="-2,-2,-2,-1"/>
<Setter Property="Margin" TargetName="Content" Value="0,0,0,1"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="TabStripPlacement" Value="Bottom"/>
</MultiTrigger.Conditions>
<Setter Property="Margin" Value="-2,-1,-2,-2"/>
<Setter Property="Margin" TargetName="Content" Value="0,1,0,0"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="TabStripPlacement" Value="Left"/>
</MultiTrigger.Conditions>
<Setter Property="Margin" Value="-2,-2,-1,-2"/>
<Setter Property="Margin" TargetName="Content" Value="0,0,1,0"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="TabStripPlacement" Value="Right"/>
</MultiTrigger.Conditions>
<Setter Property="Margin" Value="-1,-2,-2,-2"/>
<Setter Property="Margin" TargetName="Content" Value="1,0,0,0"/>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemDisabledBackground}"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabItemDisabledBorderBrush}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid x:Name="LayoutRoot">
<TabControl Background="Beige" HorizontalAlignment="Left" VerticalAlignment="Top" Width="500" Height="300">
<TabItem Header="TabItem">
<Grid/>
</TabItem>
<TabItem Header="TabItem">
<Grid/>
</TabItem>
</TabControl>
</Grid>
</Window>
BTW, 나는 TabItem의에 배경 속성을 설정하려고했으나 TabItem의가 비활성화 될 때에만 탭의 색상을 변경합니다. –