Customizing regions in CompositeWPF

CompositeWPF works with regions to make the user interface composable. Standard you have the itemscontrol that can be used as a region for views. This control is already very flexible and best of all, there are a lot of WPF controls based on the itemscontrol so you should be able to come up with a lot of possible schemes in your user interface.

I found out that quite a few people are having trouble with this. One of the things that is asked a lot, is how they can for example provide a title to the header of a tabitem when displaying a view on a tabcontrol that is configured as region.

The answer is quite simple, you can by using databinding. You can customize the ContainerItemStyle by supplying your own custom style. In this style can now specify the header of the tabitem (Which is the container item for a tabcontrol). The simple version of this looks like this:

<Grid>
    <Grid.Resources>
        <Style TargetType="{x:Type TabItem}" x_Key="TabItemStyle">
            <Setter Property="Header" Value="{Binding Title}">
            </Setter>
        </Style>
    </Grid.Resources>
    <TabControl cal:RegionManager.RegionName="MainRegion" ItemContainerStyle='{StaticResource TabItemStyle}’>
    </TabControl>
</Grid>

You can also create more elaborate versions of this trick by supplying a more complex object to the header property and specify a headertemplate that further formats the contents of the object supplied as the header. A sample style that accomplishes this is shown below (Look ma, no code!):

<Style TargetType="{x:Type TabItem}" x_Key="TabItemStyle">
    <Setter Property="Header" Value="{Binding Metadata}">
    </Setter>
    <Setter Property="HeaderTemplate">
        <Setter.Value>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Image Source="{Binding Icon}" Width="16" Height="16"/>
                    <TextBlock Text="{Binding Title}"/>
                </StackPanel>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

By using databinding you can have controls that don't contain the required properties, yet still display them without any errors on the region. Although that does look like some very bad designed 16-bit tool under windows vista (Get the idea?), it does prevent the application from showing some very nasty errors while testing stuff out.

Share this