The Xamarin Blog

The Xamarin Show 18: MFractor – Incredible Tools for Xamarin with Matthew Robbins

The Xamarin Show 18: MFractor – Incredible Tools for Xamarin with Matthew Robbins
5 (100%) 1 vote
(Video Transcript)
Welcome back everyone to The Xamarin Show. I’m your host, James Montemagno. And I’m so excited. All the way from Australia, my good, good friend and fan, and friend of the show, Matthew Robbins is with me. How’s it going, Matthew?

>> Good there, James, how are you?

>> I’m doing fantastic, I mean, you made the journey all the way from Australia, enjoying beautiful sunshiny Seattle, I’m sure.

>> Yeah, it was a bit of a temperature drop,but it’s all right.

>> That’s about 80, 90 Fahrenheit, I assume and it’s-

>> Over a 100.

>> Over a 100.

>> Yeah.

>> Hot.

>> It was very, very warm.

>> Yeah, so it’s nice and a balmy 30, 40 degrees here.

>> Yes.

>> I don’t think it rained too much.

>> Just a little bit but

>> A little bit?

>> I’m from Melbourne so I’m used to it.

>> Okay, perfect. Beautiful. So today, I’m super excited just to have you on. You’ve been working on some amazing tooling for Xamarin Studio. I’ll hopefully see you in Visual Studio for Mac. And once I saw it and I installed it in and I played around it, I’m like I gotta have you on the show. I knew you’re in Australia.

>> Yeah. So fly over, no big deal. So you made it, I’m happy.

>> Yeah.

>> Well, any excuse to travel, really.

>> That’s true.

>> And Australians, well, we know Australians love to travel.

>> Everywhere I go, I love to travel, too. I’m always running into Australians all the time.

>> Yeah. It’s a thing. I don’t know what it is. I just love life.

>> Yeah.

>> So first off, tell the people a little bit about yourself and what you’re gonna show today.

>> Yeah, so my name is Matthew Robbins. I am a Xamarin and Microsoft NDP. And I’ve been working in the Xamarin Space for roughly four, five years now. Over the course of this time, I’ve built many, many apps, so from Xamarin ADF to Xamarin forms. And roughly two years ago, I decided to stop building tooling to Xamarin. I wanted to fix some workload problems that I had. It originally just started out as an idea that I would be able to right click on a layout in Android and I could pull in all the controls and generate all the C sharp. So that’s the original idea,

>> Yeah.

>> I still haven’t done it but I’ve done an awful lot since then, mostly centered around Xamarin Forms and just trying to improve the way we build apps.

>> Yeah.

>> I really love the idea, Frega on our podcast Merge Conflict we did an entire episode on ID extensions. And kind of how cool is it that you can take these crazy ideas like developers like tons and ton of times on, then we can really craft tools that we care about for our workflow?

>> No.

>> And then you start to realize that, it’s not just like everyone else also want these things, this little the missing piece is that are kinda like these corner cases at first,

>> Yeah.

>> And then sorta turn into but what if it did, what if it did this? That’s how I started with templates originally I was like man I like our templates but I don’t love our templates, but what if I made our own templates and I think it’s so cool that we have this ability to do it and not a lot of developers know how to do it but. I work mostly with Visual Studio extensions.

>> Yeah.

>> You did Xamarin Studio extensions.

>> Yes.

>> Is that correct? Yeah, and how was that journey?

>> A very, very steep learning curve, to be perfectly honest. That the actual extension model is not very well documented, so you end up reading and understanding the source code very well. I feel like I’m so much better as a developer just because I had to tear apart mono develops actually getting everything to work.

>> Yeah.

>> So it’s difficult but it’s really, really rewarding.

>> Yeah. I like that so as part of the story I’ve heard a few times but the nice thing is that Xamarin Studio is open source.

>> Yeah.

>> Right?

>> Via model develop which is from that long lineage of open source so, you just go to the GitHub page or wherever it’s hosted and just dived into the source code, or did you find some other sample projects out there?

>> So my introduction to this was

>> I start off on the mono outsource code just poking around. There’s a sample where you generate a date time into your source code, so I started off with that and just got an idea of how it all worked. Then I reached out to Michaela Hutchinson,

>> Mm-hm.

>> Who is one of the project managers at Xamarin.

>> Mm-hm.

>> And I said I wanna do this stuff

>> Yeah.

>> And she’s gonna pointed me down the right track. And it just escalated from there, so

>> Yeah and it turned into what you’re gonna be showing today which-

>> I did!

>> Scratch of MFracture.

>> That’s correct

>> Yes, which comes from?

>> So it’s a mashup of the word Monar and refractor

>> Okay.

>> So back in the day, about two years ago, I’m struggling for a name and I’m just like what about if I just mangle these two words and see what happens.

>> Beautiful.

>> Yup.

>> So what is MFractor, essentially? In a nutshell, what’s your 30-second elevator pitch of it?

