{"id":32443,"date":"2017-07-17T11:32:01","date_gmt":"2017-07-17T18:32:01","guid":{"rendered":"https:\/\/blog.xamarin.com\/?p=32443"},"modified":"2017-07-17T11:32:01","modified_gmt":"2017-07-17T18:32:01","slug":"introducing-mfractor-visual-studio-mac","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/introducing-mfractor-visual-studio-mac\/","title":{"rendered":"Introducing MFractor for Visual Studio for Mac"},"content":{"rendered":"<p>\t\t\t\t<em>This is a special guest post from Matthew Robbins at MFractor. You can find him on Twitter at <a href=\"https:\/\/twitter.com\/matthewrdev\" target=\"_blank\">@matthewrdev<\/a>.<\/em><\/p>\n<p>Let&#8217;s say you&#8217;re a Xamarin.Forms developer and you&#8217;re starting out on a brand new app: a single screen, T-shirt ordering app. You&#8217;ve got the specs, the backend is mostly done, and all that&#8217;s left is for you to click <code>File<\/code> -&gt; <code>New Solution<\/code> and get started. Exciting times!<\/p>\n<p>We know that this is straight-forward for a Xamarin.Forms developer; we build our UIs in XAML to create native user interfaces that maximize shared code and use the MVVM pattern for our app logic ensuring good architecture and testabilty.<\/p>\n<p>However, the development process can be made easier by using MFractor, a productivity extension for Visual Studio for Mac.<\/p>\n<p>MFractor is a mobile-first refactoring tool for Visual Studio for Mac that contains a slew of features that are handy when building Xamarin apps. We can use MFractor to create view models, detect and fix XAML code issues, generate XAML code snippets, navigate easily through Android resources, and much more.<\/p>\n<p>So, let&#8217;s make our T-shirt app and learn how to make our app development easier with the help of MFractor!<\/p>\n<h2>Making The App<\/h2>\n<p>We&#8217;ll start by creating a new project for our app, <em>MyTShirt<\/em> and adding some controls to our main page, <\/code>MyTShirtPage.xaml<\/code>.<\/p>\n<ul>\n<li>An <code>Image<\/code> where our apps logo will sit.<\/li>\n<li>A <code>Label<\/code> and <code>Entry<\/code> for our customers name.<\/li>\n<li>A <code>Label<\/code> and <code>Entry<\/code> for our customers email address.<\/li>\n<li>A <code>Button<\/code> our customer can click to order their t-shirt!<\/li>\n<\/ul>\n<p>The XAML, complete with data binding, will look a little like this:<\/p>\n<p><code>MyTShirt.xaml<\/code><\/p>\n<pre><code>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\n&lt;ContentPage xmlns=\"http:\/\/xamarin.com\/schemas\/2014\/forms\"\n    xmlns:local=\"clr-namespace:MyTShirt\"\n    xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\"\n    x:Class=\"MyTShirt.MyTShirtPage\"&gt;\n    &lt;Image \/&gt;\n    &lt;StackLayout Orientation=\"Horizontal\"&gt;\n        &lt;Label Text=\"Name: \"\/&gt;\n        &lt;Entry Text=\"{Binding CustomerName}\"\/&gt;\n    &lt;\/StackLayout&gt;\n    &lt;StackLayout Orientation=\"Horizontal\"&gt;\n        &lt;Label Text=\"Email: \"\/&gt;\n        &lt;Entry Text=\"{Binding CustomerEmail}\"\/&gt;\n    &lt;\/StackLayout&gt;\n    &lt;Button Command=\"{Binding OrderTShirt}\"\/&gt;\n&amp;lt\/ContentPage&gt;<\/code><\/pre>\n<p>Easy!<\/p>\n<p>But we&#8217;ve accidentally made a mistake in our XAML&#8230; Can you spot it?<\/p>\n<p>We&#8217;ve put all of our controls directly inside the <code>ContentPage<\/code> instead of a view group such as a grid or stack layout. If we ran our app, we&#8217;d only see our image control! This is a common and easy-to-make mistake when creating a new screen that causes a hard-to-find runtime bug.<\/p>\n<p>MFractor&#8217;s <a href=\"http:\/\/docs.mfractor.com\/code-analysis\/csharp\/xamarin-forms\/\" target=\"_blank\">XAML analyzer<\/a> detects this bug and marks it as a code warning directly inside our XAML editor. Now, instead of having to run our app to discover the bug, it&#8217;s clearly highlighted in the editor and we can hover over it to view the issue in detail:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/content-page-error.png\" alt=\"This content page has multiple children.\" width=\"600\" height=\"284\" class=\"aligncenter size-full wp-image-32522\" \/><\/p>\n<p>MFractor also offers a solution to this issue; by right-clicking on the affected code and selecting <em>Encapsulate content with StackLayout<\/em>, we can wrap all of <code>ContentPage<\/code>&#8216;s children with a stack layout to quickly resolve the bug:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/fix-content-page.gif\" alt=\"Fixing the multiple children in content.\" width=\"600\" height=\"400\" class=\"aligncenter size-full wp-image-32514\" \/><\/p>\n<p>MFractor offers over fifty XAML code inspections that detect everything from missing controls to missing view model bindings to value conversion type flow issues.<\/p>\n<p>By highlighting code issues in the editor, MFractor prevents issues from appearing at compile time or even worse, runtime. This saves us precious development time so we can spend time writing code instead of fixing bugs.<\/p>\n<p>For more documentation MFractors XAML analysis, see:<\/p>\n<ul>\n<li><a href=\"http:\/\/docs.mfractor.com\/code-analysis\/xaml\/#contentpage-has-multiple-direct-children\" target=\"_blank\">Detecting a content page has multiple, direct children.<\/a><\/li>\n<li><a href=\"http:\/\/docs.mfractor.com\/code-actions\/xaml\/fix\/#encapsulate-content-page-children-with-stacklayout\" target=\"_blank\">Fixing a content page with multiple, direct children.<\/a><\/li>\n<\/ul>\n<h3>Adding An Image Logo<\/h3>\n<p>Next, let&#8217;s add an image logo to our page by setting the <code>Source<\/code> property of our image.<\/p>\n<p>Unfortunately, this image doesn&#8217;t yet exist in our iOS or Android project resources, so it wouldn&#8217;t appear when we run our app.<\/p>\n<p>MFractor&#8217;s missing image inspection detects this bug. We&#8217;re told through code issues that the image is missing from our iOS and Android apps, and we can simply press <code>Alt<\/code>+<code>Return<\/code> on the issue to import the missing image!<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/import-image.gif\" alt=\"Importing a missing image reference.\" width=\"650\" height=\"433\" class=\"aligncenter size-full wp-image-32519\" \/><\/p>\n<p>Too easy! We can also hover over the image reference and view our freshly imported image in MFractor&#8217;s image tooltip.<\/p>\n<p>To learn more about MFractor&#8217;s image tooling for Xamarin.Forms, see:<\/p>\n<ul>\n<li><a href=\"http:\/\/docs.mfractor.com\/code-analysis\/xaml\/#detect-missing-image-in-linked-android-projects\" target=\"_blank\">Missing image detection.<\/a> (Professional Only)<\/li>\n<li><a href=\"http:\/\/docs.mfractor.com\/code-actions\/xaml\/fix\/#import-unresolved-ios-image-reference\" target=\"_blank\">Importing images from your XAML.<\/a> (Professional Only)<\/li>\n<li><a href=\"http:\/\/docs.mfractor.com\/code-actions\/xaml\/navigate\/#image-tooltips\" target=\"_blank\">Image tooltips.<\/a><\/li>\n<\/ul>\n<h3>Create Our View Model<\/h3>\n<p>Next, let&#8217;s create the view model for our page.<\/p>\n<p>Instead of manually creating the view model class and then writing out our bindings, MFractor makes this dead simple.<\/p>\n<p>Just right click anywhere in the XAML page and select <em>Generate a new ViewModel for XAML view<\/em>:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/generate-view-model.gif\" alt=\"Generating a new view model from a page.\" width=\"650\" height=\"433\" class=\"aligncenter size-full wp-image-32516\" \/><\/p>\n<p>MFractor will check all data-bindings in the page, generate a new class named <code>MyTShirtViewModel<\/code>, and then implement all the data-bindings into the view model as public properties. It will even generate a command stub for the buttons <code>OrderTShirt<\/code> command!<\/p>\n<p>MFractor will honor the <code>Page<\/code> and <code>ViewModel<\/code> naming convention when generating new view models. It will also consider the <code>MyTShirtPage<\/code> and <code>MyTShirtViewModel<\/code> associated through this naming convention.<\/p>\n<p>Voila! In a very short amount of time we&#8217;ve built the shell of our T-shirt app, ready for the app logic to be written.<\/p>\n<p>To learn more about MFractor&#8217;s view model tooling for Xamarin.Forms, see:<\/p>\n<ul>\n<li><a href=\"http:\/\/docs.mfractor.com\/code-actions\/xaml\/generate\/#generate-new-view-model\" target=\"_blank\">Generating a view model.<\/a><\/li>\n<li><a href=\"http:\/\/docs.mfractor.com\/code-actions\/xaml\/navigate\/#mvvm-navigation\" target=\"_blank\">Navigating between a view and ViewModel easily.<\/a><\/li>\n<\/ul>\n<h2>MFractor for Xamarin.Android and C#<\/h2>\n<p>MFractor isn&#8217;t just for Xamarin.Forms developers, you can also supercharge your Xamarin Native development with a suite of very useful tools for Xamarin.Android and C#.<\/p>\n<h3>For Xamarin.Android<\/h3>\n<p>Use resource tooltips to view in-depth information about a particular Android resource and then easily jump it:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/goto-resource.gif\" alt=\"Android resource tooltips and go-to resource.\" width=\"600\" height=\"400\" class=\"aligncenter size-full wp-image-32517\" \/><\/p>\n<p>You can also use Resource IntelliSense to build your resource files quickly:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/intellisense.gif\" alt=\"Using MFractors Android Resource IntelliSense.\" width=\"600\" height=\"400\" class=\"aligncenter size-full wp-image-32521\" \/><\/p>\n<h3>For C# (Premium Only)<\/h3>\n<p>Bulk create missing base class constructors:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/generate-base-constructors.gif\" alt=\"Generating base class constructors.\" width=\"600\" height=\"400\" class=\"aligncenter size-full wp-image-32515\" \/><\/p>\n<p>Use the Android C# API code analysis to find tricky Android issues, such as missing views in a layout:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/code-inspections.gif\" alt=\"Android layout usage code inspection.\" width=\"600\" height=\"400\" class=\"aligncenter size-full wp-image-32512\" \/><\/p>\n<h2>Get MFractor<\/h2>\n<p>Now I bet you&#8217;re wondering just how you can get MFractor for Visual Studio for Mac.<\/p>\n<p>It&#8217;s simple! To access MFractor Lite for free, just <a href=\"http:\/\/addins.mfractor.com\/MFractor.Installer.zip\" target=\"_blank\">download the MFractor.Installer app<\/a>, run it, and activate MFractor using your email address:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/installation.gif\" alt=\"Installing MFractor for Visual Studio Mac.\" width=\"600\" height=\"431\" class=\"aligncenter size-full wp-image-32520\" \/><\/p>\n<p>If you&#8217;d like C# tooling, advanced Xamarin.Forms tools (such as image analysis), or the ability to change the code MFractor creates, you can purchase an MFractor Professional license.<\/p>\n<p>MFractor Professional is $299AUD per user per year; licenses can be purchased at <a href=\"https:\/\/https:\/\/https:\/\/www.mfractor.com\/buy\" target=\"_blank\">https:\/\/https:\/\/https:\/\/www.mfractor.com\/buy<\/a>.<\/p>\n<h2>Summary<\/h2>\n<p>In this article, I&#8217;ve only started to scratch the surface of how MFractor can help you be a more productive Xamarin developer. There are still many useful tools you can use, including control importing, value conversion tooling, or generating XAML code snippets.<\/p>\n<p>If you&#8217;d like to learn more about MFractor, reach out to me on <a href=\"https:\/\/twitter.com\/matthewrdev\" target=\"_blank\">Twitter<\/a>, <a href=\"https:\/\/xamarinchat.slack.com\/\" target=\"_blank\">Slack<\/a>, or via<a href=\"mailto:hello@mfractor.com\" target=\"_blank\">email<\/a>.<\/p>\n<p>Matthew Robbins, Creator of MFractor\t\t<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is a special guest post from Matthew Robbins at MFractor. You can find him on Twitter at @matthewrdev. Let&#8217;s say you&#8217;re a Xamarin.Forms developer and you&#8217;re starting out on a brand new app: a single screen, T-shirt ordering app. You&#8217;ve got the specs, the backend is mostly done, and all that&#8217;s left is for [&hellip;]<\/p>\n","protected":false},"author":1936,"featured_media":32520,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[4],"class_list":["post-32443","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","tag-xamarin-platform"],"acf":[],"blog_post_summary":"<p>This is a special guest post from Matthew Robbins at MFractor. You can find him on Twitter at @matthewrdev. Let&#8217;s say you&#8217;re a Xamarin.Forms developer and you&#8217;re starting out on a brand new app: a single screen, T-shirt ordering app. You&#8217;ve got the specs, the backend is mostly done, and all that&#8217;s left is for [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/32443","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/users\/1936"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=32443"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/32443\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=32443"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=32443"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=32443"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}