如何设置TabControls的TabItem标题FontSize [英] How do I set TabControls TabItem header FontSize

问题描述

我有一个TabControl，其样式改变了TabItem的Header的FontSize。当我将数据绑定到ItemsSource时，只有标题受到FontSize的影响。但是，当我在另一个TabControl上使用相同的样式并在XAML中添加TabItems时，FontSize会在TabItem中的所有内容上发生更改。我希望样式可以同时使用数据绑定和非数据绑定TabItems。

 < TabControl Style ={StaticResource VariablesTabControl} ItemsSource ={Binding TabItems}> 
 ... 
< / TabControl> b 
 
 
 $ b $ p $ Main $ > < Style TargetType =TabControlx：Key =VariablesTabControl> 
< Setter Property =ItemContainerStyleValue ={StaticResource VariableTabItem}/> 
 ... 
< / Style> 
 
 
< Style TargetType =TabItemx：Key =VariableTabItem> 
< Setter Property =Template> 
< Setter.Value> 
< ControlTemplate TargetType =TabItem> 
< Grid Name =PanelMinHeight =30MinWidth =120> 
< ContentPresenter x：Name =ContentSiteVerticalAlignment =CenterHorizo​​ntalAlignment =LeftContentSource =HeaderMargin =10,2/> 
< / Grid> 
< ControlTemplate.Triggers> 
<触发属性=IsSelected值=假> 
< Setter TargetName =PanelProperty =BackgroundValue =Transparent/> 
< Setter Property =ForegroundValue ={StaticResource ForegroundBrush}/> 
< Setter Property =FontSizeValue =12/> 
< /触发> 
<触发属性=IsMouseOver值=true> 
< Setter TargetName =PanelProperty =BackgroundValue ={StaticResource BackgroundMouseOver}/> 
< /触发> 
<触发属性=IsSelected值=真> 
< Setter TargetName =PanelProperty =BackgroundValue ={StaticResource SelectedBrush}/> 
< Setter Property =ForegroundValue ={StaticResource ForegroundBrush}/> 
< Setter Property =FontSizeValue =12/> 
< /触发> 
< /ControlTemplate.Triggers> 
< / ControlTemplate> 
 < / Setter> 
< / style> 
  




解决方案

您的问题是由属性值继承。

当您在xaml中定义 TabItem 时，可能会出现以下情况：

 < TabItem> 
< TabItem.Header> 
< TextBlock Text =TEST_HEADER1/> 
< /TabItem.Header> 
< TextBlock Text =TEST_CONTENT1/> 
< / TabItem> 
  

这两个 TextBox es，内容位于 TabItem 的逻辑树中，这意味着在 TabItem 上设置的任何Inheritable属性将传播到树到这些 TextBox es。

Foreground 和 FontSize 是可继承的。

如果您有类似的内容：

 < TabItem Header =TEST_HEADER2> TEST_CONTENT2< / TabItem> 
  

在 TabItem中没有任何元素的逻辑树中，标题和内容的元素将自动生成，并且属性不会被继承。
但是这种类型的声明 TabItem 不是很有用，你通常需要一些高级的XAML作为项目内容，所以我认为解决这个问题的最好方法是通过更改 TabItem 的 HeaderTemplate 中的所有文本属性，可以绑定到 TabItem的使用 RelativeSource 的属性。

I have a TabControl with a style that changes the FontSize of the Header of the TabItem. When I data bind the ItemsSource only the headers are affected by the FontSize. But when I use the same style on another TabControl and add the TabItems in XAML the FontSize is changed on all content in the TabItem. I want the style to work with both databound and non-databound TabItems.

<TabControl Style="{StaticResource VariablesTabControl}" ItemsSource="{Binding TabItems}">
...
</TabControl>

MainSkin.xaml:

<Style TargetType="TabControl" x:Key="VariablesTabControl">
    <Setter Property="ItemContainerStyle" Value="{StaticResource VariableTabItem}" />
    ...
</Style>


<Style TargetType="TabItem" x:Key="VariableTabItem">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TabItem">
                <Grid Name="Panel" MinHeight="30" MinWidth="120">
                    <ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Left" ContentSource="Header" Margin="10,2" />
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="False">
                        <Setter TargetName="Panel" Property="Background" Value="Transparent" />
                        <Setter Property="Foreground" Value="{StaticResource ForegroundBrush}" />
                        <Setter Property="FontSize" Value="12" />
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter TargetName="Panel" Property="Background" Value="{StaticResource BackgroundMouseOver}" />
                    </Trigger>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter TargetName="Panel" Property="Background" Value="{StaticResource SelectedBrush}" />
                        <Setter Property="Foreground" Value="{StaticResource ForegroundBrush}" />
                        <Setter Property="FontSize" Value="12" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

解决方案

Your problem is a result of Property Value Inheritance.

When you define the TabItems in xaml something like this:

 <TabItem>
     <TabItem.Header>
         <TextBlock Text="TEST_HEADER1" />
     </TabItem.Header>
     <TextBlock Text="TEST_CONTENT1" />
 </TabItem>

Both TextBoxes, the header, and the content are in the logical tree of the TabItem that means that any Inheritable property set on TabItem will be propagated down the tree to these TextBoxes.

The Foreground and FontSize are Inheritable.

If you have something like:

  <TabItem Header="TEST_HEADER2">TEST_CONTENT2</TabItem>

you don't have any Elements in TabItem's logical tree, the elements for the Header and the content will be auto generated, and the properties will not be inherited. But this type of declaring TabItem's is not very useful, you usually need some advanced XAML as the items content so I think the best way to solve this is by changing all those text properties in TabItem's HeaderTemplate, you can bind to TabItem's properties using the RelativeSource.

这篇关于如何设置TabControls的TabItem标题FontSize的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！