Scoped Regions inside TabControl don't change content

Topics: Prism v2 - WPF 3.5
Feb 12, 2010 at 11:27 AM

Hi,

I have some problems to get PRISM2, WPF, templates and a TabControl to work together smoothly.

I declared the TabControl as "MainRegion". For the TabItems inside that TabControl I defined a Style that sets a template for the content of the TabItem.

This template mainly consists of a Grid with 3 rows. The upper an lower row are defined as regions ("PerModuleToolBarRegion" and "PerModuleFooterRegion").

The middle row is bound to the content of the TabItem (using TemplateBinding).

 

<Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Border BorderBrush="Black" CornerRadius="12" BorderThickness="1" >
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="30"/>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="40" />
                                </Grid.RowDefinitions>
                                <ItemsControl
                                    x:Name="perModuleToolBar"
                                    Regions:RegionManager.RegionName="{x:Static Infrastructure:RegionNames.PerModuleToolBarRegion}" />
                                <ContentPresenter
                                Content="{TemplateBinding Property=Content}"
                                Grid.Row="1" />
                                <ContentControl
                                    Grid.Row="2"
                                    x:Name="perModuleFooter"
                                    Regions:RegionManager.RegionName="{x:Static Infrastructure:RegionNames.PerModuleFooterRegion}" />
                            </Grid>
                        </Border>
                    </DataTemplate>
                </Setter.Value>

I can get the main view of my modules inside the "Content" area of the TabItem and the module specific content seems to go inside of the "PerModule" scoped regions as I can see the views of one of my modules in there.

However I expected those scoped regions to switch view when I switch to another TabItem.

So when I go from Tab1 to Tab2 I expected the displayed TabItem to change like this:

Tab1                                         Tab2

View1ToolBar                            View2ToolBar

View1Content         --->            View2Content

View1Footer                              View2Footer

 

Is there a built-in way to achieve this goal and I just missed something or do I have to implement that kind of behaviour myself?

 

Thanks in advance for your help!

 

PerModuleToolBarRegion
Feb 16, 2010 at 7:18 PM

How are you adding the views to the regions? I assume you are actually seeing 2 tabs on the tab control?

Feb 17, 2010 at 5:27 AM
var innerScopeRegionManager = RegionManager.RegisterViewWithRegion(RegionNames.MainRegion, typeof (MatrixView));

innerScopeRegionManager.RegisterViewWithRegion(RegionNames.PerModuleFooterRegion, typeof(MatrixFooterView));
innerScopeRegionManager.RegisterViewWithRegion(RegionNames.PerModuleToolBarRegion,
                                                           typeof(MatrixToolBarView));


The code for the second tab looks the same and yes, they are both shown. And when I switch between the tabs the view that is added
directly to the main region changes correctly. Just the parts that go into the PerModuleFooterRegion and PerModuleToolBarRegion do not behave the way I expected it.

 

Feb 17, 2010 at 12:56 PM

Hi,

I was able to reproduce your situation and have been able to reach the same behavior as you are. What is happening is that when you set a style for each TabItem only one instance of the PerModuleFooterRegion and PerModuleToolBarRegion are being created. Another thing to consider is that with the code above you are not actually creating a scoped region manager (you can read about the way to achieve that here). Therefore, the views are being added to the same region instance.

As a result, you should be able to see both Toolbar views at the same time (as it is an AllActiveRegion) and only one of the Footer views.

A possible way to get this working with scoped regions would be adding the PerModuleFooterRegion and PerModuleToolBarRegion to each content view (creating a Composite View). That way, you can create a scoped region manager for each of those views and you will be able to achieve the behavior you wanted in the first place.

Please let me know if this helps.

Damian Schenkelman
http://blogs.southworks.net/dschenkelman