UI with tabs and regions

Topics: Prism v1, Prism v2 - WPF 3.5
May 20, 2009 at 9:00 AM

I have been designing a solution for a client for some time and it is based on CAG for WPF. My solution has a ApplicationRegion where I will host different features of the application. But now my client insists on using a tabed interface.

So my question is: How do I combine a tabular interface with Regions? Do I fake the tabs and still use one region for the application or do I place one region in each tab?

Regards Björn Eriksen

May 20, 2009 at 9:42 AM

Hi Björn,

you could use the TabControl as a region. Each module can put it's main view into that region and take it from there. This would lead to a TabItem for each main view which.

 

Christoph

May 20, 2009 at 11:32 AM

Hi Christoph,

What do you mean with use the TabControl as a region. Could you show with some code?

Thanks,

Björn

May 20, 2009 at 2:36 PM

Hi Björn,

You just have to define a region for the tabcontrol and when you call the AddView()-method on that region a new tab item will be added.

<TabControl Regions:RegionManager.RegionName="Main" >

IRegion myRegion = myRegionManager.Regions["Main"];
myRegion.AddView(myView);

myView will be added to a new tab in the tabcontrol.

Jun 17, 2009 at 7:46 PM

Hi there.  I am using Prism V1 and have used this approach (note: that we have extended the tabControl to allow adding some additional functionality such as a button).

The issue I am facing is that the tab control does not dock properly.  the TabControl winds up being the MinHeight/MinWidth.

The tabControl does not appear to dock properly (expecially given that we have set LastChildFill").

How can I get the tabControl to properly dock and fill?

 <DockPanel LastChildFill="True"> 

       <DPETCustomControl:DPETTabControl  

                    Name="tabControlScopedWorkSpaceRegion" 

                    TabStripPlacement="Top"                                       

                    cal:RegionManager.RegionName="ScopedWorkSpaceRegion"                        

                    DockPanel.Dock="Left"

                    Height="Auto"

                    HorizontalAlignment="Stretch"

                    VerticalAlignment="Stretch" 

                    MinHeight="480"

                    MinWidth="640"                    

                    >

        </DPETCustomControl:DPETTabControl>

 </DockPanel>