April 7, 2020
4 Awesome Things In Xamarin.Forms 4.0 | The Xamarin Show

4 Awesome Things In Xamarin.Forms 4.0 | The Xamarin Show

>>Tune into this week’s
Xamarin Show where I have my best friend
in the entire world David on to talk about for awesome
things in Xamarin Forms 4.0. Welcome back everyone to
another Xamarin Show. I’m your host James
Montemagno and today my best friend in St. Louis, champions of some sport, David is here. How is it going buddy?>>Yes. Let’s name
the sport. It’s hockey. We haven’t the Stanley Cup. Thank you very much for mentioning.>>You’re welcome. I know it’s a big internal
debate between all of our program managers that
loved the hockey and you won.>>So exactly. So I have bragging rights
for at least the next year, and I will make all the Bostonians
miserable, it’s my right.>>If you don’t know David, David’s joined us many
of times to talk about all the brand new features
in Xamarin Forms. Also, right now, just recently, Xamarin Forms 4.0 dropped, and he’s going to show us all
the goodies. Is that correct, David?>>Absolutely. We’ll go
through most of the goodies. We’ve got four hot hot hot goodies
to share with you, and the, of course, there’s so much more in there.>>Four hot features
of Xamarin Forms 4.0>>Yes.>>Yeah. Well, people
don’t know who you are. Maybe you want to give them
a 30-second who is David?>>Sure. I think I can
go pretty quickly. So David Ortinau, Program Manager at Microsoft for
Xamarin mobile STKs, so that’s iOS, Android components, and especially Xamarin
Forms which we know that the majority of
you use and love. So constantly talking to you
to find out what you’re using, what’s going well,
what’s not going well, and seeing where we have
opportunity to improve the product.>>Yeah, and you’ve also been
doing some really cool things. Like you’ve joined me
on the Xamarin Show. We do the. Net community stand up, but you’ve also been
live streaming, correct? Do you want to talk
about that for a second.>>Sure. I have been
live streaming and you are the genesis and
inspiration for us all. So yeah, I took to the Twitch, and I have been live streaming, not just myself coding
because quite frankly that’s boring as all
get out for me and you, but bringing on guests
from the community. People that have, maybe
you know their names, but also looking for
others as well to find out how do you approach Xamarin Forms and
cross-platform development. How do you execute really cool
animations or create beautiful UIs. So about once a week, we’ve been doing that and
the turnout has been excellent. Usually go for about two hours and generally things go really well, but live coding is
fraught with danger. So when things don’t go well, you learn something about how
people approach to troubleshoot.>>Yeah. I do enjoy
that aspect of it. Not only do I get to see
the amazing people in the community, but just like me when I
live code, things go wrong. When I’m at my day job things go
wrong and I got to to fix it.>>Yeah. So many times people in
the comments will say, “This makes me feel better
about myself,” to see somebody from Microsoft struggling with these things and
that sort of thing. That’s the way life goes. I like the transparency of
the medium, it works out well.>>Me too. Well, maybe we have
some brand new features that help developers with 4.0.
Do you want to get into it?>>Yes. Let’s do it. So I will share my screen maybe. So Xamarin Forms 4.0 brings a lot to it not just the four features
we’re going to talk about today, lots of community contributions. The main reason for that, let’s go to the next slide. Clicking with the mouse, clicking with the mouse. So the main reason for the 4.0 is we’ve done some really
big things here. First of all, Fast Renderers
and now enabled by default, and this benefits Android
developers primarily because it’s a optimized renderer that removes the need for
a wrapping group, a view group. So for image button and label
those just immediately get faster, less memory less view inflation, all the good things you expect there. Then Image Source, if you’ve ever
tried to use font glyphs before, or even other formats
and you’re like, “Why are toolbar icons different from image source
and that’s different from-” I think there were like three different image source types that were littered
throughout our code-base. Well, that’s now consistent. Then Accessibility, we’re always
pushing forward on accessibility, and so we have a nice bit
of improvement. They are both, well, I guess, primarily in 4.0 it is the tab index. Then Shell which is the big thing, and really the thing that
warrants calling it a 4.0 because conceptually it brings
some really nice new things. So Fast Renderers is the
easiest one to explain. As I just mentioned, we remove that wrapping view and
so by default now, if you want to go back to
using the legacy renderers, you can use this flag. Previously, you would have said fast renderers underscore
experimental to enable those. But now, since they’re on by default, if for any reason you
need to go back to use in the legacy renderers,
it’s available to you. So we really like this approach because it puts the control
and the choice in your hands, and we don’t force
a decision upon you. But we think that everybody has for the past year really
really loved fast renders. Have not had a bunch of you know
issues or reports about them. So we’re happy to call them for real. Then Image Source. I run into this when I started using the new font image source option to be able to use fonts
for all of my glyphs and font awesome and
all that sort of thing. Well, I couldn’t use it in different places and
it was frustrating, and so Matthew Liebowitz on our team took it upon
himself to unify all this. Then the rest of the team worked
with them to get that PR merged, and so as you can see here
quite a few things have been deprecated and you’ll
want to use the new stuff now. In IntelliSense, you’ll still be able to use the old stuff but
they won’t show up for you. We’ve hidden them, so yeah. Your old code still works.>>Yeah.>>We have not removed
those properties. So we’ve added these new properties. So that’s kind of nice about
both the Fast Renderers one. Now it’s just on, your
apps get a lot faster. You’re good to go. You can go back if you want to. But here, all your old
stuff still works, but if you’re creating a new thing, you’ll just see
the new stuff anyways. I like that approach where it’s
still there, you can set it, but the IntelliSense is like boom
in your face, and I love that.>>Yeah. It’s one of
those nice features of IntelliSense and working within the powerful tools that we have
that we can leave things there, but guide you towards the new bits by surfacing it as the
stuff you should be using. So yeah, very cool stuff there. Accessibility as I mentioned, always something that
we’re pushing forward on. Always loved talking to
developers who spend time in this space because it is
such a nuanced and detailed space. There’s the one aspect of just
trying to get approved through different government bodies or regulatory bodies to get
that nice rating for accessibility. Then there’s the very
practical stuff that maybe doesn’t matter when you get scored but you want
to make sure you take care of your end user. For us, it’s really all about
that end-user experience. So. TabIndex, very straightforward but as a screen reader parses
through the visual tree. It needs to know in
what order to read things. It also needs to know
which things should not be read. So there are different ways
of doing that. There’s the automation properties IsInAccessibleTree as you
see on the third line there. But then TabIndex gives
you the ability to have a, I believe it’s a zero-based index. But regardless, you
can throw negatives on there and it will move
things to the front line. So common in other platforms as well, and now you can use
that in Xamarin Forms.>>That’s great. We did an episode recently on accessibility with
Xamarin Forms because there’s a lot of options inside of
there like this is an Accessibility tree and hints
and different identifiers. I feel like as UIs get
more and more complex, and when you want to
do accessibility, you may not just have
these in a stack layout, you might have stuff in grids, and in collection views, and then you really want to
make that app super accessible, so having that fine
control is super nice>>Yeah, absolutely. So there are plenty of
other things that we’re doing in this space and we’ll be coming
out in the near future. But yeah, there’s always more
to do here for people that are visually impaired as well
as other needs. All right. So let’s talk about Shell. Now, Shell builds upon
the Fast Renderer stuff that we mentioned before because everything in Shell uses that same pattern. If you think about what you
had to do to make tabs or what you still could do today with
a tab page to make tabs work, you end up writing a bunch
of code like this. But wouldn’t it be nice if you
could write code like this.>>Looks nice and simple. I see a tab bar, I see some tabs. That makes sense.>>So it’s much more
straightforward, more legible, and with Shell, especially
in our templates, we create an AppShell.XAML file. It’s one place, and we hear this
from customers all the time. Just talked with
some mate the other day, as a matter of fact, and he said, “I love that I can just put all the structure of
my app in one file. It gives me a great overview
of everything, and if I need to move
something around, I can easily do that.” So with Shell, you would
set it up like this. This would represent essentially
that AppShell.XAML file. I’ve got a tab bar in it, which is of type Shell item, and then I’ve got tabs. You’ll notice that the Shell content which just
wraps a content page. You’ll notice that I’m
using the content template, and that’s important for when
you want to make sure that that page is lazy loaded
when you need it. So you’re not eagerly
loading, in this case, two pages, and thus slowing
down the startup of your app.>>Got it. So you might have a lot of tabs, you
might have 100 tabs, you might have 1,000 tabs, you might have a flyout
navigation, things like that. So this data template is only
going to create it on-demand. Is that what you mean
by lazy loading?>>Exactly. Yes.
Creating it on-demand. You mentioned flyout,
you mentioned tabs. We have tabs at the bottom, we have tabs at the top as well. So you can actually mix
and match all three of those UI navigation paradigms to whatever needs you have
for your particular app. Actually, in one of my apps, I’ve enabled it such that
the user can choose if they want to have bottom tabs or if they want to
have a flyout menu.>>Cool.>>So now, that is absolutely
something you could not easily do in
an existing Xamarin Forms app. So here’s another example, and this gets even more complicated, but this is your master detail page. You’ve probably created
these, I’ve created these, and you got to do a lot
to tie all this together. You’ve got the master
detail page itself, within there you’ve got the master, which is your menu, and
then you’ve got the detail, which is the content
you’re going to swap out, you’re wrapping everything
in navigation pages and heaven forbid you forget that navigation page
to wrap things in. Because then as soon as you try
to navigate for the first time, you get a wonderful
little error saying, “You forgot to wrap your page.” That’s not a problem
anymore in Shell. Then you end up doing
a bunch of code like this, and then you end up doing all this, and so, “Hey, I’ve got four different major features that I have to do just
to get a flyout.” Well, in Shell, it’s
as simple as this.>>Nice.>>Flyout items. You just declare the flyout
items as you want them, just like those tabs,
and you’re good to go.>>It’s like simplifying
the overall app architecture is, not your entire app architecture but the structure of your application. What I’m seeing here is
you have the ability to do all of the things, but it seems a theme
is saying what you’re saying is we see that there are some ways that you’re building your app and we’re going
to make that easier.>>Absolutely. Days gone
by and years gone by, maybe the product team
gets together and says, ”What is it we’re going to build?” and then they go build that.” Well, the way that we work
as program managers is we spend all of our time are the majority of our time
talking to customers. I myself was a developer. I still am a developer, but I’ve been going on 25 years now. I have my own company built
tons of apps for customers. Then going out and speaking
with other customers, those of you who are
using the product today, it’s really about what you’re doing and how we can improve your workflow. You the customer almost the
inventor of all these things. We are the executors, and so we go figure
out how to do it and execute on it and
deliver it back to you. Hopefully something that is
going to improve your workflow, make you more productive. In particular for example, calling it a flyout item was the product of talking
to customers and finding out that the name that we
were using previously didn’t make much sense and
wasn’t very helpful. In the course of those discussions so many people when
they saw this they immediately jubilantly said
that’s exactly what I want. I love that. I know
exactly what that’s going to be which is the
ding-ding-ding for us to say, ”Well, that’s what
we’re going to do.”>>Nice.>>All right. So that really is
the majority of Xamarin Forms 4.0, and the key features that
we’re shipping there but of course we move on
to Xamarin Forms 4.1 very quickly. How do
you want to wrap up?>>Do you want to show anything? Do you have a sample at all or no?>>I have a sample. Yeah, I could pull up a sample. Let’s take it from here. Do I still have the emulator running? Did I close it? All right. Cool.>>Let’s see it in action.>>Yeah. All right. So real quick to wrap this
up and bring it home, I have an example here. So this is my Zappy app, and I’m just running
the Android version, but of course, it looks
really nice on iOS. This is an app that’s in development and I have
a flyout menu here. You’ll see that I’ve got
all these flyout items down here. Now the interesting thing about
that visual settings item at the top is actually a menu item. So it doesn’t represent a page the way that the UI controls
in scenarios do. But it’s a menu item that I
just execute some code on. So this is really useful
for things like login, logout, launching a webpage from
your menu something like that. Then we have a few scenarios in here. So you were mentioning
the live streaming before. These are the kinds of
pages that I have people coming to join me and build. So this one’s trying to load a map. It’s not going to load
the map. That’s fine. We’ve got conversations here which is a really cool thing one of our French developers
helped us to build. So I think there’s
some French in there. Yeah. So some cool animations
and stuff in here too. You’ll see that I’ve got
typical navigation happening, and you’ll notice on
the flyout menu here. There’s a quite a bit of
customization that I’ve done. I’ve got a gradient in
the background which I used platform code to do. But you can also add a flyout header
up above with a template. You can customize the look
of all of these templates. As a matter of fact, I think
I can bring up the code here. Where is Visual Studio? So this is my App Shell
that I was mentioning previously which is
where everything lives. So here my flyout items. You’ll notice that I’m also using that lovely font image source
that I mentioned previously and putting
that into my tab icon. So super easy I’m using Font
Awesome here, putting that in here. That’s not necessarily a Shell thing. You can use that outside
a Shell of course, but just super easy to do this you see that I even use
it for my shell flyout icon, I’m providing templates
here for the header itself as well as the item template. So yeah, a lot of customization
and things you can do here, and we’ll certainly be
doing more deep dives into all the flexible configurations
you can do with Shell. We’ve got some of those up on my live stream up on Twitch
as well as my YouTube. So and then documentations
coming along as well.>>It looks like what
you’re doing here, so you have a flyout item, and then you have
multiple tabs inside of it. So compared to before
you were showing, just here’s a bunch of flyout items. So what on this screen is
a flyout item and what’s a tab.>>So I’m doing
a little bit of magic here. So I mentioned before that I give the user the ability to choose
whether it’s a flyout or a tab. So what I’ve done is
yes I’m declaring a flyout item because I want
to use a flyout by default, but the rest of these are
potentially tabs, and they are tabs. But what I’ve done is I’ve used
this flyout display options. It is saying, “When I’m showing a flyout all these children in here, all these tabs what would
normally be displayed as tabs, go ahead and display them as fly out items,” because that’s
what I want to do.>>Got it.>>Now typically if you just
want a flyout or you just want a tab bar at the bottom,
you wouldn’t do this. But we know that there’s
a use case for it. I’m using it myself, and so that’s how I am doing this, and that’s why I’ve got tabs
nested within fly out items.>>So it’s very flexible. It seems like it’s not just you can only use tabs or you can
only use bottoms tabs. You can always use fly.
You can mix and match these different kind of
navigation hierarchies together.>>Exactly. So in addition
to being super simple, it’s also super flexible, and everything is
abstract on our end. So if Apple introduces
some new pattern or Android introduced a new pattern
or the next Facebook introduces some new UI that
everybody wants to imitate, we’ll be able to quickly adapt
to it and make sure that you are not hindered in any way from building beautiful Apps
with Xamarin.Forms.>>Nice. Now, one thing that we
get a lot of questions about, and you just mentioned
earlier about navigation, we have these navigation pages. We have the push. You got
pop and you got modals. I don’t see any navigation, things that shall do
something special for it.>>Right. So Shell is
all navigation-aware. So when I mentioned before, you don’t have to wrap
anything at navigation page to let the app know
that it’s navigable. Everything’s navigable here. So actually what I could do, if I wanted to navigate to something like this UI controls
tab from somewhere else, I can give it a route like this, and I can call it UI controls, and then from anywhere in the app, I can use a URI to be
able to get to this. So let’s see here, go look at some code. So I’ve got some other routes
similar to that right here. So I’ve got a control page. I’ve got a map page, a login page. So if I want to navigate
to any of those, I can come down here
and I can say “Shell current,” and then I can say, “Go to async,” and all I need
to do is pass in that name. So the one that I created up are
on the page was UI controls. But just like all of
these right here, I can say login etc. Just like that, I will be
taken right to that page. Now, if you’re thinking what about push and pop and
modals and things like that, I don’t want to necessarily use URIs. You still have all that
available to you as well because again we’re not about taking
things away from anybody, but navigation proxy
is available here, so you can push modal, for example, push modal async. Same methods that you’re
already used to now. Since we’re on navigation, I had to show you
my favorite feature.>>Okay.>>So let’s say not this page. Let’s go to the control page. So let’s say I’m going
to control page, and I want to actually pass
in a query string parameter. So I’m going to say, “I
want to see the button.” Just like this, and so
what’s going to happen is, when my control page loads up, either it or the binding contexts my view model will be
passed to this parameter. So if we go look at this and I
believe I have this wired up. Hope I have this wired up. So here’s my control page itself. Yes fix my line endings. You can do that. I permit it. Yeah. So I need to
go to my view model, control page, view model
So you see this up here. So these query properties are
taking the query string ID. In my case, I’m using
template and control, and it’s going to pass it to these public getter setter
properties that I have here. So I don’t need to wire
any that stuff up. Shell does that for me. So I don’t have to worry about newing up this control
page view model populating all of the different
properties and things like that and doing
all that wiring up myself. I don’t need to worry about that. All I got to do is put
a query string parameter on there, make sure that I give it this query property declaration
or decoration at the top, and Shell takes care of
everything else for me.>>Very cool. Awesome. I love seeing and I love also dive in
a little bit deeper, and you probably weren’t
thinking about data, but I always like to get a little
bit deeper on the Xamarin Show. Awesome. All we can
do is go ahead and get the beautiful David Ortinau
now back up on the screen.>>All right. Well, again
figure how to do that.>>We’ll see.>>Here’s the Skype.>>Don’t quit at all out.>>Screen-sharing stop.>>Perfect. Wow! Awesome because
we can put all the links to the show notes to
your Zappy application, to the documentation as well. Now one thing before you leave I got to ask you is I know it’s a 4.0>>Yes.>>That’s a big number. Should I be scared to upgrade my apps or should it be a smooth transition?>>Right. So the interesting
thing about 4.0, I do believe it’ll be
a fairly smooth transition for 99.9999 percent, and the reason is is that
we’ve actually been shipping it since December at Connect
when we previewed it. Not only that, but the major
features that are involved in it were shipping as previews
within 3.5 and 3.6. So you’ve actually had
this code for quite a while.>>Cool.>>Yeah. But it was
behind experimental flag, so you are opting into it again, putting control in your hands
about how you adopt it. So although it’s a 4.0, although it’s big release, we think that you will
have smooth sailing. Of course, if you don’t, let us know, and we’ve already
our shipping service releases to make sure that we’re taking
care of any of the rough edges, but yeah, fear not.>>Very cool. I’m going to go
update all my applications today, and you should do the same. If you have any questions, hit up David on
Twitter or his e-mail. Just spam him with all the stuff. Well, just tell them
that you love it, and he loves positive feedback to. We’ll put all the links
in the show notes below. David, thank you so much for
joining me on the Xamarin Show, and we’ll have to have you back
soon because I’m sure there’s more releases of
Xamarin.Forms coming soon.>>Always coming.>>Awesome. Thanks for tuning in. Don’t forget to subscribe
on YouTube on Channel nine, and thanks for watching. [MUSIC]>>Hey, James here,
just wanted to check in and thank you for
watching this video. Now, do all the things that you
know you want to do such as like, subscribe, and ding
that notification bell, become part of
the notification squad. While you’re here, check out all these awesome videos
that I’ve already recorded. Click on that thing. Click
it, watch it, do it.

