Prism/WPF/Silverlight - setting ItemsControl height and width to full view using DockPanel style

Prism/WPF/Silverlight - setting ItemsControl height and width to full view using DockPanel style:


Figure 2 is the MainRegionTopContentBottom view that Prism will inject three views into (top, content and bottom). When the view is inserted into the MainRegion ItemsControl of figure 1 below the MainRegionTopContentBottom view is compressed vertically - we want it to fill the entire MainWindow.


Figure 1.



Wen we apply the ItemsControlDockedStyle (figure 3) to the MainRegion ItemsControl above we get expected results for the MainRegionTopContentBottom view (see below where the statusbar is at the bottom of the window) but not for the contents that are injected into its three regions - its ItemsControls also cause the contents to be compressed.


Figure 2.


Figure 3.

Once we apply the ItemsControlDocked style to each of the ItemsControl we get the expected behavior as shown in the image below:


Figure 4.

We can use the same view for both WPF Desktop and Silverlight with minor variation - for Silverlight we'll have to first install the Silverlight toolkit (available here for Silverlight 5) and then provide a reference to it in xaml as shown on line 4 of the image below:



With the above styles we achieve the results we need for both our Desktop and Silverlight applications (which share the same code).


Figure 5.