This is a special guest post from Matthew Robbins at MFractor. Connect to a repo in visual studio for mac. You can find him on Twitter at @matthewrdev.
Mikayla Hutchinson introduces Visual Studio for Mac, outlining the evolution of the Xamarin Studio IDE into a true mobile-first, cloud-first development tool for.NET and C# that brings the Visual Studio experience to the Mac.
Let’s say you’re a Xamarin.Forms developer and you’re starting out on a brand new app: a single screen, T-shirt ordering app. You’ve got the specs, the backend is mostly done, and all that’s left is for you to click
• Paste the license request information you received from the customer into the Paste License Request box. Leave the Locking option set to Machine. After the request is loaded, the license information will be displayed in the License to activate section. Activate visual studio for mac. • Click Load.
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.
However, the development process can be made easier by using MFractor, a productivity extension for Visual Studio for Mac.
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.
So, let’s make our T-shirt app and learn how to make our app development easier with the help of MFractor!
Making The App
We’ll start by creating a new project for our app, MyTShirt and adding some controls to our main page, MyTShirtPage.xaml.
The XAML, complete with data binding, will look a little like this:
But we’ve accidentally made a mistake in our XAML… Can you spot it?
We’ve put all of our controls directly inside the
MFractor’s XAML analyzer 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’s clearly highlighted in the editor and we can hover over it to view the issue in detail:
MFractor also offers a solution to this issue; by right-clicking on the affected code and selecting Encapsulate content with StackLayout, we can wrap all of
MFractor offers over fifty XAML code inspections that detect everything from missing controls to missing view model bindings to value conversion type flow issues.
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.
For more documentation MFractors XAML analysis, see:
Adding An Image Logo
Next, let’s add an image logo to our page by setting the
Unfortunately, this image doesn’t yet exist in our iOS or Android project resources, so it wouldn’t appear when we run our app.
MFractor’s missing image inspection detects this bug. We’re told through code issues that the image is missing from our iOS and Android apps, and we can simply press
Too easy! We can also hover over the image reference and view our freshly imported image in MFractor’s image tooltip.
To learn more about MFractor’s image tooling for Xamarin.Forms, see:
Create Our View Model
Next, let’s create the view model for our page.
Instead of manually creating the view model class and then writing out our bindings, MFractor makes this dead simple.
Just right click anywhere in the XAML page and select Generate a new ViewModel for XAML view:
MFractor will check all data-bindings in the page, generate a new class named
MFractor will honor the
Voila! In a very short amount of time we’ve built the shell of our T-shirt app, ready for the app logic to be written.
To learn more about MFractor’s view model tooling for Xamarin.Forms, see:
MFractor for Xamarin.Android and C#
MFractor isn’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#.
Use resource tooltips to view in-depth information about a particular Android resource and then easily jump it:
You can also use Resource IntelliSense to build your resource files quickly:
For C# (Premium Only)
Bulk create missing base class constructors:
Use the Android C# API code analysis to find tricky Android issues, such as missing views in a layout:
Now I bet you’re wondering just how you can get MFractor for Visual Studio for Mac.
It’s simple! To access MFractor Lite for free, just download the MFractor.Installer app, run it, and activate MFractor using your email address:
If you’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.
MFractor Professional is $299AUD per user per year; licenses can be purchased at https://www.mfractor.com/buy.
In this article, I’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.
If you’d like to learn more about MFractor, reach out to me on Twitter, Slack, or viaemail.
Visual Studio For Mac Tutorial
Matthew Robbins, Creator of MFractor