Enhanced Xamarin Development With MFractor

Matthew Robbins

This post was guest authored and contributed by Matthew Robbins. Matthew is a Microsoft MVP and the founder of MFractor, incredible Xamarin tools for Visual Studio Mac.

MFractor

MFractor is a powerful Visual Studio for Mac extension to streamline the development of your Xamarin applications. By improving many common Xamarin workflows, MFractor can save a significant amount of development time and effort over the course of your project.

In this article, we’ll explore three of MFractors handiest features, the XAML editor, Image Manager, and Font Importer. We will also discuss how we can leverage them to save time and effort when building our Xamarin apps. Let’s get started by taking a look at the XAML editor.

XAML Editor

Have you ever created a data-binding and ran your application only to discover you misspelt the property name? It’s an annoying mistake and let’s be honest, we’ve all done this! Wouldn’t it be great if our ViewModel properties were included IntelliSense to prevent this?

ViewModel property IntelliSense is one of the many features in MFractors XAML editor. By automatically detecting the ViewModel for a XAML file, MFractor suggests your ViewModels properties in IntelliSense. It even lets you generate properties and commands onto your ViewModel.

MFractor checks binding expressions for many common issues, for example, does that property exist in the ViewModel? Additionally, it can provide detailed binding tooltips and includes navigation shortcuts to let you quickly move between your View and ViewModel. The XAML editor also includes dozens of additional completions, 70+ XAML inspections, insightful tooltips, navigation shortcuts and 50+ XAML refactorings to make editing XAML faster and easier.

For example, MFractor can suggest image assets, static and dynamic resources, grid rows and columns and much more. Want to see what image is being used in XAML? Simply hover over the image to see a preview.

MFractors XAML editor is available for free in MFractor Lite; use it in up to 4 XAML files per day!

Image Asset Management

Imagine that your designer has just handed you a bunch of image assets. Now you need to add them to your Android and iOS projects. We’d have to copy each image into the different density folder, then manually add them one by one into our projects. This highly manual process is a big and expensive time sink in app development.

To improve this workflow, MFractor’s Image Importer can generate new images for the different densities from a source image. Choose a source image and the Image Importer will create a new version of that image for each density. It will then place them into the correct folders and add them to our Android and iOS projects.

The Image Importer is just one of many features included in MFractors Image Manager. A useful tool to simplify image resource management for your iOS and Android projects. Access the Image Manager by going to the MFractor menu in the top menu bar and choosing Manage Image Assets.

The Image Manager gives a ‘birds-eye’ view of all the images across your application. Groups them by name in the left list and displays a preview of that asset. Thus enabling you to visually explore the images in your projects.

The Image Manager can:

  • Delete all occurrences of an image from your app. Right click on an image, choose Delete and MFractor will remove all densities from your Android and iOS projects.
  • Optimise your image assets using TinyPNG; this can save 30-70% of the final size of each image in your app.
  • Show you a preview of an image asset when you are choosing an image through XAML IntelliSense.
  • Open image assets within the IDE. Double click on an Android or iOS image to open it in the Image Manager.
  • And much, much more!

You can learn more about the Image Manager in our Simplified Image Asset Management for Xamarin Apps blog post.

The Image Manager is available in MFractor Professional.

Font Importer

Custom fonts are one of the backbones of modern app development. They are critical to an apps branding and fonts like FontAwesome are often used for iconography.

To use a font in Xamarin.Forms, we include adding the font to our Android and iOS projects. Update the Info.plist for iOS to use the FontFamily property and apply the fonts in XAML. All in all, it’s a lot of manual work. It’s very easy to miss a step and then spend an hour debugging to fix it.

Instead of doing this fiddly work, we can use MFractors Font Importer to add a ttf or otf file into our Android an iOS projects. This handy tool adds the new font in each project, creates an Info.plist entry in any iOS projects, and generates the font lookup XAML ready for us to use:

Access the Font Importer through the top MFractor menu. Then select -> Import, Font.

You can learn more about the Font Importer in our Using Custom Fonts In Xamarin.Forms blog post. The Font Importer is available in MFractor Professional.

Summary

MFractor is available in two flavours; Lite (free) and Professional (paid).

MFractor Lite is a fantastic value by enabling our XAML Editor in four files per day. Use MFractors XAML IntelliSense to gain ViewModel property code completion. Use 70+ code inspections to spot a range of common issues, 50+ code actions, detail tooltips and navigation shortcuts.

If you want even more powerful features, upgrade to MFractor Professional to use:

To get MFractor, open the Extension Manager using the Extensions item in the main Visual Studio menu. Then, under “Gallery and IDE Extensions”, select MFractor to install. To learn more about MFractor, head to https://https://www.mfractor.com.

PS: Use the discount code MFRACTOR-101 to take 10% off MFractor Professional 😉

0 comments

Discussion is closed.

Feedback usabilla icon