>> In a nutshell, it’s a collection of incredible tools in Xamarin Studio. So it kind of focuses on forms development, so it adds Xamarin analysis, navigation shortcuts, refractoring, code generation. A whole slew of very, very useful tools.

>> Okay yeah. And then do you do anything that’s not Xamarin forms like some iOS or Android stuff in there?

>> I do do some Android stuff. So my original focus was on Android but I pivoted into forms because that’s what I’ve been working in for the last year and a half.

>> Yeah.

>> So that’s resource analysis, resource intelligence, some navigation improvements, there’s a few of this bases.

>> Yeah.

>> I feel like the IDs themselves have done a really good job with rasms supported you in the analyzing of it. But when it came to XAML analysis,

>> Yeah.

>> Even in general, even when I did Windows, about XAML analysis, it was good, but not always exactly what I wanted. You know to say no one was doing a codegen really from I know that’s out there and those are kinda those cool extension points. So I’m super excited to see what you have, do you just wanna jump into it?

>> Sure. Yeah.

>> Yeah where do I even get it from, this is the logo right?

>> Yes this is the logo. To get it you go to www.mfractor, m-f-r-a-c-t-o-r

>> And we’ll put it in the shared notes below yep.

>> You can either press the big blue download now button.

>> Nice and easy.

>> Yep, and that’ll take you to it and then just click on the download mfractor link. Okay.

>> And that will download it for you.

>> So this is an mpac file that’s the

>> That’s the extension format for a modern develop patent.

>> Okay.

>> Or actually Visual Studio to Mac editor actually.

>> Got you yeah so if you’re probably used to visual studio they have the vzx, v-s-i-x

>> Yeah.

>> Very similar essentially this is the pack.

>> Yeah. It’s basically like a bundle with some like manifest information.

>> Okay, so once you have it then what do you do?

>> Then we can jump on over to mfractor’s documentation website, so you can either click on the link or we can enter it manually, but there’s instructions here for setting it up and installing it. So we can go in.

>> Learn how to get it, learn how to install it. So currently, you have to install it manually.

>> Okay.

>> Which would involve, if we go into Xamarin Studio, we go to the top menu. So the Xamarin Studio menu, then click Add-ins, and then there’s Install from file.

>> Yeah.

>> And then, we’ll just browse to where the impact is

>> And it was just install.

>> Got it. And people may have never even seen this dialogue before this is kind of so there is this extension manager that’s on there and then there is a lot of stuff in there already so I know

>> There is yeah.

>> John Dick has my favorite he has like an obliterate folder, extension.

>> Yeah.

>> That bends your so

>> So normally if you want to you could have it come up in here or just literally, if you’re developing one, you just install from file and it should sync.-

>> Yeah, so if you wanna, if you’re developing and you want to test it, you’d make the impact yourself, and then install it like a user would. It’s a great way of just testing it.

>> Very cool.

>> Once it’s installed it will add its repository for you.

>> Cool.

>> And that would just comes in as part of the updating system. So you’ll get free updates.

>> So I don’t have to- once I install it once I don’t have to worry about it again.

>> Yeah. Xamarin Studio daily pulls the remote end points.

>> Nice.

>> So it just checks for an update each day.

>> Okay. Very cool.

>> Yeah then it’ll just work.

>> And as it start now do I have to close Xamarin Studio do I have to do anything like that or?

>> You shouldn’t need to, I have seen it work without restarting Xamarin Studio but I would recommend restarting Xamarin Studio

>> Yeah.

>> Just cuz it’s best practice, right?

>> Yeah.

>> Even in Visual Studio and Xamarin studio I always. Shut it down real cuz there’s a lot of things happening over there. But you already have it installed.

>> I do.

>> And what are you gonna show us here today? What is this? I see some PCI stuff.

>> Yeah. Mostly we’ll go through the folk here [INAUDIBLE] zone. So that’s navigation. Code analysis, code generation and refactoring.

>> Yup, let’s do it.

>> Yeah, so we’re just gonna work with XAML document and just gonna walk you through the workflow improvements.

>> Okay.

>> Cool.

>> Let’s do it, I’m in.

>> Alright.

>> I see some XAML, I like XAML,

>> Yup.

>> Big XAML fan,

>> Yeah.

>> And the content page, I’m in.

>> Cool, so the immediate thing that you’ll notice here is we have this little SQL here.

>> Mm-hm.

>> So when Mfractor detects those XAML document loads up it injects its analyzer.

>> Okay.

>> What this does is, it inspects your document for a whole range of issues and there’s a full list of them up here actually. So we can go into the documentation website and then the analyzes of menu. And here has the full list to what Mfractor checks for.

>> Wow.

>> So this currently 46 different checks and that queries as I cancel them.

>> Got it.

>> So I guess the summary of this is every time I get stung by something and I in fact to use more benefit for my pain.

>> Got it. Make sounds. Yeah.

>> So. Yeah.

>> Very cool.

>> So what this is doing here it’s the namespace analyzer is checking for namespace usages.

