{"id":3231,"date":"2015-07-13T18:37:26","date_gmt":"2015-07-13T18:37:26","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=3231"},"modified":"2015-07-13T18:37:26","modified_gmt":"2015-07-13T18:37:26","slug":"creating-a-wpf-application-in-f-a-more-complete-solution","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/creating-a-wpf-application-in-f-a-more-complete-solution\/","title":{"rendered":"Creating a WPF application in F# (a more complete solution)"},"content":{"rendered":"<p>In my previous post <a href=\"http:\/\/putridparrot.com\/blog\/creating-a-wpf-application-in-f\/\" target=\"_blank\">Creating a WPF application in F#<\/a> I outlined how to create a very basic WPF application using F# and WPF. <\/p>\n<p>I&#8217;ve now decided to combine F#, WPF and MahApps metro\/modern UI look and feel. In doing so I found a flaw in the previously posted code. First off, the code works fine, but I needed to add some resources to an App.xaml and which point I realized I needed to change the code to handle this. The previous post didn&#8217;t use an App.xaml (well it was mean&#8217;t to be minimalist solution to using F# and WPF &#8211; or at least that&#8217;s my excuse).<\/p>\n<p>So I will repeat some of the previous post here in defining the steps to get an F#\/WPF\/MahApps application up and running. <\/p>\n<p><em>Note: Please check out the post <a href=\"https:\/\/msdn.microsoft.com\/en-us\/magazine\/hh394149.aspx\" target=\"_blank\">Build MVVM Applications in F#<\/a> which outlines how to use the App.xaml file, I will be repeating this here.<\/em><\/p>\n<p>Okay, here we go&#8230;<\/p>\n<ul>\n<li>Create a new project and select F# Application<\/li>\n<li>This will be a console application, so next select the project properties and change the Application | Output type from Console Application to Windows Application<\/li>\n<li>Add references to PresentationCore, PresentationFramework, System.Xaml and WindowsBase<\/li>\n<li>Change the Program.fs to look like this\n<pre class=\"brush: fsharp; title: ; notranslate\" title=\"\">\r\nopen System\r\nopen System.Windows\r\nopen System.Windows.Controls\r\nopen System.Windows.Markup\r\n\r\n&#x5B;&lt;STAThread&gt;]\r\n&#x5B;&lt;EntryPoint&gt;]\r\nlet main argv = \r\n    let application = Application.LoadComponent(\r\n                        new System.Uri(&quot;\/&lt;Your Assembly Name&gt;;component\/App.xaml&quot;, UriKind.Relative)) :?&gt; Application\r\n\r\n    application.Run()\r\n<\/pre>\n<p>Obviously change &lt;Your Assembly Name&gt; to the name of your compiled assembly name.\n<\/li>\n<li>Using NuGet add MahApps.Metro to the project<\/li>\n<li>Add a new item to your project. Unfortunately there&#8217;s no XAML file (at least not in the version of Visual Studio I&#8217;m testing this on). So simply pick an XML File and give it the name App.xaml<\/li>\n<li>In the App.xaml file place the following code\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;Application xmlns=&quot;http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation&quot;\r\n             xmlns:x=&quot;http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml&quot;\r\n             StartupUri=&quot;MainWindow.xaml&quot;&gt;\r\n    &lt;Application.Resources&gt;\r\n    &lt;ResourceDictionary&gt;\r\n        &lt;ResourceDictionary.MergedDictionaries&gt;\r\n            &lt;ResourceDictionary Source=&quot;pack:\/\/application:,,,\/MahApps.Metro;component\/Styles\/Controls.xaml&quot; \/&gt;\r\n            &lt;ResourceDictionary Source=&quot;pack:\/\/application:,,,\/MahApps.Metro;component\/Styles\/Fonts.xaml&quot; \/&gt;\r\n            &lt;ResourceDictionary Source=&quot;pack:\/\/application:,,,\/MahApps.Metro;component\/Styles\/Colors.xaml&quot; \/&gt;\r\n            &lt;ResourceDictionary Source=&quot;pack:\/\/application:,,,\/MahApps.Metro;component\/Styles\/Accents\/Blue.xaml&quot; \/&gt;\r\n            &lt;ResourceDictionary Source=&quot;pack:\/\/application:,,,\/MahApps.Metro;component\/Styles\/Accents\/BaseLight.xaml&quot; \/&gt;\r\n        &lt;\/ResourceDictionary.MergedDictionaries&gt;\r\n    &lt;\/ResourceDictionary&gt;\r\n&lt;\/Application.Resources&gt;\r\n&lt;\/Application&gt;\r\n<\/pre>\n<\/li>\n<liSelect App.xaml in the solution explorer and change the file properties Build Action to Resource<\/li>\n<li>Now add another XML file to the project and name it MainWindow.xaml<\/li>\n<li>In the MainWindow.xaml file replace the existing text with\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;Controls:MetroWindow  \r\n    xmlns=&quot;http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation&quot;\r\n    xmlns:x=&quot;http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml&quot;\r\n    xmlns:Controls=&quot;clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro&quot;\r\n    Title=&quot;MainWindow&quot; Height=&quot;350&quot; Width=&quot;525&quot;&gt;\r\n    &lt;Grid&gt;\r\n    &lt;\/Grid&gt;\r\n&lt;\/Controls:MetroWindow &gt;\r\n<\/pre>\n<\/li>\n<li>Finally, select the MainWindow.xaml file in the solution explorer and change the file properties Build Action to Resource<\/li>\n<\/ul>\n<p>Obviously you&#8217;ll still need to setup your view model at some point and without the ability to work with partial classes (as F# doesn&#8217;t support the concept). We have a couple of options. <\/p>\n<p>I&#8217;ve played around with a few ways of doing this and the easiest is to do this in the Startup event of the Application object. In doing this we also need to handle the creation of the MainWindow, so <\/p>\n<ul>\n<li>Remove the <em>StartupUri=&#8221;MainWindow.xaml&#8221;<\/em> from the App.xaml as we&#8217;re going to handle the creation and assignment in code<\/li>\n<li>In the Program.fs file, before the <em>application.Run()<\/em> add the following code\n<pre class=\"brush: fsharp; title: ; notranslate\" title=\"\">\r\napplication.Startup\r\n|&gt; Event.add(fun _ -&gt; \r\n                     let mainWindow = Application.LoadComponent(new System.Uri(&quot;\/WPFFSharp1Test;component\/MainWindow.xaml&quot;, UriKind.Relative)) :?&gt; Window\r\n                     mainWindow.DataContext &lt;- new MyViewModel()\r\n                     application.MainWindow &lt;- mainWindow\r\n                     mainWindow.Show()\r\n                     )\r\n<\/pre>\n<\/li>\n<\/ul>\n<p>And we&#8217;re done. You should now have the styling of MahApps and the creation and setting up with the main window and the main view model.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In my previous post Creating a WPF application in F# I outlined how to create a very basic WPF application using F# and WPF. I&#8217;ve now decided to combine F#, WPF and MahApps metro\/modern UI look and feel. In doing so I found a flaw in the previously posted code. First off, the code works [&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":[6,65,13],"tags":[],"class_list":["post-3231","post","type-post","status-publish","format-standard","hentry","category-f","category-mahapps","category-wpf"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/3231","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=3231"}],"version-history":[{"count":4,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/3231\/revisions"}],"predecessor-version":[{"id":3235,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/3231\/revisions\/3235"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=3231"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=3231"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=3231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}