{"id":1998,"date":"2014-06-08T09:50:05","date_gmt":"2014-06-08T09:50:05","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=1998"},"modified":"2014-06-08T09:50:05","modified_gmt":"2014-06-08T09:50:05","slug":"composing-a-prism-ui-using-regions","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/composing-a-prism-ui-using-regions\/","title":{"rendered":"Composing a Prism UI using regions"},"content":{"rendered":"<p>Monolithic application are (or should be) a thing of the past. We want to create applications which are composable from various parts, preferably with a loose coupling to allow them to be added to or reconfigured with minimal effort.<\/p>\n<p>There are various composable libraries for WPF, for this post I&#8217;m going to concentrate on Prism. Prism uses regions to allow us to partition your application by creating areas within a view for each UI element. These areas are known as regions.<\/p>\n<p>Assuming we have a minimal Prism application as per my post <a href=\"http:\/\/putridparrot.com\/blog\/initial-steps-to-setup-a-prism-application\/\" title=\"Initial steps to setup a Prism application\" target=\"_blank\">Initial steps to setup a Prism application<\/a>, then let&#8217;s begin by creating a &#8220;MainRegion&#8221; a region\/view which takes up the whole of the Shell window.<\/p>\n<ul>\n<li>In the Shell.xaml, add the name space\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\nxmlns:cal=&quot;http:\/\/www.codeplex.com\/prism&quot;\r\n<\/pre>\n<\/li>\n<li>Replace any content you have in the shell with the following\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;ItemsControl cal:RegionManager.RegionName=&quot;MainRegion&quot; \/&gt;\r\n<\/pre>\n<p>here we&#8217;ve created an ItemsControl and given it a region name of &#8220;MainRegion&#8221;. An ItemsControl allows us to display multiple items, equally we could have used a ContentControl for a single item.\n<\/li>\n<li>We&#8217;re going to create a new class library for our view(s), so add a class library project to your solution, mine&#8217;s named Module1<\/li>\n<li>To keep our views together create a View folder within the project<\/li>\n<li>Add a WPF UserControl (mine&#8217;s named MyView) to the View folder, mine has a TextBlock within it, thus\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;TextBlock Text=&quot;My View&quot; \/&gt;   \r\n<\/pre>\n<p>just to give us something to see when the view is loaded.\n<\/li>\n<li>Add a class. I&#8217;ve named it Module1Module and add the following code\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\npublic class Module1Module : IModule\r\n{\r\n   private readonly IRegionViewRegistry regionViewRegistry;\r\n\r\n   public Module1Module(IRegionViewRegistry registry)\r\n   {\r\n      regionViewRegistry = registry;   \r\n   }\r\n\r\n   public void Initialize()\r\n   {\r\n      regionViewRegistry.RegisterViewWithRegion(&quot;MainRegion&quot;, \r\n               typeof(Views.MyView));\r\n   }\r\n}\r\n<\/pre>\n<p>Here we&#8217;re setting up an IModule implementation which associates a view with a region name.\n<\/li>\n<li>Reference the class library project in the shell project<\/li>\n<\/ul>\n<p><strong>Using Unity<\/strong><\/p>\n<ul>\n<li>Now with our Unity bootstrapper, we need to add the module to the module catalog, as per the following\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\nprotected override void ConfigureModuleCatalog()\r\n{\r\n   base.ConfigureModuleCatalog();\r\n   ModuleCatalog moduleCatalog = (ModuleCatalog)this.ModuleCatalog;\r\n   moduleCatalog.AddModule(typeof(Module1.Module1Module));\r\n}\r\n<\/pre>\n<\/li>\n<\/ul>\n<p><strong>Using MEF<\/strong><\/p>\n<ul>\n<li>Now with our MEF bootstrapper, we need to add the module to the module catalog, as per the following\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\nprotected override void ConfigureAggregateCatalog()\r\n{\r\n   base.ConfigureAggregateCatalog();\r\n   AggregateCatalog.Catalogs.Add(new AssemblyCatalog(GetType().Assembly));\r\n   AggregateCatalog.Catalogs.Add(new AssemblyCatalog(\r\n           typeof(Module1.Module1Module).Assembly));\r\n}\r\n<\/pre>\n<\/li>\n<li>In our view, we need to mark the class with the ExportAttribute, thus\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\n&#x5B;Export]\r\npublic partial class MyView : UserControl\r\n{\r\n   public MyView()\r\n   {\r\n      InitializeComponent();\r\n   }\r\n}\r\n<\/pre>\n<\/li>\n<li>Now we need to change the module code to the following\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\n&#x5B;ModuleExport(typeof(Module1Module), \r\n   InitializationMode=InitializationMode.WhenAvailable)]\r\npublic class Module1Module : IModule\r\n{\r\n   private readonly IRegionViewRegistry regionViewRegistry;\r\n\r\n   &#x5B;ImportingConstructor]\r\n   public Module1Module(IRegionViewRegistry registry)\r\n   {\r\n      regionViewRegistry = registry;\r\n   }\r\n\r\n   public void Initialize()\r\n   {\r\n      regionViewRegistry.RegisterViewWithRegion(&quot;MainRegion&quot;, \r\n           typeof(Views.MyView));\r\n   }\r\n}\r\n<\/pre>\n<\/li>\n<\/ul>\n<p>Obviously in this sample we created a single region and embedded a single view, but we can easily create multiple named regions to truly &#8220;compose&#8221; our application from multiple views.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Monolithic application are (or should be) a thing of the past. We want to create applications which are composable from various parts, preferably with a loose coupling to allow them to be added to or reconfigured with minimal effort. There are various composable libraries for WPF, for this post I&#8217;m going to concentrate on Prism. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[73],"tags":[],"class_list":["post-1998","post","type-post","status-publish","format-standard","hentry","category-prism"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/1998","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=1998"}],"version-history":[{"count":10,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/1998\/revisions"}],"predecessor-version":[{"id":2055,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/1998\/revisions\/2055"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=1998"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=1998"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=1998"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}