Partly Cloudy: If Forms Was a Turtle (Xamarin.Forms Shell)

Partly Cloudy: If Forms Was a Turtle (Xamarin.Forms Shell)


[MUSIC]>>Well, friends welcome back
to Episode 3 of Partly Cloudy or the show where we go step-by-step through several aspects of
mobile app development. Sometimes we’re talking about
pure Xamarin.Forms development, sometimes we’re talking
about Cloud development, and this is one of the
episodes we’re going to be talking about
Xamarin.Forms of element. So if you remember
the app where we left it looks a little bit like the
app on the right-hand side. We’re calling out to
an Azure function, it calls out to the
Bing New Search API, but it really just returned
some news headlines. Pretty cool, but doesn’t look anything as cool as the
app over on the left, where we have tabs along the
bottom with some colorful icons. Some tabs along the top and the grid. It’s really a collection
view in the middle. It’s returning some
really neat cells. So that’s what we’re going
to talk about this time. Is taking that app on the
left and starting to push it over to what it looks like
on the right-hand side. So the way we’re going
to do that is with something called Xamarin.Forms Shell. So what’s Shell does is that it gives your app a container to run in. That container really
is a way to give prescriptive guidance on
how things are laid out, and how to transition, or navigate between
different elements. So in other words it can give
with a little bit of code even, some things such as tabs, or a flyout menu, or tabs on top, and so on. So let’s jump in and take a peek out what everything
will be looking like. So this is the app as we have it. If I’m going to go into
the PartlyNewsy.Core, I have my app XAML, which just name page, news up, another main page, that MainPage. It’s just a list here. All right. So what I’m trying to do here
is to make a shell of that, where I want to have some tabs
along the bottom and tabs along the top to make it look a little bit like the news app that
we’re trying to recreate. So first thing first, is I’m going to go
and add a new folder, and I’m going to call
that folder pages, and within that Pages folder, I’m going to add one class. Call, NewsCollectionPage, and now that NewsCollectionPage is going to look a lot like my
main page in the XAML. In fact, it’s going to
do the exact same thing. I’m just trying to shell out what the application looks
like at this point, and then I’m going to
have the same methods on the code behind as well. All right. So my NewsCollectionPage is going to do the
exact same thing as my MainPage. All right. So the next thing I want to do
is then go ahead and add in another file called AppShellPage, and this is going to serve
as my Shell for everything. So that’s going to
inherit from Shell. So I’ll make both of these
changes. Include this out. I’m going to format
that just a bit more, so we can see everything. Anymore thing I’m going to
do is do an xmlns local equals clr namespace,
PartlyNewsy.Core. Great. So for one of the
things I can do with my Shell is put in a TabBar element, and then within that TabBar element, of course I can do
something called a tab. As you can see, as I
start laying this out and it starts making a
little bit of sense, and then I can do a ShellContent and then another page called Local. So what I can have
here then is a title, and I’ll just say News. I’m going to do a split screen here and you should be
able to see it load up in just a second on my previewer. So right now is just
showing one screen total, you can’t see the tab. However, when I add
another tab to it, news and news pops up, and so here I’ll hit “Local News”, and you can see changes right away. Well, that’s neat. So
what I want to have here then is I want to have top tabs. So in order to do that, I’ll just start adding
new shells within here. New shell content. Because I’ll start adding
new content within here and then changing
the titles within that to reflect what they should be My News, US News. World News. Cool. Then finally, for this tab, I have a
navigation up there. I don’t want to have a navigation. So I’m going to do
Shell.NavbarIsVisible false, and it brings it up
so I have no navbar. So the next thing is then to
change all my app, that XAML, and so they’re doing a new MainPage, doing a new AppShellPage. I’ll run my app then, and we can see I have
everything here; My News, US News, World News, news and local news. So I wanted to make it a
little more spiffy where I had some icons down here for the tabs, and those are done through what’s
called a bond image source. So I’ll go back here, and a way I can do that
is actually adding a special font into
the resources here. So I might have do add files
and I already have it done on my desktop, the SegMDL2.ttf. So I’m going to copy
that into my iOS app. I’m going to copy it into the
assets file of my Android app, and in an iOS, I have to
change the info.plist. It’s provided by application, and then here the name
will be SegMDL2.ttf. Great. This is just telling iOS
that I have something in here, and then within the app XAML, and I already have it
added because I wanted to remember the syntax for it. As I’m just saying setting up a resource dictionary saying SegMDL2, and then where to find it
for Android and for iOS. Great. So here’s what I can do then. Is then I can do a tab.icon and then do
a FontImageSource. FontFamily equals StaticResource, which is going to be a SegMDL2, and then the glyph is a special name. That’s going to be ampersand x. Then, I’m going to go over
to the Segoe MDL icons page, where it tells me various icons. So I’m going to say E708
for WAN which will give me this [inaudible] symbol, E708. If I do a split and pound E708. You see I have my glyph here. So I’ll do the same thing
over for the bottom tab. Get rid of the title as well. I’m going to change
the icon here to be. I’ll just grab something that
looks interesting E74E for the floppy disk, 74E. Go back to split and you can
see I have this floppy disk. I want to change it to red too. So I’m going to do a
Shell.TabBarTitleColor equals Red, and you could see then
it changed the red. Sweet. So now, I’m starting to get my
application to look a little bit more like the news app that
we’re trying to make it look like. Cool. So the next thing I
want to do is actually start to do some navigation, and Shell helps me out
with that as well. So I’ll go into Pages,
add a new file. This will be a content page, I’m going to call it,
“ArticleDetailPage”. With ArticleDetailPage,
I’m just going to put in a web view and give
it a name, WebView. Here’s what’s interesting
about Shell is that, it allows me to pass in parameters from calling
pages via URL strings. So I can do query properties here. I’m going to say the
incoming query properties going to be ArticleUrl. It’s going to go to or the properties name’s
going to be ArticleUrl, and the incoming one is going
to be called articleUrl. So what I mean by this then, is I’m going to have to create
a string property then. All right. So what
this is doing is what whenever this article
detail page gets called, it’s going to expect a property
being passed in called ArticleUrl. When it appears, it’s
going to populate that web view with that articleUrl. All right, so how do
I call that then? Well, first off an App Shell, there’s going to be something
called Routing.RegisterRoute. For that register route, I’m just going to say
whatever I want to call it, so articledetail. I’m going to want it to load
the type of ArticleDetailPage. So far so good. So then now in my
NewsCollectionPage, in my ListView, I’m going to do
ItemSelected is going to be equal to newsListItemSelected. I’m going to go, and implement that. There we go. So what
I want to do here is get out the item that’s being selected from my selected
item changed event arcs. So if e.item,
SelectedItem is article, I’m going to call it “Article”. Go like that, and then
from there what I can do a Shell.Current.GoToASync. I can tell it which page
I wanted to go to via the routing that I created
before in my app shell. So I can tell it to go to
articledetail in the animate. Of course, I want to await it, and then set my
newsListSelectedItem in the null. But I mentioned though that I’m
going to pass in the articleUrl. So how do I do that. Well I have my article out. So what I can do then, is to a var url is Uri.Encode, escape the data, article.ArticleUrl. So now, I’m going to have
in UrlEscapedDataString, so I can do something like this. So “articledetail?” is going to bond to be
articleUrl equals url. So now what I’m saying to Shell is go to this thing that I
called articledetail, pass it in the articleUrl of that
whenever I call the URL here. So on the page when
it gets loaded up, it’s going to look
for this articleUrl, assign it to that property, and then when I loads
up, it’s going to sign that property to the web view source. So there’s one other thing
I want to do is because I’m HTML, I’m escaping it, I want to then de-escape
it or un-encode it. I’m going to go like this to do that. Very good. So now, I have my articleUrl returning. Isn’t my set that I’m equal to that, and then when I
get it, it’s there. So now, I should be able to
run my app and be able to navigate back and
forth. Let it load up. We can see I have everything here. I’ll go in, and now, I’m able
to navigate to my second page. Very cool. All right, great. So Part 3 of the partly cloudy show made our app look a
little bit more like the final app that we’re going for by introducing Xamarin.Forms Shell. Now in the accompanying GitHub repo that I’ll put out with this show, I’ll have a little bit
more information about implementing Shell including
making the app look more like it. Then, the in-depth article
that comes along with it, I’ll really dive deep into Shell, and show you how a lot
of things are done. So until Part 4. My name is Matt Soucoup, and you can find me everywhere
on the Internet at codemillmatt, at Twitter, on GitHub, and on my blog codemillmatt.com. Until next time on Partly Cloudy. [MUSIC]

Randy Schultz

Related Posts

6 thoughts on “Partly Cloudy: If Forms Was a Turtle (Xamarin.Forms Shell)

  1. Farhan Haji says:

    Very Interesting, Thanks Matt. this was helpful.

  2. WJ JUNG says:

    한국에는 자마린 서밋 같은거 안하나봐요 ㅠ

  3. The Deviant Developer IDW Podcast says:

    Would love to just be able to download the completed app and pull it apart? Xamarin.Forms needs way more complete slick template apps we can use for parts – also there should be far more slick looking fully featured app templates built into VS.

  4. Vadim Palagin says:

    Thank you, very informative! But how to make exactly the same tabbar, but based only on images, without using a special font? If I assign Title = "". then the icons are shifted up, not in the middle of the tabbar.

  5. cas818028 says:

    Been doing xamarin for about four months now what's the trick to get your xamarin apps to build so fast and launch. Especially on iOS

  6. Ark Fen says:

    the link to the article about shells got the )! into it in the end and does not work because of that… please correct it… meanwhile here it is in a hopefully working state – https://aka.ms/partly-s1e3-shell

Leave a Reply

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