WPF

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

Code DesignTimePrism.zip

Advertisements

2 thoughts on “Design time support for Prism.

  1. You have to admit that having to declare the user controls in the resource dictionary is a pretty huge downside though, right? Aside from the issue I have with how this breaks the pattern a little, doesn’t this have performance implications?

    Have any other solutions to this been explored? I’m facing the same problem right now and we have a huge project with a ton of user controls.

    -Brent

    1. I agree that having user control is not a great idea but having them while design of the system is acceptable. I could not find any other way of doing thing when project is based on prism.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s