TabControl.ItemTemplate：将TabItem.Header.Text设置为带StringFormat的多重绑定 [英] TabControl.ItemTemplate: set TabItem.Header.Text to a MultiBinding with StringFormat

问题描述

如何将TabItem.Header设置为从几个字段获取的绑定，每个绑定以不同的大小显示，全部替换原始标题文本;而不会覆盖标题的默认样式和行为 - 我只需要文本。

我尝试设置其模板，但创建了一个包含内部控件的矩形，并且这个矩形对用户点击没有响应，并且也有控制风格，我希望这个控件不可见，只有它的文本应该是可见的。

我尝试了以下方法：

 < TabControl ItemsSource ={Binding}> 
< TabControl.ItemTemplate> 
< DataTemplate> 
< TabItem> 
< TabItem.Header> 
< MultiBinding StringFormat ={} {0}  -  {1}> 
< Binding Path =Title/> 
< Binding Path =Category.Title/> 
< / MultiBinding> 
< /TabItem.Header> 
< TabItem.Content> 
< TextBlock> 
以下是TabItem中的内容 - 不是标题
< / TextBlock> 
< /TabItem.Content> 
< / TabItem> 
< / DataTemplate> 
< /TabControl.ItemTemplate> 
< / TabControl> 
  

但它没有显示任何内容。

我也尝试将HeaderTemplate设置为DataTemplate，但是会发生什么呢，DataTemplate会覆盖TabItem样式，而当我单击文本时它不会进入单击的选项卡，此外，未选中的选项卡看起来非常有趣，我看到文本的矩形是浮动的，而我希望它是透明的。

因此，总结我的问题，我想将TabItem.Header.Text设置为带有StringFormat的MultiBinding。

解决方案

TabControl包含一个ContentTemplate属性以及它的ItemTemplate从ItemsControl继承。它使用ContentTemplate来区分内容区域中显示的内容，而ItemTemplate为Header定义模板。此外，您的ItemSource中的每个Item都会自动包装在TabItem中;它不需要在ItemTemplate中重新创建，因为它会尝试在注解中放置一个TabItem。

而不是重新创建ItemTemplate中的一个TabItem，使用ItemTemplate定义您的Header内容，以及ContentTemplate定义您的内容。

 < TabControl的ItemsSource = {结合} > 
< TabControl.ItemTemplate> 
< DataTemplate> 
< TextBlock> 
< TextBlock.Text> 
< MultiBinding StringFormat ={} {0}  -  {1}> 
< Binding Path =Title/> 
< Binding Path =Category.Title/> 
< / MultiBinding> 
< /TextBlock.Text> 
< / TextBlock> 
< / DataTemplate> 
< /TabControl.ItemTemplate> 
< TabControl.ContentTemplate> 
< DataTemplate> 
< TextBlock Text ={Binding MyContent}/> 
< / DataTemplate> 
< /TabControl.ContentTemplate> 
< / TabControl> 
  

在您的第一段中，您提到想要在标题的绑定部分设置不同的大小。如果你确实想这样做，你将不能像上面那样使用单个Binding或MultiBinding来设置文本。相反，您可以将TextBlocks嵌套到不同的格式以实现此目的。

 < TabControl.ItemTemplate> 
< DataTemplate> 
< TextBlock> 
< TextBlock Text ={Binding Title}
 FontSize =12/> 
< Run Text = - /> 
< TextBlock Text ={Binding Category.Title}
 FontSize =10/> 
< / TextBlock> 
< / DataTemplate> 
< /TabControl.ItemTemplate> 
  

How do I set the TabItem.Header to bindings taken from few fields, each binding shown in a different size, all in the place of the original header text; without overriding the default style and behavior of the header - I only need the text.

I tried to set its template but then it creates a rectangle that contains the inner controls, and this rectangle is not responsive for user clicks, and also have the control-style, I want this controls to be invisible, only its text should be visible.

I've tried the following:

<TabControl ItemsSource="{Binding}">
    <TabControl.ItemTemplate>
         <DataTemplate>
             <TabItem>
                 <TabItem.Header>
                     <MultiBinding StringFormat="{}{0}-{1}">
                         <Binding Path="Title"/>
                         <Binding Path="Category.Title"/>
                     </MultiBinding>
                 </TabItem.Header>
                 <TabItem.Content>
                     <TextBlock>
                         Here is what is gonna be in the TabItem - not header
                     </TextBlock>
                 </TabItem.Content>
             </TabItem>
         </DataTemplate>
    </TabControl.ItemTemplate>
</TabControl>

But it doesn't show anything.

I've also tried to set the HeaderTemplate to a DataTemplate but what happens is, the DataTemplate overrides the TabItem style and when I click the text it doesn't go to the clicked tab, besides, the unselected tabs look very funny, I see the rectangle of the text floating, while I want it to be transparent.

So, to summarize up my question, I want to set TabItem.Header.Text to a MultiBinding with StringFormat.

解决方案

The TabControl contains a ContentTemplate property as well as the ItemTemplate that it inherits from ItemsControl. It uses the ContentTemplate to differentiate what is showing in the Content area while the ItemTemplate which defines the template for the Header. Additionally, each Item from your ItemSource will automatically be wrapped in a TabItem; it doesn't need to be re-created in the ItemTemplate, as that will attempt to place a TabItem inside the Header as you are noticing.

Instead of re-creating a TabItem inside the ItemTemplate, use the ItemTemplate to define your Header content, and the ContentTemplate to define your Content.

<TabControl ItemsSource="{Binding}">
    <TabControl.ItemTemplate>
        <DataTemplate>
            <TextBlock>
                <TextBlock.Text>
                    <MultiBinding StringFormat="{}{0}--{1}">
                        <Binding Path="Title" />
                        <Binding Path="Category.Title" />
                    </MultiBinding>
                </TextBlock.Text>
            </TextBlock>
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding MyContent}" />
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

In your first paragraph you mentioned wanting to set different sizes on the bound portions of the Header. If you do want to do that, you won't be able to use a single Binding or MultiBinding to set the Text as is done above. Instead you can nest TextBlocks to achieve this with different formatting for each.

<TabControl.ItemTemplate>
    <DataTemplate>
        <TextBlock>
            <TextBlock Text="{Binding Title}"
                       FontSize="12" />
            <Run Text="--" />
            <TextBlock Text="{Binding Category.Title}"
                       FontSize="10" />
        </TextBlock>
    </DataTemplate>
</TabControl.ItemTemplate>

这篇关于TabControl.ItemTemplate：将TabItem.Header.Text设置为带StringFormat的多重绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！