Tôi có một TabControl mà tôi đã đặt lại. TabItem có một kích hoạt được kích hoạt khi TabItem được chọn để thay đổi văn bản TabItem thành đậm và xanh lá cây. Vấn đề tôi có là văn bản trong nội dung của tab cũng được đặt thành màu đậm và màu xanh lục.Cài đặt TabItem màu nền trước cũng đặt màu nền trước TabControl
Tôi có thể giải quyết vấn đề này bằng cách đặt tất cả các điều khiển của tôi trong nội dung tab thành trọng số màu và phông chữ mà tôi muốn, nhưng tôi có phải làm điều này không? Vì vậy, tôi phải đảm bảo rằng mọi khối chữ trong vùng nội dung đều có kiểu đặt màu thành màu đen và phông chữ bình thường.
Làm cách nào tôi có thể đặt phần IsSelected của TabItem để hiển thị màu xanh lục, nhưng chỉ để lại nội dung của tab?
Tôi đã cố gắng đặt nền trước của TabControl thành màu đen, nhưng điều này không hoạt động.
Bạn sẽ thấy từ mẫu mã bên dưới văn bản trên tab đầu tiên có màu xanh lục và tôi muốn màu đen, nhưng không đặt từng điều khiển trong nội dung tab.
Mã mẫu dưới đây:
<Grid>
<Grid.Resources>
<!-- Tab item -->
<Style TargetType="{x:Type TabItem}">
<Setter Property="FontSize" Value="14"/>
<Setter Property="MinWidth" Value="200"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border Name="Border" Padding="5,2">
<ContentPresenter ContentSource="Header"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Border.IsMouseOver" Value="True"/>
<Condition Property="IsSelected" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Foreground" Value="Black"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Border.IsMouseOver" Value="False"/>
<Condition Property="IsSelected" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="Foreground" Value="Black" />
</MultiTrigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="Green"/>
<Setter Property="FontWeight" Value="Bold"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Tab control -->
<Style TargetType="{x:Type TabControl}">
<Setter Property="SelectedIndex" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Padding="5" Margin="0,0,5,0" CornerRadius="3">
<StackPanel Orientation="Vertical">
<ScrollViewer VerticalScrollBarVisibility="Auto" FocusVisualStyle="{x:Null}">
<TabPanel IsItemsHost="True"/>
</ScrollViewer>
</StackPanel>
</Border>
<Border Grid.Column="1" BorderBrush="Black" BorderThickness="0">
<ScrollViewer VerticalScrollBarVisibility="Auto" FocusVisualStyle="{x:Null}" Padding="10,0">
<ContentPresenter ContentSource="SelectedContent"/>
</ScrollViewer>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<TabControl Name="tabControl" TabStripPlacement="Left">
<!-- First tab item -->
<TabItem IsSelected="True">
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Profile"/>
</StackPanel>
</TabItem.Header>
<TextBlock Text="Page 1 Sample Text with no foreground set." FontSize="30"/>
</TabItem>
<!-- Second tab item -->
<TabItem IsSelected="True">
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Profile"/>
</StackPanel>
</TabItem.Header>
<TextBlock Text="Page 2 Sample Text with foreground set manually." FontSize="30" Foreground="Red"/>
</TabItem>
</TabControl>
</Grid>
Đăng một số mã để tìm hiểu xem có gì sai! – decyclone
Đã thêm mẫu mã theo yêu cầu. – Adrian