Design time support for Prism.

As we all know that Designer-Developer workflow is not feasible when the application is developed in Prism (Composite Application Guidance). Prism requires each use  case to have it’s functionality in different modules and load these modules at run-time.

Due to runtime loading of the user control neither Visual Studio or Blend can be used for implementing designer-developer workflow as the user interface cannot be seen in its entirety.

Here is what i implemented with the help of Marc Jacobs . We create an attached behavior that can be set on any ContentControl or ItemsControl. This attached behavior takes the user control which we need to display while design-time.

Code Snippet

1. public static void OnContentChanged(DependencyObject depObj, DependencyPropertyChangedEventArgs e)
2. {
3. if (DesignerProperties.GetIsInDesignMode(depObj))
4. {
5. var contentControl = depObj as ContentControl;
6. if (contentControl != null)
7. {
8. contentControl.Content = e.NewValue;
9. }
10. else
11. {
12. var itemsControl = depObj as ItemsControl;
13. if (itemsControl != null)
14. {
15. itemsControl.Items.Add(e.NewValue);
16. }
17. }
18. }
19. \

The magic happens in the OnContentChanged method, when we set the attached behavior content this method is invoked. The code inside the method only inserts the user control in the design mode.

Code Snippet

1. <Window x:Class=”DesignTimePrism.ShellView”
2. xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;
3. xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;
4. xmlns:cal=”http://www.codeplex.com/CompositeWPF&#8221;
5. xmlns:local=”clr-namespace:DesignTimePrism”
6. xmlns:menu=”clr-namespace:DesignTimePrism.Modules.Menu;assembly=DesignTimePrism.Modules.Menu”
7. xmlns:main=”clr-namespace:DesignTimePrism.Modules.Main;assembly=DesignTimePrism.Modules.Main”
8. Title=”Window1″ Height=”600″ Width=”600″>
9. <Window.Resources>
10. <main:MainView x:Key=”mainView” />
11. <menu:MenuView x:Key=”menuView” />
12. </Window.Resources>
13. <Grid>
14. <Grid.ColumnDefinitions>
15. <ColumnDefinition Width=”0.3*” />
16. <ColumnDefinition Width=”0.7*” />
17. </Grid.ColumnDefinitions>
18. <ContentControl Grid.Column=”0″
19. local:DesignTime.Content=”{StaticResource mainView}”
20. cal:RegionManager.RegionName=”MenuRegion” />
21. <ContentControl Grid.Column=”1″
22. local:DesignTime.Content=”{StaticResource menuView}”
23. cal:RegionManager.RegionName=”MainRegion” />
24. </Grid>
25. </Window>

The only downside of using this technique is having the user controls declared in the resource dictionary. Also below are the snapshots  of the application in design and runtime mode.

Design time snapshot	Runtime snapshot

Code DesignTimePrism.zip