Question

So I’ve been working on a project that allows me to add tabs to a tab control and within each new TabItem. I have a bunch of programmatically generated controls. Is there a way to create a template in XAML that I can simply add to the newly created TabItem?

For a simple example, say I have a WPF form with a TabPage:

<Window>
 <Grid>
  <TabControl></Tabcontrol>
 </Grid> 
</Window>

And I want to add 3 buttons in each of my TabPages.

<Window>
 <Grid>
  <TabControl>
   <TabItem>
    <Button/>
    <Button/>
    <Button/>
   </TabItem>
  </TabControl>
 </Grid> 
</Window>

I’d like to be able to edit this template of 3 buttons in a XAML editor (probably VS2012) and those changes would be reflected in the template that is added to each TabItem.

I’ve looked around and most of the WPF template articles are in regards to coloring or style templates which don’t seem to be what I want. As per my current approach, adding TabItem programmatically works but makes editing the template a little more cumbersome and, what I believe, contrary to the philosophy of WPF: disconnecting code from design.

I’m rather new to WPF but already see the power and advantages to it over WinForms so I’m sold on that avenue but because I’m new, my terminology is sometimes a bit confusing, which also makes my attempts to search fail, from time to time.

Any help would be appreciated. If I didn’t explain it well enough, let me know.

Answer 1

As @Olwaro mentioned, you probably want to use a UserControl.

Given your example you can have a UserControl with this Xaml (where the user control is called ThreeButtonStack and resides in namespace WpfApplication2):

<UserControl x:Class="WpfApplication2.ThreeButtonStack"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <UserControl.Resources>
        <Style TargetType="Button">
            <Setter Property="Margin" Value="5" />
            <Setter Property="Width" Value="75" />
        </Style>
    </UserControl.Resources>
    <StackPanel Orientation="Horizontal">
        <Button Content="OK" />
        <Button Content="Cancel" />
        <Button Content="Retry" />
    </StackPanel>
</UserControl>

Then you can call it in your main application like this:

<Window x:Class="WpfApplication2.TabPageWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:wpfApplication2="clr-namespace:WpfApplication2"
        Title="TabPageWindow" Height="300" Width="300">
    <TabControl>
        <TabItem Header="Tab 1">
            <DockPanel>
                <wpfApplication2:ThreeButtonStack DockPanel.Dock="Bottom" HorizontalAlignment="Right"/>
                <TextBlock>Custom Content</TextBlock>
            </DockPanel>
        </TabItem>
        <TabItem Header="Tab 2">
            <DockPanel>
                <wpfApplication2:ThreeButtonStack DockPanel.Dock="Bottom" HorizontalAlignment="Right"/>
                <TextBox>Editing custom stuff</TextBox>
            </DockPanel>
        </TabItem>
    </TabControl>
</Window>

and result would be: