Define the Regions
Our shell will contain 3 regions:
- Menu Region: contain a Menu that is responsible to load views in the Main Region
- Main Region: region that will load the workspace controls – these are the views that will handle the application features. In our application only one view at a time can be loaded in the Main Region.
- Status Bar Region: provide info about current application state
These regions are the placeholders for the controls defined in our Modules. Our application will contain only one Module: the CoreModule but this application can easily be extended by adding new modules. In our application the regions are defined as ItemsControls in the Shell.xaml file and can be accessed in a decoupled way by their names; they support dynamically adding or removing views at run time.
- To add the regions in the Shell window add the following namespace definition to the root Window element. You need this namespace to use an attached property for regions that is defined in the Composite Application Library: xmlns:cal=http://www.codeplex.com/CompositeWPF.
- Replace the Grid in the Shell by the following xaml:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="35" />
<RowDefinition Height="*" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<ItemsControl Name="MenuRegion" cal:RegionManager.RegionName="MenuRegion"
VerticalAlignment="Top" Grid.RowSpan="2" Height="26" HorizontalAlignment="Left"
Background="Transparent" Margin="0,12,0,0"/>
<Grid Margin="4,4,4,4" Grid.Row="1">
<Border Background="GhostWhite" BorderBrush="LightGray"
BorderThickness="1" CornerRadius="5" Margin="0,0,0,0">
<ItemsControl Name="MainRegion"
cal:RegionManager.RegionName="MainRegion" Margin="4" Height="291" />
</Border>
</Grid>
<Border Grid.Row="2" >
<ItemsControl Name="StatusbarRegion"
cal:RegionManager.RegionName="StatusbarRegion" Background="Transparent" />
</Border>
</Grid>
Now you should be able to run the application and see this screen:
Next --->