>> Mm.

>> And it’s going through your document analyzing or inspecting for usages of the local namespace and then imitating the top point.

>> So, is this very similar to problem like the using statement analyzer,

>> Yeah.

>> That you developer used to, where in bringing a new document has an 18,000 different using statements,

>> Yeah.

>> But you only use two of them. So you just right click and say remove or add stuff in, and you can reorganize and things like that. [CROSSTALK]

>> Yeah it really makes things much, much easier to work with.

>> You don’t wanna load up extra name spaces, if you don’t have to right?

>> Yeah it’s bloat to your document you don’t need it.

>> Got it.

>> Next thing, it would be the navigation. So one of the first things that I’ve added was tooltips. So if you wanna view more information about anything in the XAML document, you can simply hover over any element, and it pulls out the .NET start tooltip with the class information, the documentation. And it also tells you that you can command dates, go to declaration or you can right click and do go to XAML symbol.

>> Cool

>> And so that jumps you to the corresponding symbol.

>> Very nice.

>> And that’s very useful for just jumping around and.

>> Yeah.

>> It just like navigating more effectively.

>> You wanna see what that property means or what it does, cuz as you’re typing it I thing something, does anything pop up when you’re type it? When you just type in content page?

>> I don’t believe it does.

>> If you’re going to label.


>> You get a little bit, but you don’t get the full thing. So if you do a content view or even that label you can hover over anything.

>> Yeah so if I hover over the label, it brings out the full inheritance chain.

>> Got it.

>> The summary, it says that you can jump to the declaration as well.

>> Yeah, very cool.

>> Additionally there’s a few other pieces of information that can be injected in a tool tip, so if I had an image for instance then I put connected the source up, and I put it to I think it’s icon.png.

>> There it is yeah. Cool.

>> So mfractor behind the scenes will inspect through your linked Android and iOS projects, and provided it can resolve the image name. It’ll pull out that image and rendering tool tip, and that’s really useful for actually saying what you’re working with.

>> Yeah. Yeah.

>> Look, I know there’s a lot of times, actually I don’t know there’s an image refe- [CROSSTALK]

>> Did I name it correctly in there? Yeah. Often I have so many different folders. Did I name it correctly? Did it actually in there? That’s nice.

>> And one last thing is if you did a color for instance, we can hover over the color link and render the color as well.

>> Very nice.

>> That’s just a few of a tool tip improvements. Another navigation improvement that I’ve really worked hard to improve. So in Xamarin Forms, you end up cycling between your view model, you curve behind and your view a lot. And it’s a big time sink. So one of the tooling improvements, is the ability to cycle through those three cool files easily.

>> Got it, like a for you code. [LAUGH]

>> Yeah, yeah. So if you right click, you can jump between the code behind in the view. So we can just click on that, and it would jump into the code behind. [INAUDIBLE]

>> Is there code behind?

>> There is.

>> This one, okay.

>> Yeah, it’s all right. And Roslyn made it to collect the information.

>> Got it.

>> So, quickly jump backwards and forwards, between our two core classes. We can also do this for our view model. So I will quickly generate some code generation capabilities. So if we right click just anywhere in the page-

>> Anywhere in the page.

>> We can select implement view model. And so that will take the naming convention for that page. So, because it’s called HelloMFractor page, it considers the page to be a view. So it’ll drop the page off the end, use the whole MFractor, and then append the ViewModel, in the ViewModel. And so that’s just a really quick way of building a ViewModel for your page.

>> Yeah, I like that. So usually when I go in, I right click add a page, add a page, add a page. And I scaffold my pages and then I literally go add new C#, add new C#, add new C#. [LAUGH] I’m gonna have to rename them all and make sure that they’re matching, cuz I’m a stickler for names. But this one just does it for you automatically. What does this PropertyChanged.ImplementPropertyCh- anged [INAUDIBLE]

>> So because I’ve got Fody’s property waiting in store.

>> [CROSSTALK] What is fody property weaving.

>> So it’ll inject the i notify property changed event into your code for you, so you would derive from i notify.

>> Property change [CROSSTALK]

>> Property change.

>> We’ve all done this or have a MVVM helper class, that does this type of thing.

>> Yep.

>> So rather than doing all this work, Fody will weave that in for you when you have this attribute on the root class. [CROSSTALK]

>> So now is that something that you. Including Mfractors at a separate download.

>> It’s a detection.

>> I think I got it.

>> So when you have Fody included, it will inject that for you.

>> Very nice.

>> Otherwise, it would just strip out the property change, and you’d just have a class.

>> Got it, got it. That makes sense.

>> But I use because I dislike all that manual work.

>> Yeah, perfect, cool.

>> So because we’ve got a view model now and a page and a code behind. The MVVM cycling shortcuts are now completely active. So we could jump from our view model to our view. So it’s a very, very quick of just getting around or we could jump from our view to our view model. And so this solution’s fairly small, it’s the actual cost of finding this stuff is not very hard. But when you start getting into bigger apps, so for instance at my main job we have an app with 50 60 pages, a whole bunch of different controls. We do view models of view cells, it gets out of hand really quickly. So provided you’ve named thing consistently. In fact, it lets you cycle between those files and find things really quickly.

