How to reuse layouts in WPF

Question

I'm trying to create a application that will be tabbed where each tab will have a button area and a view area.

Now each tab will essentially have the same layout just different things in the layout and I wanted to be able to reuse the same layout so that I won't have to change at many places ( it's just not good programming ). Can I accomplish this using resources or perhaps Styles.

Please supply a light code example if possible.

EDIT: I've decided to add an example of what I'm trying to do because I'm still not getting it.

Under each TabItem I'm trying to recreate this grid (It's a bit more complicated but you get the idea ):

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="200"/>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Border Margin="10"
                            BorderBrush="{StaticResource MediumColorBrush}"
                            CornerRadius="10"
                            BorderThickness="2"
                            Grid.Row="0">

               <!-- First content goes here -->

        </Border>

        <Border Margin="10"
                            BorderBrush="{StaticResource MediumColorBrush}"
                            CornerRadius="10"
                            BorderThickness="2"
                            Grid.Row="1">

               <!-- Second content goes here -->

        </Border>

    </Grid>

as you can see also the 2 borders are the same. Now I need to put some content placeholder where my comments are. I wan't to declare this Grid layout in a resource dictionary and then where I use it put seperate content into each border.

I may have alot of TabItems so repeating this code isn't a good idea and each Tab page will have different content in the 2 placeholders.

I'm able to use the

<ContentPresenter Content="{Binding}" />

thing but only for 1 content, what happens when there will be more.

Answer 1

Ingo,

Code is always available on MSDN. Check this: UserControl, Custom controls, DataTemplates.

Here are some examples of each approach. For sake of simplicity, let's assume the layout you want to replicate is one line of text with green foreground (in reality it may be really different, but you get the idea).

---

1. User Control

Xaml:

<UserControl x:Class="WpfApplication1.GreenTextUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;
  <TextBlock x:Name="txt" Foreground="Green"/>
</UserControl>

C#:

using System.Windows.Controls;

namespace WpfApplication1
{
  public partial class GreenTextUserControl : UserControl
  {
    public string Text
    {
      get { return txt.Text;}
      set { txt.Text = value; }
    }

    public GreenTextUserControl()
    {
      InitializeComponent();
    }
  }
}

Tab control:

<TabControl>
  <TabItem Header="Tab 1">
    <loc:GreenTextUserControl Text="This is Tab 1"/>
  </TabItem>
  <TabItem Header="Tab 2">
    <loc:GreenTextUserControl Text="This is Tab 2"/>
  </TabItem>
  <TabItem Header="Tab 3">
    <loc:GreenTextUserControl Text="This is Tab 3"/>
  </TabItem>
</TabControl>

---

2. Custom control

C#:

  public class GreenTextBlock : TextBlock
  {
    public GreenTextBlock()
    {
      Foreground = Brushes.Green;
    }
  }

TabControl:

<TabControl>
  <TabItem Header="Tab 1">
    <loc:GreenTextBlock Text="This is Tab 1"/>
  </TabItem>
  <TabItem Header="Tab 2">
    <loc:GreenTextBlock Text="This is Tab 2"/>
  </TabItem>
  <TabItem Header="Tab 3">
    <loc:GreenTextBlock Text="This is Tab 3"/>
  </TabItem>
</TabControl>

If your layout is more complex than textblock, custom controls also allows you to define it in XAML but it differs from UserControls.

---

3. DataTemplate

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:System="clr-namespace:System;assembly=mscorlib" 
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
    <x:Array x:Key="GreenText" Type="{x:Type System:String}">
      <System:String>This is Tab 1</System:String>
      <System:String>This is Tab 2</System:String>
      <System:String>This is Tab 3</System:String>
    </x:Array>

    <!--Tab item content data template-->
    <DataTemplate x:Key="GreenTextTemplate">
      <TextBlock Text="{Binding}" Foreground="Green"/>
    </DataTemplate>
  </Window.Resources>
    <Grid>
    <TabControl ItemsSource="{StaticResource GreenText}">
      <TabControl.ItemContainerStyle>
        <Style TargetType="{x:Type TabItem}">
          <Setter Property="ContentTemplate" Value="{StaticResource GreenTextTemplate}"/>
        </Style>
      </TabControl.ItemContainerStyle>
    </TabControl>
  </Grid>
</Window>

That's it :). Hope it helps.

Answer 2

TabItem is a ContentControl which allows any child content, but also allows templating of the content, which is exactly what you're trying to do. You can use a DataTemplate like this to do your shared layout. ContentPresenter is the placeholder for the different content of each TabItem.

<DataTemplate x:Key="ButtonViewerTemplate">
    <DockPanel>
        <Button DockPanel.Dock="Bottom" Content="OK"/>
        <Button DockPanel.Dock="Bottom" Content="Cancel"/>
        <Border Background="Aqua" BorderBrush="Red" BorderThickness="2" Padding="5">
            <ContentPresenter Content="{Binding}" />
        </Border>
    </DockPanel>
</DataTemplate>

To use the template just set it to each TabItem's ContentTemplate. This works with anything derived from ContentControl.

<TabControl>
    <TabItem ContentTemplate="{StaticResource ButtonViewerTemplate}" Header="Some Buttons">
        <UniformGrid>
            <Button Content="XXXXX"/>
            <Button Content="XXXXX"/>
            <Button Content="XXXXX"/>
            <Button Content="XXXXX"/>
        </UniformGrid>
    </TabItem>
    <TabItem ContentTemplate="{StaticResource ButtonViewerTemplate}" Header="All Blue">
        <Border Background="Blue" MinHeight="50"/>
    </TabItem>
    <TabItem ContentTemplate="{StaticResource ButtonViewerTemplate}" Header="Image">
        <Image Source="http://i.msdn.microsoft.com/Platform/Controls/StoMastheadMSDN/resources/logo_msdn.png"/&gt;
    </TabItem>
</TabControl>