{"id":3878,"date":"2016-05-01T18:36:33","date_gmt":"2016-05-01T18:36:33","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=3878"},"modified":"2016-05-01T18:36:33","modified_gmt":"2016-05-01T18:36:33","slug":"up-and-running-with-modern-ui-mui","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/up-and-running-with-modern-ui-mui\/","title":{"rendered":"Up and running with Modern UI (mui)"},"content":{"rendered":"<p>So I actually used this library a couple of years back but didn&#8217;t blog about it at the time. As I no longer have access to that application&#8217;s code I realized I needed a quick start tutorial for myself on how to get up and running with <a href=\"https:\/\/github.com\/firstfloorsoftware\/mui\">mui<\/a>.<\/p>\n<p><strong>First steps<\/strong><\/p>\n<p>It&#8217;s simple enough to get the new styles etc. up and running, just follow these steps<\/p>\n<ul>\n<li>Create a WPF application<\/li>\n<li>Using NuGet install Modern UI<\/li>\n<li>Change the default Window to a ModernWindow (both in XAML and derive you code behind class from ModernWindow<\/li>\n<li>Add the following to your App.xaml resources\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;ResourceDictionary&gt;\r\n   &lt;!-- WPF 4.0 workaround --&gt;\r\n   &lt;Style TargetType=&quot;{x:Type Rectangle}&quot; \/&gt;\r\n   &lt;!-- end of workaround --&gt;\r\n   &lt;ResourceDictionary.MergedDictionaries&gt;\r\n      &lt;ResourceDictionary Source=&quot;\/FirstFloor.ModernUI;component\/Assets\/ModernUI.xaml&quot; \/&gt;\r\n      &lt;ResourceDictionary Source=&quot;\/FirstFloor.ModernUI;component\/Assets\/ModernUI.Light.xaml&quot;\/&gt;\r\n   &lt;\/ResourceDictionary.MergedDictionaries&gt;\r\n&lt;\/ResourceDictionary&gt;\r\n<\/pre>\n<\/li>\n<\/ul>\n<p>So that was easy enough, by default a grayed out back button is shown, we can hide that by setting the window style to<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\nStyle=&quot;{StaticResource BlankWindow}&quot;\r\n<\/pre>\n<p>You can show\/hide the window title by using the property<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\nIsTitleVisible=&quot;False&quot;\r\n<\/pre>\n<p>to the ModernWindow.<\/p>\n<p><strong>The tab style navigation<\/strong><\/p>\n<p>In these new UI paradigms we may use the equivalent of a tab control to display the different views in the main window, we achieve this in mui using<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;mui:ModernWindow.MenuLinkGroups&gt;\r\n   &lt;mui:LinkGroup DisplayName=&quot;Pages&quot;&gt;\r\n      &lt;mui:LinkGroup.Links&gt;\r\n         &lt;mui:Link DisplayName=&quot;Page1&quot; Source=&quot;\/Views\/Page1.xaml&quot; \/&gt;\r\n         &lt;mui:Link DisplayName=&quot;Page2&quot; Source=&quot;\/Views\/Page2.xaml&quot; \/&gt;\r\n      &lt;\/mui:LinkGroup.Links&gt;\r\n   &lt;\/mui:LinkGroup&gt;\r\n&lt;\/mui:ModernWindow.MenuLinkGroups&gt;\r\n<\/pre>\n<p>This code should be placed within the ModernWindow element (not within a Grid element) and in this example I created a Views folder with two UserControls, Page1 &#038; Page2 (in my case I placed a TextBlock in each with Page1 and Page 2 Text respectively to differentiate the two).<\/p>\n<p>Running this code we now have a UI with the tab like menu and two pages, the back button also now enables (if you are using it) and allows navigation back to the previous selected tab(s).<\/p>\n<p>One thing you might notice, when the app starts no &#8220;page&#8221;, by default, is selected. There&#8217;s a ContentSource property on a ModernWindow and we can set this to the page we want dispalyed, but if you do this you&#8217;ll also need to updated the LinkGroup to tell it what the current pages is. <\/p>\n<p>The easiest way to do this is using code behind, in the MainWindow ctor, simply type<\/p>\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\nContentSource = MenuLinkGroups.First().Links.First().Source;\r\n<\/pre>\n<p><strong>Colour accents<\/strong><\/p>\n<p>By default the colour accents used in mui are the subtle blue style (we&#8217;ve probably seen elsewhere), to change the accent colours we can add the following<\/p>\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\nAppearanceManager.Current.AccentColor = Colors.Red;\r\n<\/pre>\n<p>to the MainWindow ctor.<\/p>\n<p>Okay that&#8217;s a simple starter guide, more (probably) to follow.<\/p>\n<p><strong>References<\/strong><\/p>\n<p>https:\/\/github.com\/firstfloorsoftware\/mui\/wiki<\/p>\n","protected":false},"excerpt":{"rendered":"<p>So I actually used this library a couple of years back but didn&#8217;t blog about it at the time. As I no longer have access to that application&#8217;s code I realized I needed a quick start tutorial for myself on how to get up and running with mui. First steps It&#8217;s simple enough to get [&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":[13],"tags":[],"class_list":["post-3878","post","type-post","status-publish","format-standard","hentry","category-wpf"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/3878","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=3878"}],"version-history":[{"count":8,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/3878\/revisions"}],"predecessor-version":[{"id":3898,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/3878\/revisions\/3898"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=3878"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=3878"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=3878"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}