Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I add extra content to a WPF TabControl?
    text
    copied!<p>I have a custom ControlTemplate for a WPF TabControl that adds Buttons to the left and right hand side of the TabItem header. At the moment this is not a named part as the button commands are bound in the ControlTemplates XAML and do not need to be exposed outside of the ControlTemplate.</p> <p>This works fine for a button but what if I want to add <em>content</em> to the left (or right) hand side of the TabItemHeaders which can be bound outside of the ControlTemplate so that my TabControl becomes more flexible?</p> <p>My idea was to subclass the TabControl and have two named parts in the ControlTemplate and expose these as properties of the new control; <em>CustomTabControl.LeftContentArea</em> and <em>CustomTabControl.RightContentArea</em> respectively. Each named part is a ContentPresenter and each ContentPresenters Content property is exposed by the properties named above.</p> <p>However, when I tried this I was unable to put content into the left and right content areas.</p> <p>Edit: Just to be clear I have included an image. The red rectangles show where I want to be able to place extra content.</p> <p><img src="https://i.stack.imgur.com/cwK2F.jpg" alt="alt text"></p> <p>Update: Below is a screen shot of the progress I have made so far, hopefully this will help explain my problem a bit more.</p> <p>The screen shot shows my custom Tab Control with two blank tabs and three buttons that are currently on the right hand side of the <em>TabItem</em> header area. The buttons are currently defined in the <em>TabControls</em> custom <em>ControlTemplate</em> I.E. there is a <em>ColumnDefinition</em> within the <em>ControlTemplates</em> Grid which contains a <em>StackPanel</em> that hosts 3 buttons.</p> <p><img src="https://i.stack.imgur.com/zeUK8.png" alt="alt text"></p> <p>What I am looking for is a way to allow the consumer of the tab control decide what content goes in the area next to the tabs. E.G. the user should be able to do something like this:</p> <pre><code>&lt;local:CustomTabControl&gt; &lt;local:CustomTabControl.RightContentArea&gt; &lt;!-- This can be changed to ANY content that the user wants --&gt; &lt;StackPanel Orientation="Horizontal"&gt; &lt;Button Content="Test" /&gt; &lt;Button Content="Test" /&gt; &lt;Button Content="Test" /&gt; &lt;/StackPanel&gt; &lt;/local:CustomTabControl.RightContentArea&gt; &lt;!-- TabItems are added as normal --&gt; &lt;TabItem Header="Tab One" /&gt; &lt;TabItem Header="Tab Two" /&gt; &lt;/local:CustomTabControl&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload