Have a Modules View fill Region completely

May 28, 2008 at 4:38 AM
Edited May 28, 2008 at 4:42 AM
I have what may be a very basic question.   I have created a solution with a shell project and one module.

The Shell project has the following code and Region:


...
<
DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto" >
<ItemsControl DockPanel.Dock="Top" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto" prism:RegionManager.RegionName="MainRegion" /> 
</DockPanel>
...
The inner view is in a seperate module that is dynamically added to the Region MainRegion.  The view inserted is a usercontrol with the following XAML:

 

 

<UserControl x:Class="SimpleERMS.Layout.MainTabArea.MainTabAreaView"
xmlns
=http://schemas.microsoft.com/winfx/2006/xaml/presentation
xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
xmlns:prism="http://www.codeplex.com/prism" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto" Background="Beige" />

 

 

 

 

 

 

 

The problem is that I would like the usercontrol to take up the entire contents of the MainRegion, but it isn't.   If I set the height of the usercontrol, it fills in to the height specified. 

By setting the background of the ItemsControl from the shell package, I can see that it is full screen, so I know that is configured correctly. 

Do you have any idea what is missing, or what and where I need to set properties to get this to work?

Ben

 

 

 

 

 

 

 

 

 

May 28, 2008 at 6:58 AM
Edited Jul 9, 2009 at 1:47 AM

Hi Ben,

I have recently come up against this exact problem. My solution was simple. Set the ItemsPanel to be a Grid or DockPanel.

E.g.

<ItemsControl DockPanel.Dock="Top" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto" prism:RegionManager.RegionName="MainRegion">
<ItemsControl.ItemsPanel>
                        <
ItemsPanelTemplate>
                            <
DockPanel/>
                        </
ItemsPanelTemplate>
                    </
ItemsControl.ItemsPanel>
</ItemsControl>

OR

<ItemsControl DockPanel.Dock="Top" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto" prism:RegionManager.RegionName="MainRegion">
<ItemsControl.ItemsPanel>
                        <
ItemsPanelTemplate>
                            <
Grid/>
                        </
ItemsPanelTemplate>
                    </
ItemsControl.ItemsPanel>
</ItemsControl>


I hope this helps.

Cheers

Justin
http://jtango.wordpress.com

May 28, 2008 at 11:43 AM
Justin,
Thank you...That did the trick.

Ben
Nov 19, 2008 at 1:04 PM
Many thanks Justin! Was going crazy for a while there... :-)

Julius
Feb 26, 2009 at 1:58 PM
Many Thanks Justin, worked for me too!
Apr 6, 2009 at 2:05 AM
Oh man did this drive me nuts.. i thought it was a bug in WPF or something along those lines.

Wait until I see Glen next.. :) hehe
Jun 11, 2009 at 12:14 AM

What about when usign the TabControlRegionAdapter?

My team noticed that a dock panel defined in the user control is not ablet o anchor itself to the tabItem generated by CAL.

It is a major issue for us.  I've tried a few different permutations.  For example.  I tried to set the TabControl.ItemsPanel.... but that doesn't impact the tab items created.

(we simple wrapped the TabControl so we can add close functionality)

 

 <DockPanel  VerticalAlignment = "Stretch"

                HorizontalAlignment = "Stretch"

                >

        

        <DPETCustomControl:DPETTabControl  

                    x:Name="tabControlScopedWorkSpaceRegion" 

                    TabStripPlacement="Top"                  

                    cal:RegionManager.RegionName="ScopedWorkSpaceRegion"

                    Width="Auto" Height="Auto"

   VerticalContentAlignment="Stretch"

                    MinHeight="480"

                    MinWidth="640"

                    HorizontalAlignment="Stretch"

                    VerticalAlignment="Stretch" 

                    DockPanel.Dock="Left">

 

            <TabControl.ItemsPanel> <!-- R&D 10June-->

                <ItemsPanelTemplate>

                    <DockPanel/>>

                </ItemsPanelTemplate>

            </TabControl.ItemsPanel>

            

 

        </DPETCustomControl:DPETTabControl>    

    </DockPanel>

 

Any ideas?  All help is welcome.

Tracy

 

Jun 18, 2009 at 2:42 AM
Edited Jul 9, 2009 at 1:47 AM

Hi Tracy,

You should not have to do anything special when using a TabControl. I created a new solution using the project templates supplied by David Hill here. I simply replaced the ContentControl that was setup as the main region, with a TabControl. Added a couple of Views to it and they automatically fill the entire tab content area.

I have uploaded this sample. You'll need to add the CAL reference assemblies yourself.

Let me know if this is not solving the problem you are talking about.

Cheers

Justin
http://jtango.wordpress.com

Jul 8, 2009 at 3:00 PM

Great example and I see that the sizing works fine.  However, how can the Header property of the tab items be set without using templating? (using code behind).

Background:
I'm following the StockTraderRI example and have the tabitem headers showing up fine at the root region level.  However when I use a tab region within a tab region, I get an error when using the template on the inner tab control.

Jul 9, 2009 at 1:44 AM
Edited Jul 9, 2009 at 1:45 AM

Nolan,

You could always create your own RegionAdapter specifically for the TabControl that handles the setting of the tab header in code behind. This is overly involved and not particularly elegant in my opinion.

If you redownload my sample I have updated it to do exactly what you are describing with WPF styles.

Cheers

Justin
http://jtango.wordpress.com

Jul 9, 2009 at 5:36 PM

Very interesting. Thanks for the great response.

I'm just looking it over now and I'll see if I can incorporate this into our current project.

Jul 9, 2009 at 6:23 PM

Everything is working great. Thanks for the help.

Jul 9, 2009 at 9:41 PM

I am trying this, but I cannot get it to work.  My shell.xaml looks like this:

<Window x:Class="HelloWorld.Shell"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:cal="http://www.codeplex.com/CompositeWPF"
    Title="Hello World" Height="300" Width="433">
    <ItemsControl DockPanel.Dock="Top" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto" cal:RegionManager.RegionName="MainRegion" Background="Coral">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Grid/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>

</Window>

My view:

<UserControl x:Class="HelloWorldModule.Views.HelloWorldView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Height="354" Width="244">
    <Grid Height="Auto" Width="Auto" Background="Azure">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="148*" />
            <ColumnDefinition Width="96*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="63*" />
            <RowDefinition Height="291*" />
        </Grid.RowDefinitions>
        <TextBlock Margin="12,14,20,12" Name="textBlock1" Opacity="0.7" Text="Customers" FontSize="24" />
        <ListBox Grid.ColumnSpan="2" Grid.Row="1" Name="listBox1" Background="RosyBrown" />
    </Grid>
</UserControl>

Any ideas what I am doing wrong?

 

Jul 9, 2009 at 9:56 PM

Never mind!  I realized that the height and width of the user control were set!

Feb 20, 2010 at 10:32 AM

@ jtango18

Thank U Sir  "Set the ItemsPanel" solution work great for me . 

 

Sep 15, 2010 at 9:59 AM

Thanks.

That fixed my problem with the DataGrid inside a region.

Dec 5, 2010 at 9:38 PM

Worked like a charm, thanks!