Help with Tabcontrol layout

Topics: Prism v2 - Silverlight 2
Apr 9, 2009 at 6:43 PM
I am implementing a scenario where I'm loading 3 or 4 views inside the tabcontrol. My tabcontrol region is defined using the TabControlRegionAdapter. I am able to load these views into this region without any problems. However, I am unable to control the layout of the tab control once these views get loaded. Thus my views scroll out of my page (so to speak) and are not visible on the screen. I understand that the tab control uses ItemsControl to display its content. I tried defining the layout using ItemsTemplate but even that seemed to have no effect. 

Here is a stripped down version of the code I'm implementing.

            <TabControl Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Regions:RegionManager.RegionName="Main" >
                    <basics:TabControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <controls:DockPanel MaxHeight="270"/>
                    </ItemsPanelTemplate>
                </basics:TabControl.ItemsPanel>
           </TabControl>

How can I control the layout of the content inside a tab so that all my views can be completely visible on the screen?  Also, is there a solution such that as I resize my browser, this content too gets automatically resized? In my present scenario, as I resize my window, more and more of my view content gets clipped.

Thanks for any help or guidance in advance.
Apr 10, 2009 at 4:49 PM
Edited Apr 10, 2009 at 4:53 PM
I had a look at http://www.codeplex.com/CompositeWPF/Thread/View.aspx?ThreadId=28522 and that did not seem to help me solve this problem either. Is there an issue with the tabcontrol when used with the region adapter?

I even tried using a DockPanel exactly as mentioned in thread 28522.

<DockPanel HorizontalAlignment = "Stretch" VerticalAlignment = "Stretch" Width="Auto" Height="Auto">
            <TabControl Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Regions:RegionManager.RegionName="Main" >
                    <basics:TabControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <controls:DockPanel MaxHeight="270"/>
                    </ItemsPanelTemplate>
                </basics:TabControl.ItemsPanel>
           </TabControl>
</DockPanel>

Jun 10, 2009 at 9:49 PM

Did you find an answer to this situation?

Jun 12, 2009 at 4:21 AM

I was able to get around the problem using an ItemsPresenter.

However, Im not sure if this was a workaround or the way it was meant to be used.

Jun 17, 2009 at 11:30 AM
Edited Jun 17, 2009 at 1:02 PM

Hello.  Could you post a small code sample?  Do you mean that you used an ItemsPresenter inside a TabControl or  instead of the TabControl?  

How did you organize this?

This is really causing some headaches for my team.   I appreciate any help you can provide. 

Jun 17, 2009 at 3:24 PM
Edited Jun 17, 2009 at 3:29 PM

 

Hi,

I used expression blend to create the template for the tab control. The ........ in my sample basically represent the template generated by the tab control.

 

<Style x:Key="TabControlStyle" TargetType="TabControl">
              <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TabControl">
                        ......................
                        <Grid x:Name="TemplateTop" Visibility="Collapsed"  HorizontalAlignment="Stretch"                  
                        VerticalAlignment="Stretch" >  
                             <ItemsPresenter></ItemsPresenter>
                        ......................
                        </Grid>
                        ......................
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
<TabControl Regions:TabControlRegionAdapter.ItemContainerStyle="{StaticResource CustomTabItemStyle}"
Style="{StaticResource TabControlStyle}"/>


Hope this helps.

 

Jun 17, 2009 at 5:47 PM

I went to my resource dictionary and updated my style to replace the ContentPresenter with the ItemsPresenter but it did not work.

I see in the TabControl definition, you are using "TabControlRegionAdapter"?  Did you author this?  

I am using the June2008 Prism release with a WPF application and don't see this in the namespace.

Which version of Prism are you using?  

 

Here is my code:

    <DockPanel LastChildFill="True">  

<!-- This is a menu -->

        <ItemsControl

                x:Name = "itemsControlScopedMenuBarRegion"

                cal:RegionManager.RegionName = "ScopedMenuBarRegion"               

                Width = "Auto"                

                VerticalAlignment = "Stretch"

                HorizontalAlignment = "Stretch"

                DockPanel.Dock="Top">

        </ItemsControl>

        <!-- This is a tab -->

        <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>

 

 

<!-- http://msdn.microsoft.com/en-us/library/bb628664.aspx--> <!--If the Dockstyle.Dock property is set to Top or Bottom, set the control's Width property to Auto. Likewise, if the Dockstyle.Dock property is set to Left or Right, set the controls Height property to Auto.-->
Jun 18, 2009 at 3:37 AM

I'm using the February 2009 version of Prism (version 2).

As I understand, the tabControlRegionsAdapter was a new addition to this release and is not available in the July 2008 edition.