blog community
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.


Posted 15-07-2008 22:04 by willemm

Comments

Recent URLs tagged Databinding - Urlrecorder wrote Recent URLs tagged Databinding - Urlrecorder
on 10-09-2008 15:17
Matthias wrote re: Customizing regions in CompositeWPF
on 23-09-2008 23:50
Elegant and very helpful - thank you! One question: I'm rather new to WPF. It took me a couple of minutes to figure out that {Binding PropertyName} is (is it?) the same as {Binding Path=PropertyName}. But where does the WPF docs actually say that this shorter syntax also works? I simply couldn't find it.
willemm wrote re: Customizing regions in CompositeWPF
on 24-09-2008 8:07

Hi Matthias,

Indeed {Binding PropertyName} means the same as {Binding Path=PropertyName}.

I couldn't find that either in the documentation, but it is so widely used somebody else must know how the binding expressions are parsed exactly.

Another tip is the {Binding} expression without any additional properties specified. This will bind the object itself. Simply put, if you assign a Person object to the datacontext and you use {Binding} the person object will get bound directly.

Hope this helps, come back if you have more questions.

Add a Comment

(required)  
(optional)
(required)  
Remember Me?
Powered by Community Server (Commercial Edition), by Telligent Systems