This is a special guest post from Matthew Robbins at MFractor. You can find him on Twitter at @matthewrdev.
Introducing Visual Studio for the Mac Hi, this is Jesse Liberty for Pluralsight, and this is Visual Studio for Mac. In this first module we're going to introduce Visual Studio for Mac and we're going to talk about where you get it, how you download it. Visual Studio for Mac is a new member of the Visual Studio family for mobile-first, cloud-first development. This video preview shows how to get started with Visual Studio for Mac and explores its. MFractor is now available for Visual Studio Mac! MFractor for Visual Studio Mac is a complete port of MFractor for Xamarin Studio; all the tooling that you enjoyed like XAML analysis, code generation or Android navigation improvements is available in MFractor for Visual Studio Mac. The Visual Studio for Mac‘Compatibility is a key focus of Visual Studio for Mac. Although, it’s a new product and doesn’t support all of the Visual Studio project types, for those it does have in common it uses the same MSBuild solution and project format.
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
File
-> New Solution
and get started. Exciting times!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.
- An
Image
where our apps logo will sit. - A
Label
andEntry
for our customers name. - A
Label
andEntry
for our customers email address. - A
Button
our customer can click to order their t-shirt!
The XAML, complete with data binding, will look a little like this:
MyTShirt.xaml
2 4 6 8 10 12 14 16 | <ContentPage xmlns=“http://xamarin.com/schemas/2014/forms” xmlns:x=“http://schemas.microsoft.com/winfx/2009/xaml” <Image/> <Label Text=“Name: “/> </StackLayout> <Label Text=“Email: “/> </StackLayout> </ContentPage> |
Easy!
But we’ve accidentally made a mistake in our XAML… Can you spot it?
We’ve put all of our controls directly inside the
ContentPage
instead of a view group such as a grid or stack layout. If we ran our app, we’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.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
ContentPage
‘s children with a stack layout to quickly resolve the bug: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
Source
property of our image.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
Alt
+Return
on the issue to import the missing image!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:
- Missing image detection. (Professional Only)
- Importing images from your XAML. (Professional Only)
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
MyTShirtViewModel
, and then implement all the data-bindings into the view model as public properties. It will even generate a command stub for the buttons OrderTShirt
command!MFractor will honor the
Page
and ViewModel
naming convention when generating new view models. It will also consider theMyTShirtPage
and MyTShirtViewModel
associated through this naming convention.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#.
For Xamarin.Android
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)
![Mac Mac](/uploads/1/2/6/0/126096885/505938473.png)
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:
Get MFractor
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:
Introducing Visual Studio For Mac Tfs
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.
Summary
![Introducing Visual Studio For Mac Introducing Visual Studio For Mac](/uploads/1/2/6/0/126096885/288397093.png)
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 Download
Matthew Robbins, Creator of MFractor