21 thoughts on “4 Awesome Things In Xamarin.Forms 4.0 | The Xamarin Show

  1. My ios app stopped working after upgrade to 4 from 3.6, some null object exception s, had to revert back to make it work. I am using visual studio 2019 for mac, majove

  2. Absolutely love XF 4!! Although i stumbled upon an issue regarding the FontImageSource in FlyoutItem. It works totally fine when setting the FontAwesome icon in the Tab.Icon. But if i also want the same icon to display in the Flyout menu i have to have the FlyoutItem property FlyoutDisplayOptions set to "AsMultipleItems". If i set it to "AsSingleItem" the FontAwesome icon is a no show! :/

    Edit: I have tried using a ItemTemplate as well, but the result is the same.

  3. Great stuff! But one thing I cannot explain is, why there are new ImageSource properties instead of just have refactored the existing icon properties.

    The icon properties take a FileImageSource. Having updated this to its base class 'ImageSource' wouldn't have broken anything. So now we do have additional -ImageSource properties that sound a bit unconventionally.

    I didn't find information about this decision, maybe someone can explain this?

  4. I really like all these new Xamarin videos and all these things you (and others) do – keep it up.

    But can't you please look into Davids mic – how can he have a such a prof looking mic setup and have SO bad sound? 🙂

    The sound is like a 5$ headset…sorry, it should be able to be better with that mic I would assume 🙂

    The content is awesome however – but please David – the mic 😀

  5. When I first saw the specs for the Xamarin.Forms shell several months ago, I was eager to see the results. This is awesome, it reminds me of a blog post I wrote while I was full of enthusiasm about the new Paradigm :
    I love this new paradigm !!!.

  6. You guys rock!!! 😄 Love the energy you bring to every video…much appreciated 😊🙏 I love Xamarin 💪

  7. Been a MS developer for 20+ years. Recently started learning Xamarin forms to beef up my mobile dev skills. But man the development experience is utter dog shit. I worked for MS back in 2004-2007. I remember the quality control that was involved before anything would go live. It amazes me how this product is in RTM status. I can't tell you how many times I have to delete the god damn obj folder for android just to get my code to compile correctly. Getting the designer to load for XAML so you can actually get a visual of your layouts before you waste 10 minutes trying to deploy, you might as well forget about it. Trying to implement 3rd party tools like HotReload even those partially work at times. To be a Xamarin Forms developer you have the patience of the Dali Lama.

  8. When is Shell coming to Windows UWP? Anxiously waiting for this feature so we can upgrade and stop using MasterDetailPages.

  9. It could show some images of the app screen side by side to the code. Would be much easier to understand the new features.

Leave a Reply

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