>> Now is the page attribute and the view model’s pretty much, what if someone did View at the end instead of Page? Are there a few different hot keywords?

>> So the two main keywords is Page and View. So if you have View Page, it’ll work. So if we can jump back into there, and because we’ve got a view model now, we can start building up some properties.

>> Yeah, like that.

>> So the easiest way to do that is if we just take the other and we can make a binding.

>> Maybe you don’t know about data binding. I’ll put some links and then show notes to my episode, when I’ve talked all about what this Binding Message means essentially. [LAUGH]

>> Yeah. So what we’re saying here is we’re connecting the text property on a label, to a message property on our view model.

>> Yeah

>> Historically, you would not know that this was a potential issue just at the moment. So that message probably does not exist on your Gmobile just yet.

>> Now does it know about my view model?

>> Yes, it’s inferred by the [INAUDIBLE] conventions with what your intended use is.

>> Got it. Cuz you can also put a binding context inside of this.

>> Yeah.

>> Too.

>> Yeah. So we can manually Specify the Binding Context.

>> Got it. And then it would use the binding context, instead of the inference I guess.

>> Yeah, and then infraction would own of this one rather.

>> Got it.

>> So if I use the local name space, that section would disappear. We can add a ViewModelLocator and we can link it up. There’s actually a good opportunity to do it [INAUDIBLE] to demonstrate the code generation. Again, MFractor evaluates expressions. And it will analyze to see if classes exist, and assemblies in name spaces. And we can generate that entire class with the property.

>> Cool.

>> So that takes out a lot of work. Otherwise you’d be making that file through a right click, and then adding it, and coding everything out ourselves. But we’ll just link this up manually.

>> Got it okay, so it’ll just create some new FP models for it. And view model locator is a nice way of statically saying that, I used to do this a lot with MVVM light back in the day with. Essentially is the same. Here is the static class, this page belongs to this thing, I don’t wanna have to create new ones, just go create one new whenever I call it, essentially.

>> Yeah, so this is just the-

>> Like design time, almost.

>> Yeah, convenience patent.

>> Then boom it goes away it knows that you’ve used everything.

>> Yeah and because it analyzes expressions and it consumes them, we can actually hover over that expression. And it will pull out the information and give us the ability to also jump to it. So we can click on that and jump to.

>> Nice. So that’s another time saver, cuz the other way would be we’d have to find it.

>> Find it, work on my view model yeah.

>> And we’ve got all these collisions in here, it’s a mess, it’s hard to find things. But back to the binding.

>> Yeah, yeah I totally side tracked us here.

>> Small segway but it’s a good one. So, MFractor does implicit resolution. If we didn’t specify the binding context it would, in the same way for the navigation that considers the view model and the page related, because of the hovering factor component, it does the same thing for analysis.

>> Got you.

>> So if you’ve named things similarly. It assume a default money context, and enables analysis for all bindings. So in this case, it’s consumed the binding expression and it’s inspecting for a message properly on our view model.

>> Got it. It doesn’t exist.

>> Yeah.

>> It tells it does not find it.

>> Yeah.

>> No boy no.

>> So this is really useful because otherwise when we run it, we actually don’t know about this error until we run something. So we’d have to start our app up, wait for the compilation, wait for the signal to boot or to deploy to the phone. Navigate through the pages. And then, eventually, with a binding expression, it’s not even gonna work. It won’t even crash.

>> Yeah, nothing will happen. Yeah, I find often, that you have compile-time XAML. So if you spell binding incorrect, let’s say, it’ll tell you that at error time. But it’s not inspecting your view model. It doesn’t know that link. And then, the binding is not. So, it’s just like I don’t know what to do, yeah.

>> Yeah, this way it adds some smarts to earn. And it just takes you out the potential for runtime issues.

>> I’ve seen this time and time again on my GitHub where I see like issues come up and they’ll be resolved by the creator like an hour later. I mistyped something. Yeah so, but it totally happens. I’ve been there, it’s okay. So part of this is like I hate getting stung by things at run time and I like to improve how we work so this is the whole point of this. So you see that we’ve got a little yellow squiggle beneath it, so there’s two different types of squiggles, you’ve got a red one which is. It’s an issue, but I can’t actually do anything about it. Just wanna let you know that something is gonna break.

>> Got it.

>> And the other squiggles are in fact, there’s an issue, but I can do something about that, so I can fix it. And the way to fix it is to just click on the span that’s yellow squiggled. So, I could just click on that, right click on that.

>> Okay.

>> And then go to fix, and I can automate a property in the message so that would be a vanilla property with etc etc and that’s it.

>> Yep.

>> Or I make the backing field if you like some logic to get behind it.

