How to Start a Xamarin App from Scratch [Webinar]

How to Start a Xamarin App from Scratch [Webinar]


Hello, everyone. And welcome to today’s webinar. How to start a Xamarin app from scratch. My name is Aaron Melamed. I am a Product Solutions Engineer at Syncfusion,
and your presenter for today’s webinar. If you have any questions you can enter them
into the questions box on the right side of the screen at any time. While we will not be answering the questions
live today, we will send a link to our blog post to all registrants as soon as it is posted. So please post any questions you have throughout
this webinar. This and previous webinars will be available
on our YouTube channel. And without further ado, let’s go ahead and
start the presentation. Okay, so for today’s webinar, I decided to
do something a little bit different. On the last webinar that I did, I know so
we got a lot of requests to start a project from scratch. A lot of our viewers wanted to see the entire
process of creating an application, not just having a readymade application and then adding
some Syncfusion controls to it. So, with this, with today’s webinar, that’s
what we’re gonna do, we’re gonna create a project from scratch, I’m gonna show you how
to embed the Syncfusion controls into it, how to download them, and then, of course,
how to use them and create at least a starter template for a much larger application. So, to begin, we’re here in Visual Studio. So, because we are doing this from scratch,
there won’t be any code to share, you’ll be able to follow along and essentially write
the same code that I do. So, to begin, you’ll wanna have Visual Studio
open, and from here we’re gonna go ahead and create a new project. Since we’re focusing on Xamarin today, I’m
gonna go ahead and create a brand new Xamarin project, so this is found under the Visual
C# section and then underneath the cross platform category underneath that. It’ll be the first option the mobile app under
Xamarin forms. In this case I’m gonna leave the name at the
default. I want to keep it short since I do have other
projects with longer names and that can cause issues. If you’ve ever worked with Xamarin before,
you might know that long project names can cause issues, so I’m just gonna leave it at
App one for now. But of course you can change yours to whatever
you’d like. So I’ll go ahead and create this project. Now, next up is the project template. So we’re gonna create a blank app, we’re not
gonna use the master detail template since we are gonna be using the Syncfusion navigation
drawer control, and that will kind of take the place of that master detail template. For platforms, you can choose any combination
of platforms that you’d like. For this presentation, I’m only gonna focus
on Android and iOS. I’m gonna go ahead and check UWP, although
I normally do leave UWP active. And then third, for the code sharing strategy,
we’re gonna select .NET standard. .NET standard is what has replaced the old
PCL libraries, so .NET standard makes it easier to have shared base class libraries that are
platform-agnostic, which was not true with PCLs. As far as going deeper into the differences,
I would leave that up to you. Microsoft has made several posts on the differences
and advantages of .NET standard over the old PCL sharing strategy, so, I definitely recommend
reading their various blogs on the subject. But all we need to know for now is that we
are gonna be using .NET standard and this is gonna be .NET standard 2.0. So, once you’ve made those choices, go ahead
and click Okay. And at this point Visual Studio will go through
the motions and create and set up our solution with the two projects that I selected. If you chose all three you’ll get three projects
in your solution. So, at this point it’s loaded but it is still
actually doing some work in the background, so while that’s happening, I’m gonna pull
up my browser and I’m gonna direct you to the help.syncfusion.com website. So this is the Syncfusion online documentation
which, again, is help.syncyfusion.com. And we’re actually gonna be using this quite
a bit throughout the presentation. So I’m going to go to the Xamarin forms section
of the documentation, we are gonna be creating a Xamarin forms application. And from here we’re gonna be utilizing a lot
of the documentation for the two controls that we’re gonna be showing today, the navigation
drawer and the list view. So, hopefully by this point Visual Studio
is done. Looks like it is not, so we’ll just give that
a second. Okay, looks like at this point it is finished. Or not, still waiting. All right, so while that is still doing something. What we’re actually gonna start doing, I’m
actually gonna point you to the correct place where we’re gonna start in the documentation. So, when we get the project up and running,
the first thing we’re gonna wanna do is actually download and install the Syncfusion assemblies. There are two ways we can access the Syncfusion
controls, if you have a free trial or if you have a license with Syncfusion whether it’s
community or any of the other licenses, and you have access to our Xamarin forms controls,
you can just log into syncfusion.com, go to your account and download the product, either
the essential studio or the specific Xamarin controls themselves. Otherwise, if you would rather not reference
those assemblies locally, we can also go to the download and installation section in the
documentation, go to your preferred platform of choice, whether it be Mac or Windows, and
then from here we can find the installation instructions for configuring NuGet. And that’s actually what I’m gonna be using. I’m gonna be pulling these packages from our
NuGet feed, so if you would like to go ahead and set that up just go ahead and follow these
instructions. Let’s check back on Visual Studio. All right, so now it looks like we’re ready
to go. So, like I said, the first thing I’m gonna
do is I’m gonna go ahead and configure the packages that I’m gonna be using for this
project. So I’m gonna right click on my solution and
let me just do that one more time. I’m gonna right click on the solution and
go to manage NuGet packages for the solution. Now, because I’ve actually done this before,
you’ll notice that if I go to package source here in the top right, I do have a Syncfusion
Xamarin NuGet feed here already available. So if you were to follow the instructions
on the web page that I just showed you, it would tell you to go here, click on the gear
icon, which will take you to your package sources settings page where you can add a
new package source, so you’ll be asked for the URL, and you’ll be asked to give that
URL a name so you know what controls are coming from that feed. So, all that can be found in documentation,
so, depending on whether you’re Mac or Windows, you’ll get the NuGet feed, so here’s the one
for Xamarin, you’ll plug that in to your Visual Studio, and then just give it a name. I gave mine the name of Syncfusion Xamarin,
and I specifically called it’s Syncfusion Xamarin and not just Syncfusion since we do
have different NuGet feeds for different platforms. So you can see down here I have one that’s
disabled called Syncfusion MVC, so this is for our ASP.NET MVC controls. So, obviously, I wanna keep those separate. I wanna know what they are, so, if you are
creating a name for it, make sure it is specific enough in case you do use other Syncfusion
controls and you also get those from NuGet. Okay, so, with that out of the way, now what
we can do is switch our package source over to NuGet…sorry, to the Syncfusion Xamarin,
or to all if you’d rather do it that way. But it’s quicker if you just specify the Xamarin
Syncfusion feed. And then from there we’re going to browse
those controls and find the two that we’re gonna be working with today. So the first one is the navigation drawer,
so let’s just type in navigation in here, it’ll search, will come up with a couple. Whenever you find the navigation drawer, you’ll
notice that there are three different versions. There’s navigation drawer, then there’s navigation
drawer Android and iOS. Since we’re working with Xamarin forms, we’ll
wanna stick with the one that just says SF navigation drawer. Also, if you read the instructions, it will
tell you that you do need to install it to all projects in the solution, so, just go
ahead and click the project checkbox and that will select everything. And then just make sure to install the latest
stable version. When you click install, it will ask you to
accept the license, so go ahead and accept those. And then just wait a few seconds for the packages
to install. You can monitor the output window down here,
and it’ll let you know when everything is finished. All right, looks like it’s done. So, next up, we’re also going to include or
install the list view, so let’s go ahead and type in list view and there we go. So we have one component for that. And because I’ve already installed the navigation
drawer, my project checkbox is already checked for me so all I need to do is make sure I’m
installing the latest stable version and then click Install. Once again, we wanna accept the license agreements,
go ahead and do that, and hopefully my output will actually automatically scroll to let
me know when everything is done this time. All right, so now that is finished as well. So, at this point we are ready to begin. So we’ve installed the components into our
project, and now we’re ready to actually write some code. So I’m gonna close out that tab, I don’t need
that for now, and now the first thing I’m gonna do in this application, my shared project,
is I’m going to add a new folder, actually a couple of folders. So the first one I’m going to add is view,
we are gonna be adhering, at least somewhat, to the MVVM design pattern. So I’m gonna create a view folder, I’m also
going to go ahead and create a view model folder. For now, I’m not going to create a model folder,
I’ll do that later, so, these are the only two we need at this moment. The next thing I’m gonna do, since I do wanna
follow MVVM, is I’m gonna move the default main page that’s created with the project,
I’m just gonna move that into the view folder. I’m just gonna drag it in there. And because I have dragged that in there manually,
I do need to update some references here, so I need to add .view to the class in Xamarin,
I also need to do the same thing for the namespace and the code behind, there we go. So, in the code behind I need to update the
namespace to include .view, save that. I also need to save the XAML, and that will
get rid of this red squiggle in just a moment, there we go. All right. Next thing I need to do is, just so I don’t
forget later, I need to go ahead and update my app.xaml.cs as well since it is currently
looking to load the main page from the route, the project route, I wanna load that from
that view folder. All right, so I’ll save that as well and close
that. So now we are actually ready to begin. So, the first thing I need to do in order
to get my first component in here is I need to go back to that documentation. The first thing I’m gonna do is I’m going
to add the navigation drawer, that’s the main component that’s gonna be on this main page. Since I do want of course to have a menu in
order to toggle between pages inside my application. So, I need to go to the documentation because,
if you go into here and go down to navigation drawer, you’ll notice that for essentially
all the controls we have here, there is a section titled Getting Started. Whenever you’re dealing with these Xamarin
controls, you wanna make sure you check out the Getting Started page, since a lot of times
there’ll be some important information you need to know in order to properly configure
these components. As an example, you can see right at the top
there are some additional steps for iOS that need to be done in order for this control
to render properly in that platform. So, in this case, I know that I need to copy
this line right here, and I need to paste that into my app. or my app delegate file. So I’m gonna go back to Visual Studio, open
my iOS project, go down to my app delegate, and paste that line of code right above that
global Xamarin forms line. All right, so that takes care of that, so
now, I can save that in my app delegate and move back over to mainpage.xaml. Next thing I need to do is pay attention to
this, there’s another additional step for you to repeat. I am not using UWP in this particular project,
so I can skip this. And then next I need to initialize the navigation
drawer. In order to do that in the XAML, I need to
first create a namespace in order to call the appropriate assembly. So, in order to make sure that happens, I’m
going to copy this line here, just the parts that’s in the brackets, which is essentially
the namespace we need in order to call the assembly. So, I’ve copied that, so now I’m gonna move
back over to the main page and I’m going to paste that in. So now we have this namespace called navigation
drawer, and we can use that to call up our navigation drawer. So, I’m gonna replace this label here with
that, so, this will be navigation drawer. Inside of that will be the Syncfusion navigation
drawer. The first thing I’m gonna need to do is just
give it a name, and in this case I’ll call it Nav drawer. The next thing I know I need to do, because
I’ve read ahead in the documentation is, I need to give the drawer itself a width so
that whenever I slide out my menu, it slides out at an appropriate size. So, the documentation recommends about 200
pixels, and I know for the project or the menu items that I’m gonna have in my particular
menu, I only need about 150 pixels worth of space in order to make everything fit. And that is essentially it for now. So, I can go ahead and close out my navigation
drawer tag there. And now the next thing I need to do is populate
that navigation drawer with some buttons. So, for the navigation drawer menu, I need
to add some buttons inside of that. The first thing I need to do is first access
that navigation drawer menu itself, the actual drawer, so I’ll go back into my navigation
drawer namespace, call up the Syncfusion navigation drawer, and then here I will access the drawer
content view. Inside of that will be my container for my
buttons. In this case, because we have also downloaded
the Syncfusion list view, we’ll be using that as the container for the button. Now, there are a number of different ways
you can go about doing this, you can use the native Xamarin forms list view, you can use
the standard stack layout, or a grid, or something like that. And they are to create some buttons manually. However, we’re gonna use the Syncfusion list
view because it will kind of help out with some of the process, it’ll make some things
easier once it’s all set up. So, once again, because I’m about to use a
new control, I need to go back to the documentation, go to the list view, go to Getting Started,
and find my getting started requirements. So I need to go down here, there are no additional
steps for Android, there is an additional step for iOS, again, so I need to copy this
line now. The SF list view render, so then I need to
copy that, and this time it goes below that global line and above the load application
line in the app delegate, so, let’s go back to my app, go back to the app delegate file. I’ll put a space here, paste that line in,
and then there should be, yep, so now we have to fix this little reference here. So we’re using Syncfusion list view Xamarin
iOS, or Xamarin forms. There we go. And now we’re done with that. So now I can come back to my main page and
actually go back to documentation, and now I need to find my namespace. So, in this example, you can see the namespace
is called right here. This is where I get the namespace for that
list view. I’m gonna copy that and I’m gonna paste it
into my XAML here. Now, in this case, I’m actually gonna make
a change to this namespace. So, if you noticed, the first one that I copied
said, navigation drawer, or gave me navigation drawer as my namespace, and that’s good, but
the second one, the one for the list view, gave the namespace a name of Syncfusion, and
that’s a little too generic. Since there are other controls here, we’re
in the documentation we also give a namespace as syncfusion, if you have multiple namespace
as the same name, that can cause conflict, so I’m just gonna go ahead and change that
to SFLV standing for Syncfusion list view, just to make it a little bit easier to call
that. So now that I have my namespace available,
I can go ahead and call that component. So this would be SFLV, and then inside of
that I’ll get the SF list view. And again, I’ll give this a name, so I’ll
give this one the name of Main Menu. And I’m gonna go ahead and create an item
tapped event. I’ll leave it blank for now…well, actually,
I’ll go ahead and give it a name, so, this is gonna be called Update Page Content. And then I will also go ahead and kind of
give it some styles. I’ll set up a background color and I’ll use
royal blue in this case. Okay. So now I can close out that list view and
that’ll get rid of the squiggles. So, now we get into the the fun part. So, now we need to figure out how do we get
buttons into our list view, and more importantly, how do we get those buttons to actually connect
to other pages. And so this is where we start to deviate slightly
from MVVM. Because in this case I am actually going to
go into the code behind of the main page. And I’m actually gonna add my buttons here. Now, it is possible that there’s other ways,
but, in order to keep it simple for this demo, I don’t wanna go into custom behaviors and
things like that, so I’ll just keep it simple and stick with the code behind for now. So, it’ll make sense why we do it this way
once it’s all put together. So let me make sure I have all my sample code
here. All right, so the first thing I’m gonna do
is I’m gonna create a container for my collection of buttons. I’m gonna use an observable collection. This is gonna be a typed strength. Again, I’m gonna keep things simple. If you want, you can of course create a model
for this, you can create a custom class that can contain additional items. So, for example, if you wanted your buttons
to also include icons, then you might wanna create a custom class that includes maybe
two strings, one for the name of the button, and another one for a URL or something like
that, that will let you navigate to a certain image, and that way you can have an icon and
a label in your button. But, again, I’m gonna keep this simple for
now. So this will just be the string collection. I’m gonna call this Main Menu Item List, and
this is gonna have a getter and setter. All right. So now inside…I actually need to fix this,
so now we need to call in the object model namespace. There we go. And now, in my constructor for the main page,
I’m gonna go ahead and give, repopulate that container with a new instance of that observable
collection. So, this will be set to a new instance of
observable collection, it’s type string, there we go. So now, inside of that, we’re gonna start
to add our buttons, so, for this, this is gonna be fairly simple. Main menu itemlist.add, and because it’s just
strings we’re gonna put our string in there. I’m gonna copy this a few times just to give
myself some space to add these buttons, about four. So I have Home, we’ll have Search, we’ll have
Settings, and let’s say Help. And that actually, just so you know, I’m not
gonna go into actually creating all of these different pages, these are just to populate
the menu with some buttons. We will be creating the search page, but that’s
really the only one. Okay, so now we need to call , or we need
to set the main menu, mainmenu.itemsource. And we’re gonna set that to be equal to the
main menu item list. All right, so now I need to figure out why
this isn’t coming up, so let’s…oh, this needs to be saved. There we go. And that should fix that. Okay. So now we have a list of buttons and that
list of buttons is now being populated into our navigation drawer content view. So, if I were to run this, I should be able
to see a navigation to work with some buttons inside of it. So I’m actually gonna go ahead and do that. And to make sure it works, I’m gonna actually
delete this line for now, because I know that’s gonna give me an error, so let’s delete that,
save, and let’s go ahead and open this up in our Android emulator. So, we’re gonna build this app for the first
time, that’s gonna take a little bit longer than it normally does. All right. Now it is actually loading into my emulator. So, as I go along into this project, I’ll
also be testing this in iOS. I do also have a remote iOS simulator running,
so we’ll be looking at this in both Android and iOS. All right. So we’ve built successfully and now we’re
deploying. Now we’re just waiting for it to start up
in the emulator. All right, we have a running app. So, obviously, everything is blank since we
have not created any pages, but, what we’re looking for is a slide out menu. So, as you can see, it does not take much
code at all to create a working navigation drawer. And at this point, because this is a fully
realized component, we also have access to a lot of different properties we can set to
change the look and feel as well as the behavior of this navigation drawer. But, for now, I’m satisfied with what we have. This is all we were trying to do, just create
some menu buttons to click on. One thing to note by default, and I kind of
skipped over this when setting up the navigation drawer on purpose is that if you do not set
your header and your footer height, you’ll get these blank areas on the top and bottom
of the navigation drawer. And so you do have the ability to set header
content, so if you’d like to have something like a profile picture or something like that
above or the top of your navigation drawer, you can easily do that. Same thing with a footer, if you wanna have
some persistent links or something like that, maybe a sign out link or something to that
effect, you can easily do that as well using the footer. In this demonstration I’m not gonna be using
those. I’ll go ahead and stop debugging and I’ll
come here to my navigation drawer and I will go ahead and enter in my drawer header height,
and I’ll set that to zero, and also the same thing with my drawer footer height. Since I will not be using those in this particular
project. I’m just gonna clean up the space in here. There we go. Okay. So we have a working navigation drawer, that’s
great. Next thing we need to do is make these buttons
actually do something. So this is where things get a little bit more
interesting in this code behind, and this is also kind of why we’re not using MVVM or
sticking to the MVVM design pattern strictly in this case. What we are going to do is essentially use
the code behind as a view model to set up the behavior of the buttons. The next thing we’re gonna do is I’m gonna
go and add back the item tapped event that I cleared earlier. So item tapped, all right, and I’m gonna call
that update content page, all right. Now I’m gonna take that and I’m going to go
ahead and create that method in my code behind, and it will take a couple of parameters, so,
there will be an object, a sender of type object, and then we’ll also be consuming the
item tapped events from the Syncfusion list view, so I’ll need to type in syncfusion.listview.xforms.item-tapped-event-arcs. And that’ll be of SVE. So, this is what we need in order to properly
consume the item tapped events from our item tapped event inside of the list view. And at this point we also are gonna set this
to avoid that’s not gonna return anything. Okay, so, what we’re gonna do in order to
get this to work is actually utilize a simple switch statement. So, just type in switch, tap tab to use the
default template. And what I’m gonna do is I’m gonna take the
item tapped event art so that he will get the item data that it represents and I’m gonna
set that to a string since all we’re doing is getting strings from our menu items, and
then I’m going to write out my cases. So, case one, double clicking it’s not working. So, case one
will be Home, and with Home I’m gonna set up that to just break, so there’s not really
not gonna be anything there for Home. And then next up we’ll have case two, which
in this case it’s going to be Search. And for that one, what we’re gonna do is we’re
going to set the nav drawer, so we’re gonna call the name of the navigation drawer itself
which was nav drawer, and from that I wanna get the drawer…sorry, I’m gonna get the
content view, the content view as a navigation drawer. And I’m gonna say it to a new instance of
a page that I haven’t created yet actually, so I’m gonna call this Search Page, and I
actually kind of jumped the gun here, but that’s okay. So, in my view folder, what I actually need
to do is add a couple of pages, so, add some new items, one of them being this content
page. This page is gonna be called Search Page. And we’ll add a couple more, so we’ll do another
one. This one will be home or actually should have
been Homepage. Next up is settings page. And then, lastly, I have my help page. And again, just a reminder, I’m not actually
gonna populate these pages with any content. They’re just there to act as placeholders. So, in each of these cases, the default content
page does include a label that says, “Welcome to Xamarin forms.” So, in this case, I’ll just kind of rename
each one of these to say, for example, this is the help page, so I’ll say, “This is the
help page.” Just so that we know that we are looking at
the right thing when we do actually switch over to these. So, homepage, I’ll just leave that one as
Welcome to Xamarin forums. Main page has our navigation door. Search page we are actually gonna do something
with. And then we have settings page. And I’ll just change your settings here. Okay. Now you can go back to that main page code
behind and you can see that my search page is coming up correctly. And now I just need to make sure that we break
after that case. And so now we just need to kind of do this
for the rest of the pages that we have a button for. So next up is settings, and we’re gonna do
the same thing. We’re gonna call it Nav shore, we’re gonna
get this content view, and we’re going to set it to a new instance of the new instance
page. And then we’re gonna break. And then, finally, we have our help page,
so, here we have help, and then we have nav shore, content view, and new instance of page,
and break. And in the interest of, let’s see, did I do
something wrong there? So I’ll just go ahead and add the homepage
as I did create that. So, navigation drawer, content page, and new
instance of Home. So, one thing I forgot to do here, you’ll
notice that all these had red squiggles. Since we are setting the content view of the
navigation drawer, we cannot actually set it to an entire page, we can only set it to
the content of those pages, so, we need to access the content property here, so .content,
and same for the rest of them. And so, this specific way of implementing
things, it will become a bit more interesting once we do actually need to include some more
complex pages than what we have here with these placeholders. And, again, that’ll make more sense once we
get to that point. So the last thing I wanna do here in this
method that for my update page content is to make sure that the navigation drawer closes
after I tap on an item. So I wanna tap into the toggle drawer method
here, I’ll just call that to make sure that if it’s open when I tap on something it then
closes. So now let’s go ahead and test this out. We’re going to run this once again in our
Android emulator and then the next time I will run it in the iOS simulator. All right, so things are a little bit quicker,
actually built the first time. Okay. So now we have our navigation drawer, again,
you can see that the header and footer that were there before are gone. Everything’s kind of running up against the
edges here, which we’ll fix that later with some padding and some margins. But the main thing we wanna look at is what
happens when we click these buttons. So you can see, Welcome Xamarin form, so that
did change. The navigation drawer closes whenever I click
on a page, change your settings here. Yeah, I did not change the text for the search
page. So yeah, so this all works, everything is
great. So, now we can move on from there. Now let’s actually do something a bit more
complex. So, what happens if the page that you wanna
switch to contains more than just a simple label, or simple controls? What if you need to actually bind some data
to a view model on the page that you need to include or switch to in your navigation
drawer? So let’s actually do that. Now, at this point, in the interest of time,
I’m gonna cheat just a little bit and I’m gonna import an API service that I created
previously. So, this part isn’t that integral to the presentation,
so I’m just gonna go ahead and import this from a previous project, and I’ll talk through
it, but, like I said, not necessarily the most important part of what we’re trying to
show here. So, I’ve got a services folder that I will
be importing from my previous project. Here we go. So, I will firstly need to create the folders. There’s gonna be a services folder and this
is gonna contain an API, and we’re gonna use this on the search page, and what we’re gonna
be searching for are recipes. And so inside of that folder I will get this
service. All right, so
that’s in there now. And then we also will need a model in order
to properly work with the data that comes back from that API, so I’ll create another
folder and this will be my model folder. I’ll go ahead and import that model as well. Okay. So now what we’re gonna do is, inside of the
search page, we’re gonna use another list view. So we’re going to use a list view to kind
of display the images that are coming back from that recipe API. So I’m gonna get rid of the stack layout,
I’m not gonna…actually I am gonna use it. So I’m gonna keep the stack layout, I’m going
to get rid of the label inside of it. And the first thing I wanna add is a search
bar. The search bar is what’s actually going to
activate the list view or the actual API calls to get data back, and then ultimately populate
this view. So, inside this search bar, we’re gonna have
a placeholder that just says Search For Recipes. We’re also going to have a search command,
so this is actually getting slightly out of scope for what the project is meant to accomplish. I’m not really gonna talk too much about the
search command or anything like that. I did do a previous webinar where I went to
a little bit more detail about that, so if you’d like to check that out, it was the previous
Xamarin webinar that we did. I forget the title of it, though. We’ll have a link to it in the description
for this one. So I’ll leave that empty for now, and then
we’ll go ahead and set the options to start, because I want this to be left-aligned essentially,
and then I’m gonna have a text property. So, now, at this point I’m going to go and
create my view model for my search page here. This will be new class, this will be a search
page model. Inside of that we’re gonna have a couple of
things, and let’s pull those up. So, first things first, just like before,
we’re gonna have a container for our images. So public observable collection, this time
it’s gonna be of type hit which comes from my model class. And I’m just gonna call this recipe list. That’s fine. And we’re gonna have a getter and a setter
there as well. Next up, I’m gonna go ahead and include this,
so I’m gonna use inotify property changed in order to get some of this to work. So I’ll go ahead and derive from that. Changed, which I spelled corrrectly? Yeah. And then fix that, and then one more time,
we’re gonna implement the interface, and that can go right there. We’ll also go ahead and implement object model,
and then this is coming from my model folder. And since I’ve imported this from a different
application, this is gonna be App one and so is my service. All right, and in my services you’ll also
notice that I am also using this…I’m using Newtonsoft JSON, so I’m also gonna need to
import that into my NuGet package. All right, so let’s go ahead and do that right
now. And like I said, I’m kind of breezing over
this part of it because this is not the real purpose of what we’re trying to do today,
so the API doesn’t really matter what it does or how it works, it’s more about what it looks
like when you need to do something more complex, like pulling data from another source and
having more complex controls on your page and needing to bind to a data source through
a view model. There is a special way you need to accomplish
that through this navigation drawer component that we’ve included on that main page. All right, so now that is installed. So let’s go back to my view model. And, at this point, I’m just gonna do some
copying and pasting just because it’s going to be faster. So, I’ve got a search text string value that
will contain the actual search text as input into the search bar, so that’s what that’s
for. The search command is what is going to actually
activate when I hit the Enter button or otherwise do my search. And before I paste in the next part, I need
to create a constructor for this class. I’m sure I spelt that wrong, that’s okay. Search page view model. I’ll go ahead and fix it here. Yes. Okay. Fix that as well. All right. So now, inside of this constructor, we are
going to populate that recipe list just like we did before, set my search command and then
actually bring in the search task. So I’m gonna use a task as I’m doing this
assynchronously. So there’s a task call search images, this
will call the API, populate the recipe list. I might just as well rename it, there we go. We need to implement Xamarin forms here, task
as well, and compiler services. All right. Now that I have my view model created for
this, I can go ahead and wire these things up to my search page. I’m gonna go back to the search page, and
so my search command is gonna be bound to the search command itself on the view model. Finding search command, and the text here,
that’s gonna be bound to the search text that I created. I’m actually going to use self-closing tag
there. Okay. Clean up some of the spacing. So now we have a search bar that will activate
a search command and will send over some search text, and the next thing I need to do is include
a list view. And, again, this is gonna be a Syncfusion
list view that will actually contain all that data. So, first, I need to copy in my namespace,
so, just like we did before on the main page, we need to have a namespace that calls the
list view. So I’m gonna paste that into the content page
here, and now I can add, inside my stack layout, I can add my SFLD namespace, and then get
my Syncfusion list view, and we’re gonna call this, it doesn’t really need a name at this
point because we are gonna be using a view model, but we’ll just go ahead and give it
a name, call it item list. We’ll go ahead and set the, and this is something
that’s specific to the Syncfusion list view. So we have an auto fit mode for auto height
when you’re dealing with uneven rows, so I’ll go ahead and set that to essentially be on,
and we’ll also bind to our item source, which is going to be that recipe list that is in
the view model. So here, this is gonna be recipe list. Or actually, this needs to be binding. Okay. And so now, once again, because we’re kind
of doing this in the interest of time, I’m gonna go ahead and copy in some additional
code for my item template of this list view. So, inside of the list view there’s gonna
be an item template, and that’s gonna bind to all the different pieces of my returned
items from the API. Now, this is the important part, so, how do
we actually get all this to work when using that navigation drawer? So, typically what you would do is you would
create a namespace in the XAML that would call up, for example, my view model folder,
and inside of that I would get my namespace, and then it would be my app, and it would
be model folder, and then after that what you would do is, inside of your content page,
you would call that up and then get it’s finding context and set that to your view model. So then this was search page view model. So this is all well and good, especially if
I spell it right, so view model. So this is all well and good if you’re dealing
with the entire page, but with the navigation drawer, we’re only pulling the content of
the page, so that means that we’re only looking at just this code. So if you notice that does not include that
view model finding context that I just set up, and it also does not include any of these,
any of my namespaces. So, how does this actually work then? So, what I need to do is in my main page code
behind here where I’m calling up the search page itself, I’m calling the content, all
I need to do is add a second parameter that calls up the navigation drawer again, and
this time I set the navigation drawer’s binding context. I set that to a new instance, or the search
page view model. Search page view model. And I need to make sure that comes from the
right place. And that is it. There’s really nothing else I need to do here. So, now, if I were to test this, and I’m gonna
do it this time in iOS. I’m gonna use the iPhone X simulator. Now, what should happen is, I pull in the
content from my search page, but I set the navigation drawer’s binding context to the
search page view model so that everything is still able to bind where it needs to go. So, even though it’s not actually pulling
the view model from my search page, XAML, it is still coming from it, so everything
will work just as if it was pulling from the entire page, not just as content. So now we just need to wait a little bit to
load in the iPhone emulator. Here we go. Successfully built. And it is gonna look a little funky since
I did not do anything with the margins. And see we’ve got a kern error, naturally. So let’s see, what is this? I guess, in the interest of time, I will just
load that in the Android emulator. All right, so now we’ve deployed and let’s
check out what we’ve just done. Okay, so we have our buttons, I’m gonna go
over to the search page, you can see the search bar is there at the top, just as we expect. And if I were to do a search for let’s say
barbecue, as long as everything is wired up correctly, there we go, we’ll get a list of
items. So, I didn’t really do anything special with
the formatting here, so you can see the images are a little bit stretched out. But it’s actually pretty simple to fix that. So you can see we have a nice list of items
coming in here. So, that’s it. That’s all that’s really necessary in order
to get a full page with it a view model to appear correctly when using a navigation drawer. So, if you think about it, the work that we
did in the code behind the main page here is no different than actually using a view
model for the main page. The only thing is it’s in the code behind. So, you’re not really creating more work for
yourself if you ever needed to actually add more buttons into your menu, all you need
to do is add a new menu item, give it a name, and just add the case for it in the switch
statement here, and it’s just that simple. So there’s really not a whole lot of extra
work that you’ve done at all. It would be the same thing if this was actually
set up to be some kind of view model. So the only thing to really be aware of is
just that binding context for the navigation drawer. If you needed to include some other, again,
complex controls and needed to use the view model for the main page, you can still do
that because we have not actually changed the binding context of the main page itself,
just the navigation drawer component inside of it. So, if you needed to have a main page view
model with some additional backend stuff to, again, do something more complex, you’re still
completely able to do that because we have not touched the page’s bidning context. So there’s still a lot of possibility with
this. Yeah, even set up in this manner. What I wanted to show you next is how do you
actually make this look a little bit nicer? So I have a couple of pre-built versions of
this app that have come along a little bit further, but before I get into that, I also
wanna just quickly show you how easy it is to change the look and feel of the list view. I’m gonna paste in some code that’s already
kind of been done. And so it’s just a couple of lines, so, we’re
accessing the layout manager of the list view and that allows us to go into a grid layout
in order to display our items in a different manner. So, in this case, I’m gonna do two columns
for any mobile device. So a phone will have two columns. And you can see we’re using on idiom here,
so, with this code we’re able to customize how this displays on different devices. So phones will have two columns, tablets and
desktop will have four. So if I were to run this now, what we’ll see
is that the items in the pictures will look a lot nicer because they’re laid out in a
more structured manner. All right. So I go to search. I’ll do a search for some for some Pho this time. And now you can see that grid layout is implemented. So it’s pretty simple to do that. The last thing I wanna do is I want to run
some other versions of this app and just quickly show you the code for it, once we actually
do a little bit more work to make this look a little bit nicer. So, this time I am gonna run this in iOS,
I’m gonna show you the final product first and then I’ll show you some of the code that
was used to create it. So, one of the first things you’ll notice
here is that my homepage is not just a blank page like it has been before, I actually do
start on the search page, unlike before where I had to go here and first click on Search. Now, the other thing to notice is that now
that we’re in iOS, we’re using an iOS native search bar since we’re using Xamarin forms. So I’ll do a search for let’s say a steak. And you can see that there’s a little bit
of a difference in the look and feel of the list view. I have results counter here because I’ve implemented
a couple of things. So, there’s item feed that goes on whenever
a new item comes into view, you can see I’ve customized the actual item template a little
bit, it’s a little bit nicer and easier to read. And I’ve also utilized the auto loading feature
of the list view. So you can see just now there was a little
loading icon at the bottom of the list, and we’re now looking at 40 results. So we’ve loaded in another 20 results from
the search result. So if I hit the bottom again, you should see
the loading icon one more time, depending on how quickly this goes, there it goes, now
we’re at 60. And so implementing all that is pretty simple. It doesn’t require a whole lot more work,
so let me actually bring over that particular project into view. The first thing to note is I have implemented
a couple of activity indicators. So there’s a built-in activity indicator in
the list view itself, so I am toggling that on and off whenever I’m going through my different
methods. So I have a standard method for calling my
search, and my standard search will just get my recipe items. And I have a second one that is for loading
more recipes, so the load more action is a separate task. And the reason for that is because when I
do my standard search, I also need to clear out whatever was in the recipe list in the
first place, so when I do a new search I want to replace all the old result with whatever
comes in new. And so my load more method does not have that. And also is doing some math in order to count
where I am and then just add 20 to that. So some very simple math there, but still
it is doing that. And then you can see here there’s a separate
command, so, you do need to add a, if you are gonna use a load more automatic action,
you need to have a load more command so it doesn’t need to be or it can be something
separate. And then there’s this can execute method as
well that will simply figure out when is it appropriate to run that load more command. By default it happens when you reach the end
of the list view, so, if you think about it, when you first load a list view, essentially
when you initialize it, you’re automatically at the end. So it is possible to kind of run into an endless
loop where it’s always trying to load more because it always thinks it’s at the end. So this can execute method here kind of prevents
that from happening. So essentially if my recipe let’s count is
empty or if it’s zero, then we’re not gonna run it. So only when we’re essentially looking at
the end of the list should it run. Another thing is, well, how did I actually
get that homepage to be that search page without me having to go anywhere? And that’s actually pretty simple to do, shouldn’t
really be that difficult to understand. So you go here, and the only thing you really
need to do is just, you know, when you initialize that, or in the constructor of the code behind,
you just add your page content, and you set your binding context as well for the navigation
drawer, or in this case actually for the page itself. Either way. All right. And that is pretty much it. That’s all we have time for today. So hopefully this was a nice way for you to
understand how to get started with some Syncfusion controls, and to kind of get yourself a sort
of template for building out something much bigger. So, you can see from the example that I have
running here that this is the beginnings of a, you know, a bigger recipe searching app
using the list view control. And just for those two controls, we have a
menu, we have a menu system, we have a search system, we have this nice view with some animations
and everything else, and that was just two of the nearly 100 controls that we have for
Xamarin and the Syncfusion Xamarin library. So, before we end today, I do want to talk
a little bit about Syncfusion. Before I do, I want to give you a few moments
to ask any questions you may have or leave comments if you haven’t done so already. You can use the questions box on the right
side of the screen to leave comments or questions. As I mentioned earlier, we will not be answering
questions live today, but we will post the answers to all questions in our Q&A blog post
along with the recording of the webinar which will be released within the next week. Please take a few moments now to ask your
questions. So, Syncfusion delivers an extensive range
of over 800 web, mobile, and desktop controls. We also empower businesses to get the most
out of their data with our enterprise solutions, including the dashboard and big data platforms. We have been in business for over 15 years
and are headquartered in the Raleigh Durham area of North Carolina in the U.S. Syncfusion
has more than 12,000 customers including large financial institutions, fortune 100 companies,
and global IT consultancies. More than 1 million users from 125 countries
trust Syncfusion in their development process. Also before moving into the questions, let me also mention our community license. For smaller companies with revenue under 1
million U.S. dollars, all Syncfusion products are available for free. That includes all of the controls in Essential
Studio, as well as all of our enterprise solutions and everything you saw today, all of our Xamarin
controls. We have plenty of customers who have built
up their businesses starting with our community license.

4 thoughts on “How to Start a Xamarin App from Scratch [Webinar]”

  1. i am using VS2017, my mainpage.xaml code is in the app.xaml, and looks different, when I try to add the view, it just gives me red error in InitializeComponent, any quick idea where I am wrong, -> I opened the project from template, which optioned the controls on create, I why should i use this instead of using the Template, I just looked at the Video incl trying for hours, how can i get it running with a template please,

    is there a hallo world sample with the template, thee is so much info everywhere, I am lost in Info as starter

  2. Hi, I am trying to recreate it, do have the code for me the look at please. This is a nice sample, but as a starter I please need the sample code, since I am having big issues with getting any sf xamarin samples to even compile, can you supply it zipped as a whole, with all objects inside, max be this would help me, thanks very much.

Leave a Reply

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