>> Tune into this week's Xamarin Show where I have my good friend, David, on showing a Xamarin.Forms
5.0 so tune in. [MUSIC] Welcome back everyone
to the Xamarin Show. I'm your host James
Montemagno, and today, my favorite person
in the entire world, David Ortinau, is with us.
How is the going David? >> I'm good James, how
are you my friend? >> I'm absolutely fantastic
and I do not want to delay because your camera may pass
out for the 18th time today. >> Things have been too
hot here in the Midwest. Things cooling off though,
so we're happy about that. >> That's right winter is coming. Also people don't have to
wait because something is already here, Xamarin.Forms 5.0. My goodness, and even we have
a link for them, aka.ms/xf5. Look at that, you can go right there. David, I believe that you're here to tell us all about
that. Is that correct? >> I'm here. I've got a couple
of slides that I can walk you through to give you the context
for what we've been working on. I've got a little code demo, so let's go ahead and
go over to the slides. >> Awesome, I'm ready, boom. >> This is last year
in Xamarin.Forms. I like these kinds of slides so I can just keep adding things to them. This is a lot of stuff that's been
coming out over the course of the 4.0123 all the
way up through eight. There won't be a 4.9, it was a
missed opportunity right there. We could have gone 4.9
and then boom, five. We've been baking on
five for a while, and here's the thing
is that with this, go to the next slide, there we go. All of these bits of those features
have been marked experimental. These are things that
we wanted to get into people's hands because they were valuable enough that those
who were more adventurous, the early adopters
could start using them. But there's more work to be done, and we wanted to really engage the feedback and keep
iterating on them. >> Infact, if people have
watched the previous, what's new in Xamarin.Forms, or whatever version with you, you've talked about many of these features and demo these features. But you're right, you've
always had to go in and hit that little flag and say, I want to use media element
or swipe or whenever. I use a lot of these
features in production. >> Absolutely, yeah. I, as a matter of fact, tweet
today, I saw people saying, "I've been using
these in production." The thing with 5.0 is that we're
really going for stability here. It's been a little bit longer
between releases from 4.8-5.0, but that's because we were working on the stability of those things. Just a quick recap of what these things are many of you
are already aware of them. But we have brushes, these are for linear gradient. As you can see here in the screen, you got some nice subtle
gradients going on, and I actually have that in
a demo in just a moment. CarouselView. Who doesn't
need a CarouselView at one time or another in
some app or some screen? Good for onboarding, good for
headers and things like that. Then we've got drag and drop. This was something that
we added specifically because the Surface Duo with the dual-screens had a
really good opportunity to utilize this gesture. I built this little
demo here and I'm going to see if I can build this out to recreate an older audio sampler
that I built way back in the day. >> Very cool. >> Yeah. Cool stuff.
Then RadioButton, which in and of itself is perhaps
not the most exciting control. But James, you're familiar
with the old checkbox, you had a little hand in that. >> I did. A good old
checkbox, everyone needs it. I was so excited when it came out, I was like, "Everyone
needs a checkbox" and I use it in all my apps. It's the first control that I use. I go in, check box and I just
have it there, because why not? >> Exactly. Well, the
interesting thing about checkbox is when we added it, it was one of the first
controls that we essentially polyfilled a platform that
didn't have a checkbox, I believe that's iOS and so we
draw that check for the checkbox. RadioButton is another milestone
in the evolution of Xamarin.Forms where originally, it was all native platform lowest
common denominator. Now, we're saying, "You know what? We care more about what
customers need to do." With this, we have taken
the RadioButton that was a contribution and we've enhanced
it to take control templates. What a control template does, Windows Developers are
very familiar with this, maybe Silverlight as well, you can essentially provide the template for whatever
content you want. The key is that as soon as you've
gone into control template land, you're no longer using the
native control itself, but you're using all the
cross-platform functionality. You could make this thing
SkiaSharp to have all drawn UI. Or as you can see in this case, that bottom screen there, I'm using the Fluent UI sample
from the web sample actually, and I'm creating that day, week, month, that bigger radio. You have full control of the UI. This is something that we'll be seeing more and more controls
taking advantage of. >> That's something I'm
familiar with because I'm so used to WPF or UWP. In Xamarin.Forms, we have tax, and it's pretty obvious
that's what it does. Often in a button, you literally put text and normally
that's what I do. But in WPF or UWP, it's content. The content could be
anything, so you can put an image in there, whatever you want. But the base functionality
under the hood, I'm assuming is still a button
or a RadioButton in that sense. >> Exactly. It's all still that. The thing with controls
in Xamarin.Forms today is you can always
compose your own button. You could put the button
into the background and add whatever other content
you need around it. You compose it that way, it's a composite control. Whereas the control template bakes
that into the control itself. It's a pattern that
is easier to follow. You don't have to think to yourself, I now need to go create a new class, call it my button and do all that jazz as opposed
to with the RadioButton, you can just bake right into it. >> Very cool. >> I'm really excited about that. Shapes and paths has been a huge hit. This is the sort of thing that you would have only use SkiaSharp for. Then you have to pay a little
bit of a five megabyte price or cost on your app size sometimes because it brings
along quite a bit of heft, but it's super powerful
and very performant. Well now, we have shapes and paths to allow you to use the native
platform graphics APIs, but in a very simple
declarative way like this. This is based on the
WPF and UWP syntax. You can see, I've got a path
described down at the bottom there. I have lines in ellipses, up at the top and in the sample, I'll show you here in just
a minute from my demo, we can also clip other
controls, which is really cool. >> That thing is my
favorite just because now if you have ever done
anything in SkiaSharp, there's a lot of custom
controls that people can make or evolve or do whatever, and now, you can just do
it directly in there. I'm really hoping to see
this whole new generation of Xamarin controls, which I'm sure you'll talk
about too but it's really cool to see this thing just
come right in the box. >> Exactly. More power in
the developer's hands to really create and achieve
whatever UI you need. One of those common UX patterns that you might see is this swipe, and so this is something
that was baked into the ListView previously and that
was part of the native platform, this control, you can
actually wrap anything. Whether it's a layout
or another button or you can use it inside
of a collection view or list and essentially, you can template whatever you
want to appear behind it. Very useful as you saw there in the shopping cart for deleting or removing something
from the shopping cart, but you can put complex
layout in there as well and you can have multiple
buttons and interactions. You could basically hide a
whole UI of things behind it, similar, I think, to what
you might have done in some of the Twitter
apps in the early days. I seem to remember being able
to swipe a direction and reveal like the retweet and the
favorite and things like that. >> I use this in one
of my apps actually, my Animal Crossing app and you swipe left and right on it and
you get little icons. Now, you can see your
friends switch code, you can remove them, you can favorite them and
actually, you have like material, like your frames in a whole
bunch of things inside of there, which is cool, so you can really customize it more than
just, here's a button. >> Yeah, exactly. Super
powerful and flexible, really everything that
we're doing is going the way of how do we
template this, right? >> Yeah. >> Are all the styles
available to you? I covered a lot of the things here
that we said were experimental, but there are few things
that I have not mentioned, and these are things like
the C# UI extensions, the Expander, the media element. These are going to migrate
from Xamarin.Forms to the Xamarin Community Toolkit
and so I want to take a moment to highlight that toolkit because it's very active right now. Hacktoberfest is coming up
or is currently happening, and we want to make sure that
everybody knows it's there and it's a great place to go, drop those
controls that are commonly used. Now, the reason that we're
moving these here, James, is because as Xamarin.Forms
5 goes into stable release, these controls have
more growth potential. >> Got you. >> Things that we want
to see evolve and iterate on and the Community
Toolkit is the best place for that, while five Beta goes into
its lengthy stable release. >> Got you. >> Of all the stuff in
the Community Toolkit and you were instrumental in
the early days of this in previous iterations and
now, Stephen Davidson and Gerald Versluis, and I'm
going to miss names, Javier is involved from
the Forms Team and many other contributors have been actively reviewing PRs
and engaging over there, and so we now have a ton of stuff. Some of this stuff was migrated over from the work you did originally and then some of this is all new stuff like you can
see the camera view is in. The Expander is already there, the media element is on the way. C# UI is on the way, but there's tons of
converters, tons of behaviors, helpful extensions, like
if you're embedding images and you want to be
able to refer to that image, and you don't care about
multiple DPI's, for example, you can use that image
resource extensions but so many really cool
things over there. >> Yeah, super cool. I love, we were talking about it
today, our Team's channel. This thing is going to be
like a one-stop shop for all the extra stuff that
you want in your app, some of the Xamarin
Essentials of UI in a way. It's in the box already, you can do it, but what
if it's just there? >> I noticed that some of the
things that I think we're in your MVVM helpers have started
to make their way over. >> Take it all I say,
take it all, please. >> Well, and it puts
it in the Xamarin Org, as you can see the GitHub here, there's a level of maintenance and
support that you can rely upon, that it's part of a
Microsoft repository and it's not in a
personal repository. >> That's true. Yeah, I
only have so much time, so it's better to get it in here and then it's going to be
supported forever. >> Exactly. I do have
a couple of slides to highlight some of those big ones
that I mentioned, the C# UI. We certainly know that
a lot of developers love XAML and are
super productive with it and we of course deliver XAML Hot Reload to make people
super productive with that, but hey, C# is really, really powerful and with these extensions
from Vincent Hoogendoorn, you can create some
really nice fluent styled UI all directly in C#, and then you can use
a product like live sharp to get your
Hot Reload for that. We know that people love to do that, the Expander, as I mentioned, is a really cool control
from Andre Misiukevich, this is a sample that
Javier put together, it's up on his GitHub, and then the couple other
controls I did want to mention real quick that we are going to be bringing to the
Xamarin Community Toolkit, they were originally
destined for Xamarin.Forms, but we wanted to let them
grow more and evolve. This is a Cross-Platform, fully Cross-Platform tab view
to replace the native tabs that you would appear at the bottom of a Shell app or Tab Page Controller. The cool thing is because it is completely cross-platform,
it's fully templatable. If you can see here in
the XAML that you've got controlled templates and you can have that first one be a big fab and
it's at your big green button. On the other side of the screen is the App Bar and I say the
other side of the screen, that tab can actually go anywhere. You can put that guy in
the middle of your UI, you can put underneath your header, you can put it wherever,
wherever you want it. >> Yeah, you do you. You do you. >> Exactly, you can even do
something crazy like this and have a big Lottie animation or a GIF in the background of your header. Yeah. So a lot of those things
will be coming as well, keep an eye out for those. If you've seen any of Javier's
work on templated UI, that's going to be really exciting, but I have also one of my demos running over here
that I wanted to walk through. >> Let's do it. >> Let me pull up the
Android emulator. Okay. Here we go. I've got my Android emulator here and I've got my personal finance app. >> Nice. >> This is a sample
design I found on one of the design websites that people will post their
really cool designs, and I'm like, "Oh, I wonder
if I could do that," because look at these great
gradients here, right? Beautiful gradients. I'm throwing it in the
background of a frame with corners and everything, and then down here we've got a bunch
of images and I'm drawing CornerRadiuses on those,
and then all this stuff also. I hadn't mentioned this yet, but let's talk about some Dark mode. >> Pretty. >> You've got your Dark mode
and your Light mode and that's super easy to control
now, inside of Xamarin.Forms, it's literally a couple of this
right here, App Theme Bindings, here's my light and here's my
dark and then in my code behind, let me jump over to
the main page code. >> In my code behind,
I'm just checking the user theme and in this particular
case, I'm just toggling it. >> Yeah. >> Simple and straightforward, but it's as easy as that
to keep track of it. If you want to set it back to letting the operating system control
your light and dark mode, you can go, go back
to the unspecified. When it goes to unspecified, then you're going to get
whatever the OS is doing. >> Oh, cool. >> All right. Let me
feature a couple of other things in here in my code. I mentioned the gradients. Here's one of my
gradients, the blue one. You see that what we do, I'll go ahead and close that. You set a start and end point. You know it's 0-1. Whatever you're going to fill, those are your limits. In this particular case, I'm starting at the upper
left corner, the 0, 0, and I'm setting the gradient
to go all the way to the 1, 1, which is a lower-right corner. >> Got it. >> Then I've got some colors
here and I've got two stops. The first one being a dark blue, the next one being a light blue. Then really no offset, it's the zero and the one, again, those are your limits. Then to apply that, I just take that gradient
and I'll just go ahead and come down here to my
card, that I'm putting it on. I've got a button that's using it, but I want to go down to the card. Here we go. Here's the frame
for that credit card example. Instead of setting it to
the background color, we have a new property here
that can take brushes, and this property is background. Background color, I don't know,
do we actually deprecate it? It's probably a good question. Let's show as deprecated. It's probably still good to go. But we expanded it. You can just use the background, and then of course, I just
set my linear gradient to it. >> Very cool. >> Now, just like that,
boom, I've got my colors. >> Also, right there,
I want to highlight this new row definition
syntax also in there. Just look at that, pretty. >> Yeah, it's nice and turse and
super easy to use. I love it. I've converted all of my code to that because I like my XAML to
be as short as possible. >> Yeah. It's super nice. >> Makes it a whole lot
easier to read too. Let's talk about clipping real quick. If I look at clip, I'm clicking a progress bar there, but what I actually want to show
is this clipping down here. All that row of images that
I showed you at the bottom, I've got those here. I'm grabbing some images off
for Xamarin assemble website, which is a great conference
down in Latin America that I think all participate
in. Were you part of that too? >> Yeah, we did a panel there. >> I'm just setting the
clipping to this Photorect. >> What's that? What
is this Photorect? >> Photorect. I got to get back up to it. >> Look at this. >> Here's my shape. It's a rounded rectangle geometry. Actually the rounded
rectangle geometry, fun fact, was not part of the first
iteration of shapes and paths. But the first thing
I went and tried to do was to round all my corners. >> I see. Got you. >> It's like every design that
you see has rounded corners. >> Yeah. >> So went back to the team and said, "Hey, this is awesome. Love this," need to round the corners. Javier is like, "Oh,
yeah, no problem." No big deal. He pumped out this new geometry for
rounded rectangle. You give it a corner radius
and then you give it a rect. I think the next
improvement that I want to see is it's great to be
able to give it a size. It's your x, y, width and height. But I want to be able to say, "I don't know what my
width is going to be." >> Yeah. >> Could you let me do that, please? Something like that. We'll see
if we can get that all wired up. Nobody told me I was bananas. That's my job as a PM, is to go in and say, "Look, here's how I actually need to use this thing.
Give me the power." >> I like it too because even below, what we can see in that
image right there on 47, as you have an ellipse geometry, so you can really
clip any shape, path. >> Exactly. The main difference here, as you saw in the earlier slide, I was using line and I think I
had an ellipse there as well, when you're doing clipping, you're actually using
the geometry variations. >> Got that. >> You can actually
create a geometry group. It could be something like this. Create a geometry group. Now, within that group, I could put an ellipse, I can put a rectangle, I could put a whole
bunch of stuff and compose whatever I needed to, and that will be treated
as one geometry. >> That's cool. >> I did that actually originally, I used a rect and I used
a bunch of circles, ellipses to do my rounded box. But now I've got a rounded
rectangle geometry, I don't need to do that anymore. >> Beautiful. >> Yeah, so this is super cool. This effectively is your
circle image plug-in. >> Very nice. >> Right? >> Yes, get rid of the frame. >> Some people have said, "Hey, well, why don't
I just use a frame." I can just wrap a frame around that and then I can set the
corners of the frame. Yes, but now you've
incurred another UIView. Whereas this is going to use graphics APIs and it's going
to clip the single UI. So if you were to actually
inspect the native tree, if you wrapped it in a frame, you would see a UIView on iOS and
then you would see your UIImage. >> Got you. >> But if you use clipping, you're
not going to get that extra, the view element and so your
performance will be better, your memory be better, etc. >> Very nice. That's nice because that's what I used to do in the past, was do all that and
now, I don't have to. >> Exactly. One last thing, James, I want to highlight for you
is fonts. Fonts are a pane. >> Yeah. >> This is something
that was introduced, not necessarily as a
experimental feature, but it's so cool it
deserves to be mentioned. I've got a couple of fonts in here. I know it's a little tight to see, but we've got a true type font
and we've got an open type font. Really, all you have to
do is make sure that you're setting these
two embedded resource. Then once they're in there
is embedded resources, you can use a new assembly tag. Let's see here in my icon font. In my icon font, and
really any C-Sharp, if you want to put this
stuff altogether in your AssemblyInfo.cs,
that's a good way to go. But essentially, you're going to use this ExportFont attribute or property
or what do we call this guy? You're going to name
the embedded resource. Just needs to match
the name of the file, but you can give it a really
handy alias, FontAwesome. What this file is, is this is a generated static class of all the glyphs that
exist in FontAwesome, so that I don't have to remember
all of these funky codes. Then here's where the magic comes in. Not family FontAwesome. >> Look at that. >> It's my life bulb. I had to
put all this stuff on one line. Let's go ahead and extract it back out so that we can
see this a little bit easier. I've got my FontFamily
here on the label. I just tell it FontAwesome. I didn't have to create
like a style or anything. I just call it FontAwesome. Then I have a static
XAML attribute here. I go into my icon font and
grabbed my light bulb. This is super convenient because
I can just go in here and say, well, I want it to be this,
I want to be that whatever. >> Yeah, you don't
need to add a bunch of different images all over the place. >> Yeah. I didn't have to go into my native platforms and add
fonts to every project. I didn't have to go figure out the info p-list magic in
iOS to wire that stuff up. I didn't have to figure out
the differences between UWP and iOS and Android. Where should the file go? I just put it in one spot
in my shared project. Now, I've got my
shared fonts and I can use it everywhere in my
apps. It's super awesome. >> Beautiful. Now,
all this whole thing, Xamarin.Forms 5.0, preview
today, comes out eventually. >> Yeah. It'll come out
mid to late October. It really depends on
what the feedback is and what kinds of blocking
issues we find. But so far so good, everything's looking really good. I want to highlight, everybody should read
the release notes. It is a major release, so there are some breaking
changes to be aware of. One I'll mention off the top, is UI web view, which has been deprecated, and Apple no longer will take new
apps into the app store with it. So WKWebView has been the default in Xamarin.Forms
for quite awhile. But if you have a plug-in or something else that
references UI web view, you get a rejection
warning from Apple. To avoid that, we just
yank UIWebView out. >> Beautiful. >> Still in this course, you can go grab it from source, copy and paste it into your
application and you can continue on. One other thing I'll mention is
that we have changed the name from master detail page and related
properties to fly out page. >> Okay. >> This is in accordance
with cleansing the names to be more
friendly to everybody. Yeah. >> It makes a little bit more
sense to you. That's what it is. >> It does make more
sense because when we originally introduced
Master Detail page, it wasn't a common concept. >> Yeah. >> There was no standard in the
way in which it was implemented really didn't match once
everybody else ship there's. Flyout page does make more sense. It's just a deprecation so your existing apps will
still continue to work. >> Okay. >> We encourage you to go ahead and update your properties in your
names and adopt the new ones. >> Beautiful. I'm
already using Shell, so I don't need to
worry about it so far. >> That's exactly right. Yeah,
Shell people are on the happy bath. >> Beautiful. All right. Awesome. Well, you can, of course,
go to aka.ms/xf5, and you'll see all the release notes. You'll see the blog
post announcement, all that good stuff that you
can get, all that information. I'll, of course, link
in the show notes below to David's awesome GitHub page. >> The camera works,
cameras still going? >> It's happening.
It's all happening. >> I got a fan blowing on
it. We're good to go, man. >> It's all happening.
Well, thanks, everyone. Thanks, David for showing off all of these new features.
I appreciate it. >> Thanks, James. >> Cool. Well, thanks,
everyone for tuning in. Don't forget to subscribe. Hit that notification bell and
let us know if you're enjoying Xamarin.Forms 5.0 by leaving a
comment in the show notes below. All right. Thank everyone
for watching. Peace. >> See you. [MUSIC]