>> Sure. So, I’ll just make a property. And we’ll open up the ViewModel with an insertion point. And you just press enter.

>> Cool.

>> And MFractor will resolve the type information for you. So, it’s a string because the miss- It’s a string because the text It’s a string it’ll pull that out and then insert it in.

>> So, if you did one for the text color it would do a binding to the color, it’s a color, it knows the type is, it’s smart, it’s not just gonna be an object.

>> Yeah, it’s actually a good opportunity to demonstrate some refactoring.

>> Let’s do it.

>> If we did wanna bind the text color to something. And we wanted to preserve the aqua valley. We have two ways of doing that. We can either click on that and then ride at the BindIn expression, so on and so forth.

>> Yeah.

>> Make the property then wire it up.

>> Yeah.

>> In 2.8 I introduced a extraction of property binding or refactoring. So, you can just right click and go Refractor and we can extract it into a property binding.

>> Okay.

>> And we’ll just call that cuz we’re creative.

>> Yeah.

>> And then

>> Cool, look at that.

>> And then, if we jump back to the view

>> So, I’ve just done an update.

>> [LAUGH] Hot bits I like to say. But it’s there and it knows it.

>> Yeah, it knows it yep. And that’s nice because often I’ll put in some weird like I want to see values like pounds, 0058 whatever some caller inside of there.

>> Yeah.

>> But I really should be putting into my app.xml but sometimes I just wanna keep that value and then it will just at least create the backing field for me, which is really nice. Is that where with any property like the image source or like

>> Yeah.

>> Anything that can be bindable you can bind it.

>> Yeah.

>> Anything that has a bindable property component. So, there is the source property but there is also a SourceProperty name’s Property.

>> Property, got it.

>> Which is the bottom of property for the source. So, anything that has a bottom of property, correlation or is equal. Very equal.

>> Yeah. All right, so next up one of the phases that I did to clean up this cell, it’s name is phase refreshing.

>> Okay, yeah. I just restore that with the source editor. So, what we can do now is if we wanna rename namespace to our document. We can just right click on top declaration. And do transfer this to my app. And then, will rename. The XML declaration and also the my app declaration.

>> Yeah, it’s nice cuz often I start creating controls and I have like control, control, my controls, this other controls. You start bringing in a lot of third parties libraries that are in there.

>> Yeah, and it’s so easy accidentally import things a few times, so for instance if we had. Like the clr-namespace:HelloMFractor. And we have it as both local in my app. It’s a you don’t actually need it.

>> Yeah.

>> And so, we use the in here as well. So, I just set the BindingContext in here. And we’ve set that to local. We have three [INAUDIBLE] declarations of birth point, or the same thing. There’s a new fix in MFractor 2.9 that led to [INAUDIBLE] that let’s you compress them all to the same namespace.

>> Nice. Nice. >> So you can just Right-click and it will

>> Rename them all to whatever the namespaces that you want. That’s just the

>> Nice little touch.

>> Yeah, just keeping things clean basically.

>> Yeah.

>> Yeah and also like it’s so easy to overlook those things in your code.

>> Yeah.

>> Cuz you’re jamming on code and you’re like stop coding I’m doing this revision that revision I’m pulling in this

>> Control on that, control and then you copy code from one file to another file. [INAUDIBLE] And now, I have all this stuff. But you don’t realize it and then it’s just kind of bloat.

>> And then, eventually like, it gets out of hand. It starts looking messy and it’s a pain to maintain. On the maintenance note, some of the newer features that I’ve been adding on [INAUDIBLE]. So, for instance, you wanted to keep things aligned on separate lines or the same line. We can now right click on any node and you can, for instance, collapse them onto the same line. Or you could expand them all out into separate lines. You can do that on like the label, for instance. I’m a big fan of properties on new lines.

>> Yeah. So, if you just wanted to expand the mount into separate lines, does it a very, very simple collapse. And I’ll just add some more properties. So-

>> The font size.

>> I’m actually not doing anything. So, if we add like blue, automation id, level, things are misaligned at the moment, they’re out of order, so we can sort them. Then it reorders them, so that will do it based on name space, and then name by alphabetically. So it just keeps things tidy.

>> I like that.

>> We’ve also got some redundant white space there as well. So, if we wanted to, we could actually organize the whole document in one hit just to demonstrate how that works, I’ll just put things-

>> All randomly.

>> Put these out of line.

>> Yeah.

>> Used the same format. Any conventions of the split when it’s in separate lines. Then we can just tie it or hold off of it that is beautiful.

>> And it just keeps things clean. So, I’ve been using this on the app at my workplace. Just to, it just made things more readable.

>> Yeah, I like that.

>> Cuz it’s easy to fix things that drift.

>> It is, especially when people open up source code and different IDEs and different spaces versus tabs and, everyone should just replace tabs with spaces, but that’s just me. But how they debate it.

>> Yeah. There’s gonna be all the comments on this episode, it will be like tabs.

>> You’re starting another tabs versus spaces flame war.

