Hey everyone today, I'm going to take
you through everything you need to know to create your very first cross platform
app with Xamarin and Xamarin forms for the user interface across iOS, Android
windows, and even more so tune in. Hey everyone. I'm James Monson Magno. And here on this channel, I talk about a
bunch of cool tech-related good things. Things that I like in my
life, such as Legos, and of course, software development. I often put some of my live streams here. You can find me every Friday on
twitch.tv/james Monza Magno, but what's I want to do today is not do a live stream. I want to walk you through. The bits and pieces of creating your
very first Xamarin application with C-sharp XAML Donnette and Xamarin. Now, what we're going to do is
create an iOS, Android application. We could share that code with windows,
Mac, iOS, or others, but we're going to focus in on those and use Xamarin forms
to build a cross-platform user interface. Now, before I get into that, and it may
seem like we're overwhelmed a little bit, but let's step it back a little bit. Let's roll back here. And let's actually talk about the
technology first that we're using. Now I am a C sharp developer. It's one of my favorite
programming languages. And it's one of the languages that
you can build and use to build a.net applications and.net is a free
cross-platform runtime that works across different operating systems. And there are several frameworks
that are built on top of net that utilize.net to execute your. Your language of choice, C
sharp F sharp or visual basic. And like I said, I'm going to use C
sharp, which is an objective or an object oriented programming language. So Donna is the core foundation. Xamarin is the framework built
on top of.net that enables us. To write C sharp and.net code and logic
and run it specifically on iOS and Android devices, which is really, really cool. And, um, on top of that, we
have a few other pieces of technology that we'll be using. So Xamarin is the framework,
but there are specifically UI. Frameworks that we're going to
use to build a cross-platform native user interface, and
that is called Xamarin forms. So you can kind of think of
it.net on the base on the bottom. Xamarin are giving you those
bindings, the ability to write and run C-sharp on iOS and Android, and
then Xamarin forms on top, giving you that abstraction to write and create
cross-platform native user interface. So it's kind of important to understand
those different building blocks because, um, even though we're going to create
a cross-platform UI, we could add other types of applications and share code
with other types of applications, such as web applications, desktop applications,
um, TVO as applications for apple TV, watch applications and a whole lot more
the cool part about.net and C-sharp. And this thing that I'm
talking about is that you. Learn one programming
language, one framework. You're able to build applications for all
of these different operating systems and devices, which is really, really neat. I started off a building printer software,
um, back for Canon a long time ago. And it was building desktop applications
specifically with two different frameworks for the UI called WinForms and WPF. And it was a natural fit coming
over to build Xamarin applications. Cause I already knew C-sharp
and I already knew.net and how to access the file system. And now the other things that I needed to. So I just needed to learn the UI piece. And of course the iOS
and Android specifics. But nowadays really getting started. It's super duper simple, and
it's really easy to get started. So let's head over to my
computer and let's get going. All right. So you can of course go to xamarin.com
and you'll land right here. And you can learn about all the
different bits and pieces of Xamarin, uh, the different native
integrations that you have for iOS, Android, or other operating systems. I mentioned Macko S T V O S watchOS and
more, and of course, how to share code and build different user interfaces. Here's Xamarin forms, which is that
UI library that we're going to be using to create a cross-platform
native, beautiful application here. All right. So let's actually get going. I'm going to boot up visual studio 2019. Now this is where I'm going to go
ahead and create my application. It's going to be where I'm doing all of
my different development, visual studios, and IDE and integrated development. Environment, there's other ones
out there, um, that you can use to build Xamarin applications. Visual studio is from Microsoft. It's completely free with
the community edition. There's other tiers, of course, but
you can build everything for free with Xamarin and visual studio,
2019, the community edition. There's also visual studio for max. If you're on a Mac iOS operating
system, you can go ahead and also create an application, uh,
over there, uh, which is nice. Now you're able to create iOS and
Android applications on either Mac or PC. Um, it's best if you're doing,
um, iOS to have a Mac around, but it's not necessarily a required
until you're packaging and finally uploading your application and doing
deep debugging, but to get started one or the other are just fine. So we're going to create
a brand new project here. Now, when you go in and you create
your project templates, there's going to be a lot of different settings
here, uh, inside a visual studio. So, uh, often what I like to tell
developers to do is come in and, and narrow it down specifically into
like mobile, uh, here, which is good. And you'll see that there's. Android application iOS application,
and then specifically across platform, mobile app with Xamarin forms. And that's the one that
we're going to choose. Now, if you create one of these
on top Android or iOS, those are going to be iOS and Android specific
projects that out of the box use it. IOS and Android, um, traditional
native user interface, the Xamarin forms, cross platform app still
uses and renders native controls. However, we're going to use Xamarin forms,
which is that abstraction that it gives me one single API to create those apps. So let's go ahead and create
this and I'll say my awesome app. And just go ahead and hit create here. Now this will go ahead and
bring up, um, a few things. Uh, first, if you just install visual
studio, you might get this little, uh, Xamarin messaging broker pop-up. We're going to allow that we're
actually going to use this. This is part of Xamarin hot restart, which
I'll talk about in a little bit here. So go ahead and allow that through. But, um, here, we're going to
see new mobile application and we're going to see fly out. Tabbed and blank. Now this is a newer dialogue that
has been redesigned to kind of show you exactly what the application
is going to look like when you run your application on iOS and Android. These first two templates fly out. And tabbed use a newer architecture of
Xamarin forms, a new modern architecture called Xamarin forms, shell, and it
gives you a shell of your application. And then blank is just
a simple blank screen. It's a single screen application. Um, now, as of right now, this
recording, um, which would be right around Xamarin forms, five dot. Oh, okay. Um, release. Um, what we're going to see here
is that the windows project is highlighted and grayed out here just
because it's not a supportive with shell yet, but will be in the future. So you can select blank. If that's a requirement from my
application, I'm just going to start with fly out and or tabs because
that's going to give me sort of the best architecture going forward. The shell part is really nice. It's going to give me a
structure to my application. And additionally, it's going to give me
URL based navigation, a bunch of other, really nice things that are built in. Let's go with fly out. That's going to have that little fly
out on the left-hand side and let's have visual studio create our project. Now, this setup is going
to be very similar. If you're coming from visual studio
for Mac, you're going to see a Xamarin forms application, and
then you'll see, um, everything that you need to get started here. All right, cool. So, all right, let's
see where I'm on here. I'm on visual studio. Now we do get this nice
getting started page. This is going to tell me
specifically, welcome to Xamarin. Forms. Um, I can come in as our
building my user interface with something called XAML hot reload. We'll talk about that in a bit. Um, and that's going to tell
me exactly how to get started. There's quick start application
information here, but let's walk through what actually got installed over here. So I'm going to zoom in over here. And we're going to see three
different projects over here. Okay. We're going to first see
that I have my awesome app. This is where I'm going to do
a bulk of my application coding specifically as a dotnet standard. Um, library, which enables me to
share code across multiple projects. So inside of here, this application is
going to give me, we can see models, services, views, and view models,
and sort of an MVVM architecture, which is a way of separating my
user interface from the code behind. Um, and then it gives me a few
other files that we'll talk about. So we have my. App and my app shell, and then down
here, we're going to see, I have an Android and an iOS application. And I may be wondering like,
well, James, why are there so many projects inside of here? Well, there's so many projects because iOS
and Android build a little bit different. I could also add an iOS project,
uh, or sorry, a windows project. I might also want to add iOS
extensions for like today. Widgets are different, um, different
extensions into the operating system or add a watch or a TBOs application too. So there's a lot of different things that
I can build and add into my application. Um, here. And any of the specific startup
code or splash screens or configuration and version numbers
are all set inside of that. Um, iOS and Android project. All right, let's hop back over here. So what I'm going to do. Is also now dropped down into the
iOS and Android projects and let's take a look at them really quick. So the first thing that we're going to
note over here is my Android project. And this has a bunch of references here. So what we're going to see is that
there's some normal.net things that have been brought in so I
can use normal Dominic goodness. We're also going to note here
that I have this mano Android, which is my Android specific API. So you can access all of the
iOS and Android APIs in C-sharp. And then down here, we're going to see
two of these little things called new guts and new gits are a way as a dependency. Management system that enables
you to grab third party libraries and first party libraries from the
internet and add them to your project. Similar to NPM, if you're doing
JavaScript or TypeScript type of development, and this is attitude things,
Xamarin, essentials, and Xamarin forms. Xamarin forms we've talked about already. That is specifically our
cross-platform native user interface. And Xamarin essentials is similar to
Xamarin forms, but it is access to cross-platform native features like
connectivity, um, media pickers, um, launching the browser, a bunch of
awesome things that are inside of there. Now, if I show you, um, in this
project, one more time for Android. Let's go ahead and drop
down a few other items here. I'm just gonna zoom in one more time. Now we're going to see that
we not only have references, but I also have, um, these. Other Android specific folders. So these are for my images and
icons on any of that different start-up, uh, information that
I need for my application. Often you won't have to worry
about putting too much code here, but you may have to. And that's what it's there
for in the exact same thing is going to be true down for iOS. So let me go and expand what's
going on over in the iOS project. Let me go ahead and drop
this down and zoom in. We're going to see here
for my iOS project again. We have some different system. Namespaces Xamarin iOS, which
is my iOS specific APIs. And then of course, Xamarin
essentials and San reforms down here. We have resources just like we had
on, on Android, but these are specific to iOS and iOS screen resolution. And then we have some other startup code
here, like APA delegate and the main. Now in these applications, you don't
really need to worry too, too much about the logic and code that's going on here. But if we do open up specifically the,
uh, iOS app delegate, we're going to see that this is the entry point of
the iOS application inside of here. We have a Xamarin forms app, a
delegate, so it has its own version. And then what we see is that
we're initializing Xamarin forms and loading our app. And we'll talk about
that happen in a second. Same thing. True over on Android. If I open the main activity or the
launch point of the application, we also have a forms app, compat activity,
similar to an app delegate here. We set a few different properties. We initialize Amor forms and Xamarin
essentials, and we load the app. Now most of the time, like I said,
you're going to do all of your application development over here
inside of that.net standard library. Now you may choose specifically to
have all of your application logic, all of your services, all of your models. Well, everything inside of that one
single library, which is totally fine. I do that all the time. Um, or you may decide to add a multiple
Donna standard libraries, some things for your models, for example, or
you may want to have your services, um, in a separate library, that's
testable, which is also really nice. You might want to do that. And then your UI completely separate. So it's sort of up to you
what you want to do there. For this example, the file new project,
or we're just going to leave it as is. Now. I mentioned that there
is a thing called MVVM. So there's models, views, and view models. Now, inside of this project, if we
drop it down here, um, what we're going to see is that there's a
bunch of pages and different items inside of here and the models. Are just sort of data objects. This item has some information about
it that I'm going to add into a list. The views also very simple. These are the user interface controls,
um, and pages of my application. And then we have the view model. Now the view models here almost
basically have a one-to-one here's the about view model. Here's the about page? Here's the items view model. Here's the items page. Here's a log-in view model, a login page. So as almost one-to-one. Where this is code that is cleanly
separated from your user interface, and it's also highly testable. So the idea is like, do you have
that clean separation and Xamarin forms has a built-in MVVM framework
that really helps you get started, um, with data binding that we'll
talk about here in a little bit. All right. We talked about that app that we
had earlier and then app, if I open that up is a little piece of XAML. And the XAML, um, of this
application is sort of the entry point into the application. So we have some items here
such as a resource dictionary. This is similar to like CSS, if you
will, where you're going to specify here, for example, a color that we're
calling primary, um, specific style for a button, we can give it different
states and different background colors based on if it is, um, If it is in
the normal state or the disabled state, so we can gray it out or we
can go ahead and use that color there. Um, and then you can add
other, other different, um, information into this app page. Now this is really, really important. Each one of these XAML pages. Here. And this app is as AML page, which
is a, an extensibility markup. Similar to XML has a little bit
of code behind, and you need to hit this little arrow here. See this little, little arrow here. That's going to give you a drop-down. So let me go ahead and do that here. And I guess if there's an
app dot XAML dot, see us. So that is going to give me
the code behind for that page. And we can see, I have my app application,
the dependency service, which is going to register this mock data store. So it's kind of nice. There's this sort of dependency
service built into Xamarin forms. Of course you can use
third-party ones as well. If you've been doing Donna development
use Autofac or, or different dependency injection services, you can use that too. And then the main page of the application
is actually going to initialize a shell. And we'll talk about
that here in a second. But this app class is still really
important because this gives me different information about the specific, um, app. Is it started? Has it gone to sleep? Is it in resume? So it'll give you information
based on what your user is doing. Now. This app shell is really important. Because normally, if you weren't
using shell, you would say, oh, let me just set this equal to the
login page and you'd push and pop pages on the navigation stack. But shell is going to give you
that fly out navigation, all set up for you automatically. So I'm going to go into that app shell. Here we go. And this app shell is
actually really nice. It gives me built in, um, styling
for the entirety of my application. I talked that there were resources
earlier, but the app shell again, is a shell of my application. So it's giving me thing, like what
is my background color, my foreground color, my title color, my tab bar
colors that are inside of here. How do I want to style my tab bars and
my fly fly out items inside of here. And then let me also stylize for example,
the different, um, fly out labels. I want them to be white. And then when they're selected, um, in
here we have this visual state management and what that's doing is saying when it's
normal set the background color to white. And the label to the label color,
to the specific primary color. And then when it's selected set
the background color to primary, so set it's a blue and you can
see it highlighted right here. Now these are a little bit advanced,
but I still think that it is very important to understand, like coming
into a shell application, some of the nice things that you get. And again, we have a bunch
of other items in here. So here we have some custom styling
that we can set on each fly-out item and you can read the documentation
and I'll put it in the show notes on it to give you some deep dive there. But again, if we look up top, um, we have
normally only those resources similar to our app resources, but we have some
information here about our shell, like our title, and there's a bunch of different
bits and pieces that we can add in here. Now, this is the core of it here. This is what I really, really like,
because here we have fly out items. Over here. I could also add a tab bar
tab items into the mix. If you go ahead and see me zoom in
here, you can see that right there. You can add tabs or fly out items, sort
of what is the shell of your application? Well, this application is going to have
two pages basically to fly out items. One is about, and one is brows. You can set the icon. You can set the route, which we'll
talk about in a future episode, which is used for sort of navigation. And then we have brows, which is going to
be our browse page with a different icon. Over here. We're going to give it the
content template, which is a sort of a way of saying, please use
and load this page on demand. When a user clicks on it, here's
the template of what you should load into it instead of just setting the
page, which would create all the pages when the application loads. So we're going to say
here's the about page? Here's the items page. Now, finally over here, we have another,
a menu item over here and this menu item is going to be a log out button. So that's going to be to fly out
items and then you can add as many menu items that you want. Um, and they're very similar,
uh, in general, but it gives you sort of different click behavior
because here we're going to see that when this is clicked, it's
going to perform a different action. Finally down over here. Um, we're also going to define
just other pieces of our applications, such as a login page. You can put it anywhere in your
application and it's going to figure out everything for you. And there's a bunch of information in
here that really helps flesh it all out. Okay. So we've added that. We've gotten some information here. Let's actually run it, that we,
we now have sort of an overview of what the application looks like
and we can start modifying stuff. So. Notice that I have the Android
application as my startup has bolded here, I can come in, I can right click
and say set a startup project over here. Same thing with Android. It's already set as my startup project. So what I can do is simply come
in and build my application. Now when I build it, it's going to
build a compile that Android application directly onto my, um, machine here. Same thing. If I was over on a Mac machine, it
would build everything locally there. So there's a few different pieces here. The first thing is that when
you create this project, it might have to install some SDKs. And additionally, I'm going to tap on
this little button or right up here. Which is to launch the
Android device manager. And we can say, I have one Android
emulator created, I can create additional Android emulators. I can say what operating
system I want to have here. What's the data partition. I can really specify this out. So, um, it's already right. It's already good. I already have one, so
let's go ahead and close it. And we can see in our debug menu
that it's set up right there. Now, if I wanted to deploy it
onto my actual Android device, I could plug it in via USB. And as long as my device is in
debug mode developer mode, I can go ahead and deploy directly to it. But what I'm going to do here
is just simply hit debug. And what this is going to
do is take that application. It's going to start up the Android
emulator that I have selected and start an actual debug session. So this is different than a normal
release or a different sort of quick deploy if you will, because
it is going to basically one to one. Link in and listening and have a two
way communication channel between visual studio and my Android emulator here. And that's also really important to
remember because it may seem like, oh, it's kind of taking a little
bit long to deploy our compile it's because you're doing a debug build,
but that gives us some advantages that we'll see here in a little bit. But here we go. There's my Android application. We can see the visual studio is kind of
going into a little, little mode here. It's kind of God. Um, my debug mode up, I can still come
in and, and look at my solution Explorer. I can come and look at this thing
called a live visual tree, which we'll talk about a little bit
here, but this is my application. I have my fly out. I have about. Browse and then log out here. That was that item menu you
can shift to where it's at. I can click on browse and I can see
here's my different items that I have. I can add another item. So let's say, uh, hello. And then here, I'll say
world, that seems about right. Hit save. And now we not only have a list of data,
but here I have a full navigation to browse and to about, and I can click
on, learn more to launch the Xamarin Quickstar so I can learn about development
and I can of course, go to log out, which will force me to log back in. So this is sort of the shell template. Now I do want to point out
though that what I'm able to do is open those XAML files. So here's that about page? And we can see exactly
what this thing is doing. This about. Page has a reference to
that about view model. It has some information such as an
accent color, which is this color here. And then. Um, if I go into, uh, specifically
the different items here, let's go ahead and open this up. Uh, we have a grid, so we have
a grid of auto and then fill and inside of here, we have two items. We have the stack layout, which
is displaying this big Xamarin logo that we can see here. And each one of these elements is a. Xamarin forms element. So the stack layout is, is, is telling
me that I can stack these stack items inside of this grid that will
automatically calculate the height or fill the rest of the height here. Um, I then have a scroll view down
here, below here, which is in a grid. Uh, row one. So zero is up here on the Xamarin
and one is down here and it's going to allow me to stack different
labels and buttons inside of here. And each one of these controls or elements
as we call them or views, maybe different kind of some ways of saying it are
enabling me to create native controls. This is a native Android
button that I have here. These are native labels. This is a native flyout
navigation that I have on my iOS and Android application here. So what's cool about this though,
is that when I set my application to debug, it gave me the ability to come
in and get this live visual tree. I used it earlier. It's going to show me
my entire application. I can actually come in and I can
navigate directly to the button here, which is really cool. I can see, I can see all
the different items here. But additionally, I'm using
a cool piece of technology. That's built into Xamarin
called XAML hot reload. So here, for example, if I wanted the
background color of this button to be orange one, I'm going to get rich
IntelliSense here when it hit orange. And what we're going to see is a
button updated automatically to orange. And I could say, you
know, click here to learn. More and as I type it
automatically updates for me, which is really, really cool. Um, I can add more items in here. So if I wanted more buttons, for
example, I could just add another button and another button shows up. Um, and then I can of course
delete that button too, so I can go ahead and delete it automatically. As long as I'm debugging my
application, I'm able to go ahead and. Use XAML hot reload to automatically
get the live visual tree and update things automatically inside of the
running application, which is really, really neat and makes it really nice
when you want to adjust certain things. Like, for example, maybe I want
this to be, you know, 44 and I want it to move down or I want it to be
100, this padding that's being set right here in the spacing between it. So I go back over here to 44. Well, there we go. So you can learn as you take the
template and dive through the different sections of what does it mean to go
into browse, tap on an item to go through the different application,
the fly-out and the tabs Xamarin. Form shell applications give you this
nice big template compared to just a blank page, but it doesn't mean that
you can't just strip it back to its core and delete a bunch of stuff, which
we'll do as we continue to build out and learn about how to use Xamarin
forms and, um, Xamarin forms, shell to build these types of applications. So I've shown you so far how
to get it onto your Android emulator, how to create an Android
emulator or put it on your device. But the next thing I want to do
is talk about, um, Xamarin hot. Restart. And, um, this is going to
enable me to debug directly onto my Android or my iOS device. That's over here. That'll plug into my windows machine. So I have a right over here. So I'm going to go ahead
and stop debugging. And I'm going to go ahead and
close the Android emulator. Over here now. Um, hot restart is a preview feature. So if you come into preview in here,
we'll see environment preview features, and there's a bunch of different
features that are inside of here. Um, which are you can, you can
go ahead and turn on, turn off. If you want to experiment with it. And specifically we're
going to want to use. Xamarin hot restart over here. So I have it turned off right now. So we're going to want to turn
that on, which is a very, very important, um, piece of the puzzle
here to actually start deploying and debugging our, um, application. On our iOS device. Now, if you don't have an iOS device,
you can connect to your Mac machine, get a remoted iOS simulator over there. And, um, that will enable you to
pop up an iOS simulator directly, directly on your windows machine. And of course, if you're on
visual studio for Mac, you have your iOS simulators right there. So we're going to turn that on. Now I also want to talk about, um, the
different settings down here in Xamarin. You can see, we have Android settings,
apple account settings, iOS settings, but you also have different XAML settings. And specifically we have this hot
reload and here we can see that we have these sort of different settings here. And you'll see the Xamarin forms one. And the one that I was using here
is changes only, and that's going to be the new default going forward. That's why I'm showing it. It may already be the default for you. Um, but I am currently as of today,
let's go ahead and date this video visual studio help I am using. Um, the 16 dot eight preview four
version of visual studio 2019. So maybe a little bit different
for when you're using, but the hot reload will work exactly the same
and hot restart is also there. So even if you're not on the
preview versions, totally fine. The cool part is that you can run
the preview versions side by side. Okay. So I'm going to close. Um, Uh, visual studio here because
I just turned on hot restart. I wanted to give you a very
similar experience to what you may be going through, and we're
just going to get loaded up here. All right. So here's what we're going to do is I'm
going to take my actual iOS device here and plug it into my windows machine. So let's go ahead and do that. Oh, really quick. Now hot restart specifically
is in preview still. So you saw me turn that on. So let me go ahead and unlock my device. There we go. And you not only have to, um, install
visual studio turn on the feature, but you also have to install iTunes over here. So I have that installed and ready to go. So here we go. My iPhone is plugged in and what I'm now
going to do is simply go on to iOS and set that as my startup project over here. Now when I do this, um, a few
different, uh, modes are going to be, um, enabled over here. So if I go ahead and zoom in really
quick here, we're going to see that I am have the ability to debug to
an iPhone or to an iPhone simulator. That's really important to know if you
go to an iPhone simulator that is going to be, um, Um, connecting to a Mac, um,
across the, the wire across your network to have the iPhone remoted simulator
pop-up and I phone, you can either plug your iPhone into your Mac or in this case,
we're using hot restart, which will enable me to plug it directly into my machine. So let me go ahead and just, um, make sure
I can unplug this and replug it in here. Make sure everything pops
up in place inside of it. And here we go. Well, I should be able to do is just hit,
uh, deploy and see if this will build. So let's go ahead and see if this is going
to build and if my changes took place. So again, I'm going to go
down to preview features. Let's make sure that I turn that on. No, I didn't. Okay. I must have unchecked it. So let's go ahead and
try this one more time. So I'm going to go ahead and close
it down and reopen it one more time. There we go. Make sure that you
actually hit that checkbox. I think I went off of
it and didn't save it. That was probably important. And didn't hit save. So let's go ahead and load
it one more time again. I'm going straight through no edit. So, um, you know, live and breathe the
exact same way that many of you are experiencing this for the first time. If you're setting up visual studio in
the exact same way now let's double check that setting just to be a
hundred percent sure preview features. There we go Xamarin hot restart
over there, which is nice. And, um, let me go ahead. And then again, like I said,
I'll plug in my device over here and we should see a pop-up. Into here. There we go. Perfect. So I want to show you the
difference between before hot restarted, after hot restart. The difference was, is previously I
only had remote device, which would be a device plugged into my Mac machine,
but now I actually have my iPhone. That's plugged into my windows
machine over here so I can select the iPhone and just hit debug. Okay. Now what this is going to do
is take me through the hot re. So, uh, the hot restart setup process. Now, one thing I did do ahead
of time is I did go ahead and I logged in to my apple account. So you do have to have an
apple account over here. So I'm going to go ahead and resign in. There we go. What's important here is that to be able
to deploy to an iOS device, you have to have a paid apple developer account. And that's how restart works. You have to have that account. You have to have a set up and it's
doing a bunch of work in the, in the, in the code behind here to
automatically get your device. Everything's set up and ready to deploy. And that's it. I just select my team and I hit finish. And now what it's going to
do is build up a magic bundle to be deployed to my device. So, what we need to do is, um,
go ahead and show you my device. So I'm going to use an application
that I bought called reflector. And this is specifically reflector three. And what this enables me to do is show
you my iOS device, but mirror it over here to my windows device, this is a
super nice for demos and things like that. And we can see, we have, um, visual
studio doing stuff, doing the debug process, spinning everything up for me
and then deploying it to my actual device. So let's see, it's going to go through it
deployed and it starting a debug session. And if I go over here, boom, now
we're deploying we're hot RESA. Reload is initializing how
to restart as deployed it. Um, and now I have my about page. I have my live visual tree
over here, which is nice. And of course, if I go into that
about page where you could go ahead and, um, change some stuff. So let's go ahead and set,
um, always on top for this. And I can then maybe change this to red. There we go and we can see it
changes to red automatically, but change it back to blue. That same hot reload event XAML
is happening automatically for me. If I want to come in, I
want to add more buttons. Like I saw earlier, I can add more
buttons and they show up on my device. That's sitting like right over here. If you could see it,
it's right down there. That chords a little
bit low and that's it. All right. So that is how I can start to develop
deploy iOS and Android applications across iOS and Android can always add in windows
devices, in their Mac devices, in there as different project heads that I want
to deploy to, or other type of projects like TBOs, or watch a Wes or extensions
or a whole lot more while you can do. But what I wanted to do in this
specific video is walk you through. The file new, the getting started. We have a sort of building applications
that we're going to do that in the future, modifying it, but I want you to know the
building blocks that are inside of that project, because there's a lot there. But as we start to build out the
application here on my YouTube channel, um, you're going to see that. What's built into Xamarin forms
while it looks like a lot. And the different shell components gives
you a lot of really nice features that enable you to be really productive. Today. We created a brand new project for
iOS and Android using Xamarin and Xamarin forms, and specifically the
brand new shell templates for fly out. We've gone ahead. And we went through the different
project notes, talked about.net standard. That's also important. We then took a look at how to create
Android emulators on the machine and then deploy to an Android emulator. Then finally we used Xamarin
hot restart to deploy. Immediately to our iOS device that
was plugged into our windows machine, uh, instill get those great features
such as the live visual tree. And XAML hot reload that enabled me
to make changes to my user interface and see them updated in real
time into my running application. All I'm debugging so I can have
break points or do anything else. And that's going to do it for this. Episode it's very longer than I thought
it was going to be, but I hope that you actually find it really helpful
to go through all of the different pieces of your very first Xamarin
application with Xamarin forms in shell. Now, of course, I want to remind you
that I do live stream on Fridays, on Twitch at twitch.tv/james Monta, Magno. I'm over there and I Twitch stream. Coding live. So I usually am doing Xamarin applications
at sometimes desktop applications or web applications with blazer. Um, but you're feel free to hang
out, ask questions, especially if you came and watched this video, I
can get some nice follow up there. And what you thought. Of course, I'll read all of
the different comments below if you have specific questions. Um, and I'll add all of the
different documentation links. So you can go ahead and follow
up and follow along on the quick start guides on the different shell
documentation and all of those other bits and pieces that you need. Don't forget to subscribe and
hit that notification bell. So you get notified every time I
release a new YouTube video, but that's going to do it for this a week. Hope you enjoyed it. And let's start to not only get
started, but build out an application now every single week here on this
channel and make something really cool. So come back next week for the next
episode, and I hope that you bye.