>> Yeah, always. Classic.

>> Yeah, so I guess I’ll go into some more code generation.

>> Lets do it.

>> Something that I’ve been using quite a lot.

>> Is the ability to generate bindable properties.

>> Okay.

>> So, I have been doing a lot of refactoring.

>> Yeah.

>> I’ve been taking Xamel that’s reusable and converting to our own custom controls.

>> Sure.

>> So consider for instance that that label was going to be reusable throughout the app, and had some certain behavior, like it did a toast or something when you clicked on it. What we can do is we can make a new control. So, I’ll make a new MFractor label. So this part is manual.

>> So essentially, when I create custom controls I go in like this is my label, this is my whatever, this is a bounce button for instance, I think when you click it it bounces and does some animations. That would be the idea kinda here right? Yeah.

>> And I’m just adding a .Controls cuz I’ll demonstrate something very shortly. So you’ll notice that this is all misaligned. I actually don’t like that, so I can very simply just format the entire document again.

>> Yeah.

>> It’s actually opened it in the wrong one. There we go.

>> There we go, cool.

>> And I’ll add

>> My Label. And I’ll give that an x:Name=”label”. All right, so let’s get started and we’ll say that I want to replace this label with my link, with the MFractor label. So, let’s make a new controls: namespace. And we’ll link that to the MFractorLabel So something we can do here is we can import Controls. This is very, very useful when you’re working with an external control library. And you know the name of the control and you wanna make a new namespace for it.

>> Yeah.

>> So you just pull in the assembly namespace for it.

>> Got it

>> So we can just right-click on that yellow span and do an import operation. And then I’ll just actually sort it.

>> Mm-hm, always be sorting.

>> Always be sorting.

>> Yeah, need a keyboard shortcut for that one. [LAUGH]

>> Yeah, right. Yeah, so Controls, we can import them.

>> Got it, cool.

>> Just makes things very, very easy. So I use FF image loading quite a lot.

>> Yeah.

>> And I’ll copy that throughout the pages, and rather than having to go and copy the namespace import, I can just do a right click, import.

>> Got it.

>> And it saves a lot of time.

>> Got it, cool.

>> And we’ll just expand that out to separate lines, oops, where are we? I like keeping things clean. So you notice here that we’ve got only two missing properties. Because our MFractor label, that’s actually a content view.

>> Okay, do you need to change the class on that at all, inside the XAML, so that .Controls is the namespaces? Does it know, because in the code behind, you have the.Controls, right?

>> Yep, this is here.

>> Yep, and then the namespace there is .Controls is there. Inside the XAML, do you have to change that at all?

>> I’ve already done it. Have I? No, I haven’t, I have not done it, yes.

>> Got it.

>> Good catch.

>> Good catch, yeah.

>> Good pair programming.

>> I’ve done this a few times.

>> Yep.

>> Yep.

>> So we don’t have the the test color property.

>> Now we’ve changed the namespace.

>> Nice.

>> [LAUGH]

>> We have to re-import it.

>> Yeah. And that’s actually nifty, because you’re changing namespaces and it knows that, hey, you changed the namespace.

>> Yeah.

>> So it can go and import it.

>> So it just caught a bug for me-

>> Yeah, see.

>> Before I even knew it.

>> All right, and then we-

>> Cool, there we go.

>> Okay.

>> Beautiful.

>> So we want to make a Text and TextColor property.

>> Yeah.

>> So something like something we can bind to and change the content.

>> Mm-hm.

>> Something we can bind to and change the color. Got it.

>> So historically the way we’d have to do this, and I actually don’t remember how to do this. So apologies for this because I haven’t done it this way for about four or five months now. Yeah.

>> You’d have to go in here and make a bindable property declaration.

>> Yeah.

>> I don’t know how to do it.

>> Yeah, It’s long, I copy and paste from the documentation.

>> Yeah, so it’s hard.

>> Mm-hm. So one of the things that MFractor adds is the ability to generate bindable properties. And it will resolve the type converter like all the type information for you as well. Okay.

>> So there’s two ways we can do it, we can either right click on the spans and do it one by one. So I right click, Fix, we can either make a property or we can make a binding property. So if we did the bindable property, opens up the insertion point and-

>> Boom.

>> Boom, just does everything for us.

>> Very nice.

>> However, when I’m refactoring, I can have three to four, to five to six, however many copies at once.

>> Yeah, so you can just keep essentially, and say you’re creating a custom control, you might just expand this and just have a bunch of them. And you’re like-

>> Yeah.

>> I just wanna work on what my control’s going to look like and then I’ll figure it out later.

>> Yeah.

>> Yeah.

>> Yeah, or like you’ve taken a control that’s been bound to instead of all this binding expressions.

>> Mm-hm.

>> But you wanna make it reuseable.

>> Got it.

>> So you end up replacing the binding expressions with bindable properties.

>> Yeah.

>> And then in your actual XAML file where you’re using a control, you end up with like seven or eight.

>> Yeah.

>> Properties that don’t exist.

>> Don’t exist, yeah, yeah.

>> So the work flow that I’m pushing for now is to just right click and implement the missing members. So this will gather all the missing properties and then implement them all as bindable properties.

>> Bam.

>> So that has saved me I don’t even know how much work.

>> Yeah.

>> I don’t remember how to do this stuff anymore. So I haven’t done it manually for months.

>> Yeah, it make sense, yeah, auto generate that, right? Like no need for it, I mean, that’s why I used a lot of like we have code snippets, right, for instance.

>> Yeah.

>> It’s like yeah, code snippets or remember how to do all of this shenanigans of what’s in there.

>> So it’s like-

>> Yeah.

>> You have to remember a static property, you have to remember the-

>> The binding that creates syntax.

>> Do all this.

>> You get to use a lot of these new fancy name out features which is nice.

>> Yeah.

>> Yep, do it right.

>> Yeah.

>> Yeah, very cool.

>> So it just saves a lot of time.

>> Yeah.

>> And now because they exist in MFractor, in space use XAML again and it detects that it’s all resolved.

>> Very cool.

>> Easy peasy.

>> Easy peasy.

>> Yep, I guess there’s a few other bits and pieces as well.

>> Yeah.

>> I’ve been adding some code generation for XAML, so I have resource dictionaries fairly frequently. So you can right click on a grid element and make a dictionaries declaration. If we were gonna make a value convert, take the message and convert it something else.

>> Yeah. Yeah, often inside your resource dictionary, you have an app level and then a page level. So you start to bring in all of these converters over and over and over again.

>> Yeah.

>> And often they have to pair with the namespace because maybe you’re using a helper library and they’re elsewhere. And then you gotta remember everything, give them keys and all this stuff, right. Yeah.

>> So what we can do here is we can generate a key for the resource, just nice and quick

>> Yep.

>> And we can implement it as well, so there’s a few different options depending on the naming you’ve chosen. But in my case, I usually, I’ll generate value converters from source code, so you can just quickly make the converter.

>> Yep, I like that.

>> And then we can just do string.IsNullOrEmpty. And that’ll take the string to a boolean.

>> Yep.

>> And I have a certain gripe with converters, I don’t like that they’re not type safe. So there’s no way of knowing what goes in and what goes out.

>> Yeah.

>> Without actually cracking open the source code or reading documentation.

>> Sure.

>> So I’ve been pushing to add value conversation attributes, this is based on WPF’s convention so they already have one of these.

>> Okay.

>> So I’ve already predefined this in my in my source code. So the basic premise is you define the type that comes in and the type that comes out.

>> Mm-hm.

>> And then you add that to your converter. So pretty easy, just ValueConversion, conversion typeof string and its output type is a boolean.

>> This is essentially saying, hey, listen this converter, what I’m expecting is a string is gonna come in. I’m gonna return, because everything is an object that’s the thing with value converters.

>> Yeah.

>> Everything’s an object and you gotta do all this casting, which is fine. But yeah, this is saying string’s coming is, a bool’s coming out. Which is really nice for documentation, but also when team members come in they’re like what is? I know it’s string to bool, so hopefully it’s a little bit of it. [LAUGH]

>> Yeah.

>> But still, when you start to get these crazy, this is a speaker to something else, and you’re like what is it even doing?

>> Yeah, like I’ve got an address format, for instance.

>> Yeah.

>> Or a workflow progress, and it’s not actually clear on what it’s doing. Like does it expect an enum or a string? What’s it returning? Is it a color or is it an object?

>> Yeah, so what does this give us then?

>> So if we jump back into the XAML.

>> Yeah.

>> There’s a few things it does, so first of all, we can actually view what the conversion tint is. So in the tool tip there’s value conversion information now, so the input type and the output type. So that’s documented in the XAML when you’re using it.

>> Nice.

>> Which is a big plus.

>> Yep.

>> And if we’re going to apply that to something, then for instance we linked it up with a static resource. It also gives us type safety on the conversion flow, so message is a string. So the string to bool converter is expecting a string, so that part works. However, we’re returning it to a text property which is also a string.

>> So if we highlight over that, it’s a string.

>> It’s a big no no.

>> Yeah, it’s gonna break a run time basically. Yeah.

>> So what MFactor does is it uses that annotation and it inspects the input type and the output type of the binding.

>> Cool.

>> And then says what the issue is going to be.

>> Yeah, because it knows your binding, it knows your type. And if you change that to something like is enabled or something like that which is a boolean-

>> Yeah.

>> A binding, essentially, then we’re literally taking this off.

>> Boolean off.

>> Very cool.

>> Yeah, so it just keeps things simple.

>> Yeah.

>> Well, prevents you from getting stung by the stuff at run time.

>> Yeah.

>> Yeah.

>> Yeah.

>> So cool anything else in that are like you wanna show off in the XAML editing?

>> I think the XAML editing, I’ve covered a lot.

>> Yeah, there’s a lot in there.

>> Yeah.

>> We just covered like, we’re gonna have like awesome, I’ll time stamp all of these too so we can jump to these different points which is very cool.

>> Yeah.

>> There’s a lot more that I haven’t even touched, butI don’t think we have time to go over everything.

>> Yeah, I did want to do one thing before we wrapped up is I’m a big Android person. That’s my favorite platform to develop for, and you showed me before the show some small little things that MFactor will do for you. And there is, the nice thing about Xamarin, even if you’re in Xamarin.Forms is sometimes you gotta go into the Android product. So what little things have you done inside of here? Well, I guess, like we’ll start with navigation, as well. So tool tips and go to declarations support for resources. Mm-hm.

>> So that was something that Really pained me like back when I was working in Android. So you can hover over drawables, you can hover over the resource.layouts and instead of rendering the integer ID, it renders out what the file will be.

>> Got it. I see you can even go to declarations so if it was an ID does it know how to go the ID?

>> It does know how to go to the ID so.

>> My goodness there probably isn’t one but if there was.

>> Let’s find one We’ll find one here. So you can jump to the layout as well. So that was just command D that I pressed.

>> Got it.

>> So actual-

>> Sliding tabs.

>> Let’s grab the sliding tabs. And it will also, there is a just a mega half so,

>> [LAUGH]

>> It doesn’t give me a warning.

>> Yeah, other than temp will loan it to you.

>> Yeah, so it’ll tell you it’s an ID, it’ll tell you where it’s at, and the control that it uses,

>> Got it.

>> And then we can also press control command D and jump to it, because it’s the design, it’ll interface a little bit. But if we’re using a string for instance it’ll just take you straight to the declaration.

>> To the resource.

>> Got it which is super nice.

>> Yeah, so that’s a big time saver. Next thing is IntelliSense for all resources. So this is for values, for menus, for xml configurations, drawables, there’s a lot. I think the manifest has tool tips and stuff as well. So it just makes things easier to work with.

>> So if you do a new string inside of there, will it fill in like your name-

>> Yeah.

>> And all that stuff for you then? And it tells you all the properties inside of it, that’s super nice. Yeah, often I’m just copying and pasting, copying and pasting, but often it’s so hard for me to remember, is it int, or is it bool, is it boolean, what’s the actual, especially like string arrays, a lot of devs may not go into that type of flow. But like when you get really complex on huge projects, all these little tiny, tiny little things.

>> And it really adds up. You sink time into it.

>> Yeah. Very cool.

>> Yeah.

>> Nice. Cool. Anything else? So right not, how do I? You get it, you can download it, it’s free?

>> It’s free.

>> It’s free currently.

>> Yeah, free currently.

>> Currently, got it. The expected ways things will go, I’ll continue supporting Xamarin Studio until the very end,

>> Yes.

>> And when Visual Studio for Mac becomes the endorsed product.

>> Auto preview yeah.

>> I will release that with a free trial [INAUDIBLE] and will be a paid product as well.

>> Got it very cool. So right now, download it, give it a chance, give it a try, get feedback, how do people give feedback on it?

>> Two ways, there’s a Xamarin Slack channel and beneath that is an m fracted channel so if you jump into that

>> I’ll put it in the show notes.

>> And just ping @matthewrobins, I’ll say hello and welcome you to the channel and then you can just tell me whatever you want. The easy way is to just hit me up over Twitter so Matthew I dev.

>> And we’ll put Matthew’s Twitter account, the Slack channel, how to get m fractor, all this good stuff in the show notes below. Well thank you for coming all the way out to beautiful sun shiney Seattle.

>> Thanks for having me.

>> Yeah absolutely. Well, go download it, give it a try, especially if you’re using Xamarin studio, and I’m sure if you want Visual Studio for Mac go hit him up on the Slack, but until next time I’m James Montamgno and this is the Xamarin show and thank you so much for watching.


Read the video

This week, James is joined by friend of the show Matthew Robbins, Microsoft and Xamarin MVP, who shows us through his incredible tools for Xamarin, MFractor.  MFractor adds several features so you can make great Xamarin and Xamarin.Forms apps faster. Matthew walks us through the awesome features including a comprehensive XAML analyses, XAML refactoring and code generation, and improved navigation inside of Xamarin Studio.


  • [06:30] Getting MFractor
  • [10:00] Navigation Improvements
  • [13:00] Code Generation
  • [32:00] Improving Bindable Properties
  • [40:00] Xamarin.Android Tooltips and Navigation Improvements

Show Links:

Useful Links:

Comments to The Xamarin Show 18: MFractor – Incredible Tools for Xamarin with Matthew Robbins

  • Thanks so much for having me on James; it was so much fun.If anyone has any questions about MFractor, how to use it, it’s direction etc please ask!

    matthewrdev March 15, 2017 2:22 pm Reply

Leave a Comment

Your email address will not be published. Required fields are marked *

1Code.Blog - Your #1 Code Blog