Saving Grandma's Recipes With Xamarin - Forms

2018-10-17 Saving Grandma’
s Recipes With Xamarin.Forms — Smashing Magazine
A B O U T T HE A U T H O R
Matthew Soucoup is a Senior Cloud Developer Advocate at

Microsoft spreading the love of integrating Azure with Xamarin.
Matt is also a Pluralsight author, a ... More about Matthew...
OCTOBER 11, 2 0 1 8
Saving Grandma’s Recipes With

Xamarin.Forms
15 min read
Apps (m-/category/apps), iOS (>-+/category/ios), Android

Ul (»/category/ui)
Share on Twitter (->https://TwltTeR.CoM /intent/tweet?

text=Saving%20Grandm a%e2%80%99s%20Recipes%20W ith%20Xam arin.
Form s& url=https%3A%2F%2Fwww.sm ashingm agazine.com %2f2018%2fl0
%2fandroid-ios-m obile-apps-xam arin-form s%2f& via=sm ashingm ag)
or Linkedln (-+https://sm ashing-delivery.herokuapp.com /ball?
uri=//www.linkedin.com/shareArticle?
url=https://w w w .sm ashingm agazine.com %2f2018% 2fl0%2fandroid-ios-
mobile-apps-xam arin-
form s% 2f& title=Saving% 20Grandm a% e2% 80% 99s% 20Recipes% 20W ith%
20Xamarin.Forms)
q u ic k sum m ary <*- When creating mobile apps,you have to create

and maintain the user interface and app logic for both iOS and Android
separately: Objective-C/Swiftwith XCode and Java with Android Studio.
That can quickly turn into a pain. With Xamarin.Forms, however, the UI
and app logic for your app resides in a single codebase andyou get to use
https://www.smashingmagazine.com/2018/10/android-ios-mobile-apps-xamarin-forms/ 1/40
2018-10-17 Saving Grandma's Recipes With Xamarin.Forms — Smashing Magazine
a single IDE to maintain it all - saving time and headaches. In this

,
article take a lap around Xamarin.Forms to see what it can do for you.
M y grandm a makes the best, m o st
fluffiest, go weak-in-your-knees buns that anybody

has ever tasted. The problem is, there’
s a ton of secret
ingredients (and I’
m not just talking love) that go
into those buns, and those ingredients and directions
are all stored in my grandm a’
s head.
We all have family recipes like that, and instead of possibly forgetting them,
in this article w e’
re going to create a mobile app for iOS and Android using
Xamarin.Forms https://msou.co/bms)that will save them for myself and
future generations of my family!
Q Delicious warm buns (Large preview)
So if you’
re interested in writing mobile applications, but don’
t have the
time to write the same app over and over again for each platform, this article
is for you! Don’
t worry if you don’
t know C# from a Strawberry Pretzel
Salad; I’
ve been writing Xamarin apps for over 8 years, and this article is a
tour through Xamarin.Forms that intends to give you enough information
to start learning on your own.
What Is This Xamarin Stuff?
More than just a fun word to say, Xamarin https://msou.co/bmt) allows

developers to create native OS https://msou.co/bmu) and Android
https://msou.co/bmv) applications using the exact same SDKs and UI controls
available as in Swift and XCode for iOS or Java and Android Studio for
Android.
Q Which platform should I develop for? (Large preview)
The difference is that the apps are developed with C# (Whttps://msou.co/bmw)

using the .NET Framework (Whttps://msou.co/bmx) and Visual Studio (W
https://msou.co/bmy) or Visual Studio for Mac M https://msou.co/bmz). The apps
that result, however, are exactly the same. They look, feel, and behave just
like native apps written in Objective-C, Swift, or Java.
Xamarin shines when it comes to code sharing (Whttps://msou.co/bmo).A

developer can create and tailor their UI for each platform using native
controls and SDKs, but then write a library of shared app logic that’
s shared
across platforms.
£1 Aha! I ’ll pick Xam arin! (Large preview)
It’
s this code sharing where tremendous time savings can be realized.
And like the delicious buns my grandma bakes, once given the taste of
sharing code — it’
s hard not to crave more — and that’
s where
Xamarin.Forms comes in.
Xamarin.Forms
Xamarin.Forms (h+https://msou.co/bms)takes the concept of traditional

Xamarin (V+https://msou.co/bmt) development and adds a layer of abstraction
to it.
Instead of developing the user interface for iOS and Android separately,
Xamarin.Forms introduces a UI toolkit that enables you to write native
mobile apps from a single code base.
Think of it this way: You have an app that needs a button. Each platform has
the concept of a button. Why should you have to write the user interface a
bunch of different times when you know all the user of your app needs to
do is tap a button?
That’
s one of the problems Xamarin.Forms solves.
It provides a toolkit of the most commonly used controls F

https://msou.co/bmi) and user interaction events for them, so we only have to
write the user interfaces for our apps once. It’
s worth noting though that
you’
re not limited to the controls Xamarin.Forms provides either — you still
can use controls found in only a single platform (<->■https://msou.co/bm3)
within a Xamarin.Forms app. Also, we can share the application logic
between platforms as before.
The code sharing stats for apps developed with Xamarin.Forms can be off
the charts. A conference organizing app has 93% of its code shared on iOS
and 91% on Android. The app is open sourced. Take a peek at the code (V+
https://msou.co/bmp).
Xamarin.Forms provides more than UI controls. It also contains a M W M

framework (k> https://msou.co/bm4), a pub/sub messaging service
https://msou.co/bm5), an animation API (<-*https://msou.co/bm6), and a
dependency service (w> https://msou.co/bm7), plus others.
But today, w e’
re going to focus on the UI capabilities for building our recipe
manager app.
2018-10-17 Saving Grandma's Recipes With Xamarin.l omi< — Smashing Magazine
The App W e’
ll Build
The recipe manager app will have a straightforward user interface. We will
be working in the kitchen, so it needs to be easy to use!
It will consist o f 3 screens. The first will show a list of all the recipes
currently loaded in the app.
4:20 «55»
Recipes Add
Buns
Coleslaw
Baked Beans
Black Forest Ham
Best Chicken You've Ever Tasted
This Chicken Is Even Better!
Hot Potato Salad
Homemade Brats
Gumbo
Rhubarb Pie
Cherry Bounce
Ranch Chicken
Veggie Lentil Soup
Poached Eggs with Yogurt
Spicy Roasted Chickpeas
Fudgy Avocado Brownies
& (Large preview)
Then, by tapping on one of those recipes, you’

ll be able to see its details on a
second screen:
https://www.smashingmagazine.com/20i8/10/android-ios-mobiie-apps-xamarin-forms/ 6/40
4:03
^ Recipes Buns Edit
Buns
Ingredients
Love and some secret stuff
Directions
Surely I'm not going to give away family secrets in

this article!!
& The recipe detail screen on iOS (Large preview)
From there you can tap an edit button to make changes to the recipe on the
third screen:
4:03
^ Buns Buns
GENERAL
Name Buns
INGREDIENTS
DIRECTIONS
Surely I'm not going to give away family

secrets in this article!!
& The recipe edit screen on iOS (Large preview)
You can also get to this screen by tapping the add button from the recipe list
screen.
The Development Environment
Xamarin apps are built with C# and .NET, using Visual Studio on Windows
or Visual Studio for Mac on the Mac, but you need to have the iOS (G
https://msou.co/bm8) or Android (G https://msou.co/bna) SDKs and tooling
installed, too. Getting everything installed, in the correct order could be a bit
of an issue, however, the Visual Studio installers will take care of note only
getting the IDE installed, but also the platform tooling.
Although a Mac is always required to build iOS apps, with Xamarin you can
still develop and debug those apps from Visual Studio on Windows
https://msou.co/bmg)!So if W indows is your jam, there’
s no need to change
your environments altogether.
Now let’
s see how Xamarin.Forms can help us save some family recipes
from one code base!
Recipe List Page: Laying Out the UI
Let’
s start with talking about how w e’
re going to layout the UI for our recipe
saving app!
Overall each screen in Xamarin.Forms is comprised of 3 elements. A Page.

At least one element called a Layout.And at least one C on trol.
The Page
The Page (*+https://msou.co/bnb)is the thing that hosts everything displayed

on the screen at one time. The Page is also central in navigation within an
app.
O The page (Large preview)
We tell Xamarin.Forms which Page to display via a Navigation Service (W

https://msou.co/bnc). That service then will take care of displaying whatever
page in a way that’
s appropriate and native for the operating system.
In other words, the code to navigate between screens has been abstracted
too!
Finally, although not the only way to do it, I code the UI of my P age’
s in
XAML (V+https://msou.co/bnd). (The other way would be to use C#.) XAML is a
markup language that describes how a page looks. And for now, suffice it to
say, it’
s kinda sorta similar to HTML.
The Layout
All the controls on a page are arranged by something called a Layout (W

https://msou.co/bne).
V /£ R £ L -A rfO O T £ *2 -
/ \
-— >1
CD CD
/ *
\/
£1 The layouts (Large preview)
One or more layouts can be added to a page.
11/40
https://vnvw.smashingmagazine.com/2018/10/android-ios-mobile-apps-xamarin-forms/
>018-10-17 Saving Grandma's R ecipes With Xamarin.Forms — Sm ashing M agazine
& Layouts on the page (Large preview)
There are several different types of Layouts in Forms. Som e o f the m ost
com m on ones include Stack, Absolute, Relative, Grid, Scroll, and Flex
layouts.
2018-JO-17 Saving Grandma’
ODQ
Q
D
SCSCL^
& Common Xamarinlorms layouts (Large preview)
The Controls
Then fin ally there are the controls https://msou.co/bnf). These are the
w id g e ts o f y ou r app that the u se r interacts with.
w w w .sm ashingm agazine.com /2018/10/android-ios-m obile-apps-xam arin-form s/ 13/40

Saving Grandma’
s Recipes With Xamarin.Forms Smashing
2018-10-17
V /£ R t C o/v /T T O U S
\tj£ MAKE T^r/v/CrS
2_ TR^rry o^eroui
b o t t o m
\- - - - - - - - - - - - - - - - - - - V
T anao£
lL w s e u | \ _ j
\ \
£1 Some o/the controls (Large preview)
Forms come with many controls that will be used no matter what type of
app you’
re building. Things like labels, buttons, entry boxes, images, and of
course, list views.
When adding a control to a screen, you add it to a layout. It’

s the layout that
takes care of figuring where exactly on the screen the control should appear.
R e c ip e s
& Everything fits together! (Large preview)
So to generate the following screens on iOS and Android respectively:
A B O U T T HE A U T H O R
Matthew Soucoup is a Senior Cloud Developer Advocate at

Microsoft spreading the love of integrating Azure with Xamarin.
Matt is also a Pluralsight author, a ... More about Matthew...
OCTOBER 11, 2 0 1 8
Saving Grandma’s Recipes With

Xamarin.Forms
15 min read
Apps (m-/category/apps), iOS (>-+/category/ios), Android (>->

Ul (»/c a te g o ry /u i)
Share on Twitter (-> https://TwltTeR.CoM/intent/tweet?

text=Saving%20Grandm a%e2%80%99s%20Recipes%20W ith%20Xam arin.
Form s& url=https%3A%2F%2Fwww.sm ashingm agazine.com %2f2018%2fl0
%2fandroid-ios-m obile-apps-xam arin-form s%2f&via=sm ashingm ag)
or Linkedln (-+https://sm ashing-delivery.herokuapp.com /ball?
uri=//www.linkedin.com/shareArticle?
url=https://w w w .sm ashingm agazine.com %2f2018% 2fl0%2fandroid-ios-
m obile-apps-xam arin-
form s% 2f£ititle=Saving% 20G randm a% e2% 80% 99s% 20Recipes% 20W ith%
20Xamarin.Forms)
q u ick sum m ary <*- When creating mobile have to
and maintain the user interface and app logic for both iOS and Android
separately: Objective-C/Swiftwith XCode and Java with Android Studio.
That can quickly turn into a pain. With Xamarin.Forms, however, the UI
and app logic for your app resides in a single codebase andyou get to use
s R ecipes With Xamarin.Forms — Smashing Magazine
a single IDE to maintain it all - saving time and headaches.In this

,
article take a lap around Xamarin.Forms to see what it can do for you.
M y g r a n d m a m ak es t h e b e st, m o s t
fluffiest, go weak-in-your-knees buns that anybody
has ever tasted. The problem is, there’
s a ton of secret
ingredients (and I’
m not just talking love) that go
into those buns, and those ingredients and directions
are all stored in my grandm a’
s head.
We all have family recipes like that, and instead of possibly forgetting them,
in this article w e’
re going to create a mobile app for iOS and Android using
Xamarin.Forms https://msou.co/bms)that will save them for myself and
future generations of my family!
& Delicious warm buns (Large preview)
So if you’
re interested in writing mobile applications, but don’
t have the
time to write the same app over and over again for each platform, this article
is for you! Don’
t worry if you don’
t know C# from a Strawberry Pretzel
Salad; I’
ve been writing Xamarin apps for over 8 years, and this article is a
tour through Xamarin.Forms that intends to give you enough information
to start learning on your own.
What Is This Xamarin Stuff?
More than just a fun word to say, Xamarin (Whttps://msou.co/bmt) allows

developers to create native iOS https://msou.co/bmu)and Android (W
https://msou.co/bmv) applications using the exact same SDKs and UI controls
available as in Swift and XCode for iOS or Java and Android Studio for
Android.
& Which platform should I develop for? (Large preview)
The difference is that the apps are developed with C# (Whttps://msou.co/bmw)

using the .NET Framework (Whttps://msou.co/bmx) and Visual Studio (W
https://msou.co/bmy) or Visual Studio for Mac (Whttps://msou.co/bmz). The apps
that result, however, are exactly the same. They look, feel, and behave just
like native apps written in Objective-C, Swift, or Java.
Xamarin shines when it comes to code sharing (V+https://msou.co/bmo).A

developer can create and tailor their UI for each platform using native
controls and SDKs, but then write a library of shared app logic that’
s shared
across platforms.
£1 Aha! I ’ll pick Xam arin! (Large preview)
It’
s this code sharing where tremendous time savings can be realized.
And like the delicious buns my grandma bakes, once given the taste of
sharing code — it’
s hard not to crave more — and that’
s where
Xamarin.Forms comes in.
Xamarin.Forms
Xamarin.Forms (h-*https://msou.co/bms)takes the concept of traditional

Xamarin (Whttps://msou.co/bmt) development and adds a layer of abstraction
to it.
Instead of developing the user interface for iOS and Android separately,
Xamarin.Forms introduces a UI toolkit that enables you to write native
mobile apps from a single code base.
Think of it this way: You have an app that needs a button. Each platform has
the concept of a button. Why should you have to write the user interface a
bunch of different times when you know all the user of your app needs to
do is tap a button?
That’
s one of the problems Xamarin.Forms solves.
It provides a toolkit of the most commonly used controls F

https://msou.co/bmi) and user interaction events for them, so we only have to
write the user interfaces for our apps once. It’
s worth noting though that
you’
re not limited to the controls Xamarin.Forms provides either — you still
can use controls found in only a single platform https://msou.co/bm3)
within a Xamarin.Forms app. Also, we can share the application logic
between platforms as before.
The code sharing stats for apps developed with Xamarin.Forms can be off
the charts. A conference organizing app has 93% of its code shared on iOS
and 91% on Android. The app is open sourced. Take a peek at the code (V+
https://msou.co/bmp).
Xamarin.Forms provides more than UI controls. It also contains a M W M

framework (V+https://msou.co/bm4), a pub/sub m essaging service
https://msou.co/bm5), an animation API (<-*https://msou.co/bm6), and a
dependency service (V* https://msou.co/bmy),plus others.
But today, w e’
re going to focus on the UI capabilities for building our recipe
manager app.
The App W e’
ll Build
The recipe manager app will have a straightforward user interface. We will
be working in the kitchen, so it needs to be easy to use!
It w ill consist o f 3 screens. The first will show a list of all the recipes
currently loaded in the app.
<55* f_ , ,
4:20
Recipes Add
Buns
Coleslaw
Baked Beans
Black Forest Ham
Hot Potato Salad
Homemade Brats
Gumbo
Rhubarb Pie
Cherry Bounce
Ranch Chicken
Veggie Lentil Soup
Fudqv Avocado Brownies
& (Large preview)
Then, by tapping on one of those recipes, you’

ll be able to see its details on a
second screen:
https ://www. smashingmagazine.com/2018/10/android-ios-mobile-apps-xamarin-forms/ 6/40

4:03
^ Recipes Buns Edit
Buns
Ingredients
Directions
Surely I’m not going to give away family secrets in

this article!!
£1 The recipe detail screen on iOS (Large preview)
From there you can tap an edit button to make changes to the recipe on the
third screen:
2018-10-17 Saving Grandma's R ecipes With Xamarin.Forms — Smashing Magazine
4:03
< Buns Buns
GENERAL
Name Buns
INGREDIENTS
DIRECTIONS

& The recipe edit screen on iOS (Large preview)
You can also get to this screen by tapping the add button from the recipe list
screen.
The Development Environment
Xamarin apps are built with C# and .NET, using Visual Studio on Windows
or Visual Studio for Mac on the Mac, but you need to have the iOS (W
https://msou.co/bm8) or Android https://msou.co/bna) SDKs and tooling
installed, too. Getting everything installed, in the correct order could be a bit
of an issue, however, the Visual Studio installers will take care of note only
getting the IDE installed, but also the platform tooling.
https://www.smashingmagazine.com/2018/10/android-ios-mobile-apps-xamarin-forms/
Although a Mac is always required to build iOS apps, with Xamarin you can
still develop and debug those apps from Visual Studio on Windows
https://msou.co/bm9)•So if W indows is your jam, there’
s no need to change
your environments altogether.
Now let’
s see how Xamarin.Forms can help us save some family recipes
from one code base!
Recipe List Page: Laying Out the UI
Let’
s start with talking about how w e’
re going to layout the UI for our recipe
saving app!
Overall each screen in Xamarin.Forms is comprised of 3 elements. A Page.

At least one element called a Layout.And at least one C on trol.
The Page
The Page (V-*https://msou.co/bnb)is the thing that hosts everything displayed

on the screen at one time. The Page is also central in navigation within an
app.
Cl The page (Large preview)
We tell Xamarin.Forms which Page to display via a Navigation Service (W

https://msou.co/bnc). That service then will take care of displaying whatever
page in a way that’
s appropriate and native for the operating system.
In other words, the code to navigate between screens has been abstracted
too!
Finally, although not the only way to do it, I code the UI of my P age’
s in
XAML (Whttps://msou.co/bnd). (The other way would be to use C#.) XAML is a
markup language that describes how a page looks. And for now, suffice it to
say, it’
s kinda sorta similar to HTML.
The Layout
All the controls on a page are arranged by something called a Layout (h>
https://msou.co/bne).
v Je k e L a y o u ts
\n/e N cek Ofcfotfcl

\
------------------->
CD
£1 The layouts (Large preview)
One or more layouts can be added to a page.
Layouts on the page (Large preview)
T here are several d ifferen t ty pes o f Layouts in Forms. S o m e o f the m o st

c o m m o n on es in clu d e Stack, Absolute, Relative, Grid, Scroll, and Flex
layouts.
2018 - 10-17 Saving Grandma s Recipes With Xamarin.Porms — Smashing Magazine
'REu c ttn e
& Common X a m a rin lo rm s layouts (Large preview)
The Controls
Then finally there are the controls (>->https://msou.co/bnf). These are the
widgets o f your app that the user interacts with.
www. smashingmagazine. com/2018/10/android-ios-mobile-apps-xamarin-forms/ 13/40

Saving Grandma’
s Recipes With Xamarin.Forms — Smashing Magazii
2018-10-17
Nn/e r e C o a /t r c >l s >

\ n/e m ake t ^xa/ g-s VRETry
2 . T R trry u ^ eF ou \
£1 Som e o f the controls (Large preview)
Forms com e with many controls that will be used no matter what type of
app you ’
re building. Things like labels, buttons, entry boxes, images, and of
course, list views.
W hen adding a control to a screen, you add it to a layout. It’

s the layout that
takes care of figuring where exactly on the screen the control should appear.
https://www.sm ashingmagazine.com / 2018/10/android-ios-mobile-apps-xamarin-forms/ 14 40

O Everything fits together! (Large preview)
So to gen erate the fo llow in g screen s on iOS and A ndroid respectively:
D O l + J 0 4:35
4:20
Recipes Add Recipes ADD
Buns Buns
Coleslaw Coleslaw
Baked Beans
Baked Beans
Black Forest Ham

Black Forest Ham
Hot Potato Salad
Hot Potato Salad

Homemade Brats
Gumbo Homemade Brats
Rhubarb Pie Gumbo
Cherry Bounce Rhubarb Pie
Ranch Chicken
Cherry Bounce
Veggie Lentil Soup

Ranch Chicken
Veggie Lentil Soup
Fudqy Avocado Brownies
& Recipe lists on iOS (left) and Android (right) (Large preview)
I used this XAML:
<?xml v e rs io n = "1 .0 " encoding="UTF-8"?> <ContentPage

xm lns="h tt p ://x a m a r in . com/schemas/Z014/forms"
xm lns: x = "h t t p : //sch em a s.m ic ro s o ft.c o m /w in fx /2 0 0 9 /x a m l"
x:C lass="S m ashingR ecipe.R ecipeListP age" T itle = "R e c ip e s ">
<ContentPage.Content> <StackLayout> < L is tV ie w
x:N a m e = "re cip e sL ist"> <ListV ie w .Item T em plate > <DataTemplate>
< T e xtC e ll T e x t= "{B in d in g Name}"/> </DataTemplate>
< /L istV ie w .Ite m T e m p la te > < /L is tV ie w > </StackLayout>
</C ontentP age.C ontent> <C ontentPage.ToolbarItem s> cT o o lb a rlte m
Text="Add" /> </C ontentP age.ToolbarItem s> </ContentPage>
There’
s a couple of important things going on here.
The first is the <StackLayout>.This is telling Forms to arrange all the

controls that follow in a stack.
There happens to only be a single control in the layout, and that’

sa
<ListView>, and w e’
re going to give it a name so we can reference it later.
Then there’
s a little bit of boilerplate ceremony to the Li stView before we
get to what w e’
re after: the <T extC ell>.This is telling Forms to display
simple text in each cell of the list.
We tell the <TextCell> the text we want it to display through a technique

called Data Binding. The syntax looks like Text=M{Binding N a m e }".
Where Name is a property of a R ecipe class that models... well, Recipes.
So how do the recipes get added to the list?
Along with every XAML file, there is a “

code-behind”file. This code-behind
allows us to do things like handle user interaction events, or perform setup,
or do other app logic.
There’
s a function that can be overridden in every Page called OnAppeari ng
—which as I’
m sure you guessed — gets called when the Page appears.
p ro te c te d o v e rrid e v o id OnAppearingO { base.O nAppearingO ;

re c ip e s L is t.Ite m s S o u rc e = n u l l; r e c ip e s L is t. ItemsSource =
A p p .A IlR e cip e s; }
N o tic e th e r e c ip e s L is t.Ite m s S o u r c e = A llR e c ip e s ;
This is telling the L i s tV ie w — “

Hey! All of your data is found in the
enumerable A p p .A IlR e c ip e s (an application-wide variable) and you can
use any of its child ob ject’
s properties to bind off of!”
.
A list of recipes is all well and fine —but you can’

t bake anything without
first seeing the recipe’
s details — and w e’
re going to take care of that next.
Event Handling
Without responding to user touches our app is nothing more than a list of
delicious sounding recipes. They sound good, but without knowing how to
cook them, it’
s not of much use!
Let’
s make each cell in the ListView respond to taps so we can see how to
make the recipe!
In the Reci peLi stPage code-behind file, we can add event handlers to
controls to listen and react to user interaction events.
Handling tap events on the list view then:
re c ip e s L is t.Ite m S e le c te d += async (se nde r, e ve ntA rg s) => { i f

(e v e n tA rg s .S e le c te d lte m != n u l l ) { va r d e ta ilP a g e = new
R e cip e D e ta ilP a g e (e ve n tA rg s.S e le cte d Ite m as R ecipe ); aw a it
N a vig a tio n .P u sh A syn c(d e ta ilP a g e ); re c ip e s L is t.S e le c te d lte m =
n u l l; } } ;
/,
There’
s some neat stuff going on there.
Whenever somebody selects a row, ItemSelected is fired on the ListView.
Of the arguments that get passed into the handler, the eventArgs object
has a Selectedltem property that happens to be whatever is bound to the
ListView from before.
In our case, that’

s the Reci pe class. (So we don’
t have to search for the object
in the master source - it gets passed to us.)
Recipe Detail Page
Of course, there’
s a page that shows us the secret ingredients and directions
of how to make each recipe, but how does that page get displayed?
& Let's get cooking! (Large preview)
Notice the await Navi gation.PushAsync(detail Page); line from above.

The Navigation object is a platform-independent object that handles page
transitions in a native fashion for each platform.
Now le t’
s take a peek at the recipe details page:
I
0 , i Q 4:35
4:03
< Recipes Buns Edit <- Buns EDIT
Buns
Ingredients
Buns
Love and som e s e c re t s tu ff
Directions Ingredients
Surely I'm not g oin g to give away fa m ily se c rets in L ove a n d s o m e s e c re t s t u f f

th is a rtic le !!
Directions
Surely I'm not going to give away family secrets in this article!!
O Recipe detail screens on iOS (left) and Android (right) (Large preview)
This page is built with XAML as well. However, the Layout used
(FlexLayout (Whttps://msou.co/bng)) is quite cool as it’
s inspired by the CSS
Flexbox.
<ContentPage.Content> < S cro llV ie w > <FlexLayout A lig n Ite m s = " S ta rtM
A lig n C o n te n t= MS t a r t M Wrap=MWrap"> <Image Source=Mbuns.pngM
F le x L a y o u t.Basis="100%" /> <Label T e x t= "{B in d in g Name}"
H o riz o n ta lT e x tA lig n m e n t= "C e n te r" TextColor="#01487E"
F o n tA ttrib u te s = "B o ld " FontS ize=” Large” M argin=” 10, 10” />
<BoxView F le x L a y o u t. Basis="100%" H eightR equest="0” /> <Label
T e x t= "In g re d ie n ts " F o n tA ttrib u te s = "B o ld " FontSize="Medium"
TextColor="#EE3F60" M a rg in = "1 0 ,10"
H o riz o n ta lO p tio n s = "F illA n d E x p a n d " /> <BoxView
F le x L a y o u t.Basis="100%" H eightR equest="0" /> <Label T e xt= "
{B in d in g In g r e d ie n ts } " M a rg in = "1 0 ,10" F ontS ize= "S m all" />
<BoxView F le x L a y o u t. Basis="100%" H eightRequest=” 0 ” /> <Label
T e x t= "D ir e c tio n s " F o n tA ttrib u te s = "B o ld " FontSize="Medium"
TextColor="#EE3F60" M a rg in = "1 0 ,10"
H o riz o n ta lO p tio n s = "F illA n d E x p a n d " /> <BoxView
F le x L a y o u t.Basis="100%" HeightR equest=” 0 ” /> <Label T ext="
{B in d in g D ir e c tio n s } " M a rg in = "1 0 ,10" FontS ize= "S m all" />
< /F lexL ayou t> < /S c ro llV ie w > </C ontentP age.C ontent>
The FlexLayout will arrange its controls in either rows or columns. The big
benefit comes though with the fact that it can automatically detect how
much room there is left on the screen to place a control, and if there’
s not
enough, then it can automatically create a new row or column to
accommodate it!
This helps greatly when dealing with various screen sizes, which there are
plenty of in mobile development.
Well, with the FlexLayout helping us keep the details screen looking good,
we still need to edit those recipes, right?
You probably noticed this:
<ToolbarItem T e x t= "E d it" C lic k e d = "E d it_ C lic k e d " />

/,
https ://www.smas hingmagazine.conV2018/10/andraid -ios-mob ile-apps-xamar in-forms/ 21/40

That line is responsible for putting a button in the app’

s toolbar. The
Cl icked=" Edit_Cl icked" tells the button that when it’
s clicked, look in the
code behind for a function of that name, and then execute its code.
Which in this case, would be instantiating the Recipe Edit Page, and
pushing that onto our navigation stack using the Navigation object
mentioned previously.
Recipe Edit Page
A page with a list of recipes: check! A page with all the details to make the
recipes: check! All th at’
s now left is to create the page that we use to enter or
change a recipe while we watch grandma work her magic!
First, check out the screens:
D O I Q 4:35
4:03
^ Buns Buns <- Buns
General
GENERAL
Name Buns
Name B uns
INGREDIENTS
Ingredients

Love and s o m e s e c re t s tu ff
DIRECTIONS
Directions
S urely I'm n o t g oin g to g ive a w a y fa m ily
s e c re ts in th is a rtic le !!
SAVE CANCEL
◄ 4» ■
£1 Recipe edit screens on iOS (left) and Android (right) (Large preview)
https://www.smashingmagazine.com/2018/10/android-ios-mobile-apps-xamarin-forms/
And now the code:
<ContentPage.Content> <Grid> < G rid . R o w D e fin itio n s> < R o v\t)e fin itio n
H e ig h t= "*M /> < R o w D e fin itio n H e ig h t= "A u to M />
< /G rid .R o w D e fin itio n s > < G rid . C o lu m n D e fin itio n s> < C o lu m n D e fin itio n
W id th = "*M /> < C o lu m n D e fin itio n W id th = "*" />
< /G rid .C o lu m n D e fin itio n s > cTableView Grid.Row="0" G rid.C olum n="0"
G rid . ColumnSpan=M2" In te n t= "F o rm M HasUnevenRows=Mtr u e M>
<TableS ection T itle = "G e n e ra l"> < E n try C e ll x:Name=MrecipeNam eCell"
Label=,,Name" /> < /T a b le S e ctio n > <TableS ection
T itle = " In g r e d ie n ts " > <View C ell> <StackLayout Padding="15">
< E d ito r x :N a m e = "in g re d ie n ts C e ll" /> </S tackLayout> < /V ie w C e ll>
< /T a b le S e ctio n > <TableS ection T i t l e = MD ir e c tio n s M> <ViewCell>
<StackLayout Padding=M15M> < E d ito r x : Name="dir e c tio n s C e ll" />
</S tackLayout> < /V ie w C e ll> < /T ab leS ection > </TableView> <Button
Text="SaveM G rid .R o w = "l" G rid.Colum n=M0M
BackgroundColor=M#EE3F60M T e x tC o lo r= MW hiteM x:Name=MsaveB utton"
/> <Button T e x t= T,CancelM Grid.Row=Ml M Grid.Colum n=Ml M
BackgroundColor="#4CC7F2" T e x tC o lo r= MW hiteM x:Name=Mc a n c e lB u tto n "
/> < /G rid > </C ontentP age.C ontent>
There’
s a little more code here, and that’
s because I’
m using the Grid layout
to specify how everything should lay out in a 2-Dimensional pattern.
And also notice no data binding here. Because I wanted to give an example
of how one would populate the controls purely from the code behind file:
v o id In it ia liz e P a g e ( ) { T i t l e = TheRecipe.Name ?? "New R ecipe";

recipeN am eC ell.Text = TheRecipe.Name; in g re d ie n ts C e ll.T e x t =
T h e R e c ip e .In g re d ie n ts ; d ir e c tio n s C e ll.T e x t =
T h e R e c ip e .D ire c tio n s ; sa ve B u tto n .C lic k e d += async (se nde r, a rg s )
=> { SaveRecipeO; a w a it CloseWindowO; } ; c a n c e lB u tto n .C lic k e d
+= async (se n d e r, a rg s ) => { a w a it CloseWindowO; 1; }
/,
https ://www.smas hingmagazine.com/2018/10/android -ios-mob ile-apps-xamar in-forms/ 23/40

See that TheRecipe property? It’

s page level, holds all the data for a
particular recipe, and gets set in the constructor of the page.
Secondly, the Clicked event handlers for the saveButton and

cancelButton are totally .NET-ified (and yes, I do make my own words up
quite often.)
I say they’
re .NET-ified because the syntax to handle that event is not native
to Java nor Objective-C. When the app runs on Android or iOS, the behavior
will be exactly like an Android Click or an iOS TouchUpInside.
And as you can see, each of those click event handlers are invoking
appropriate functions that either save the recipe and dismiss the page, or
only dismiss the page.
There it is — we have the UI down to save the recipes from now until the
end of time!
CSS Wha?!? Or Making The App Pretty
Saving the best for last: Xamarin.Forms 3.0 gives us — among other things
— the ability to style controls using CSS (>-»https://msou.co/bnh)!
The Xamarin.Forms CSS isn ’

t 100% what you may be used to from web
development. But it’
s close enough that anyone familiar with CSS will feel
right at home. Just like me at grandm a’
s!
So let’
s take the Recipe Details page and refactor it, so it uses Cascading
Style Sheets to set the visual elements instead of setting everything directly
inline in the XAML.
First step is to create the CSS doc! In this case it will look like the following:
.fle x C o n te n t { a lig n - ite m s : f l e x - s t a r t ; a lig n - c o n te n t: f l e x -

s t a r t ; fle x -w ra p : wrap; } image { fle x - b a s is : 100%; } .spacer {
fle x - b a s is : 100%; h e ig h t: 0; } .foodHeader { f o n t- s iz e : la rg e ;
fo n t-w e ig h t: b o ld ; c o lo r: #01487E; m argin: 10 10; } .dataLabel {
fo n t- s iz e : medium; fo n t-w e ig h t: b o ld ; c o lo r: #EE3F60; m argin: 10
10; } .data { fo n t- s iz e : s m a ll; m argin: 10 10; }
/,
For the most part, it looks like CSS. There are classes in there. There is a
single selector for a class type, Image .And then a bunch of property setters.
Some of those property setters, such as flex-wrap or flex - b a sis are

specific to Xamarin.Forms. Going forward, the team will prefix those with
xf- to follow standard practices.
Next up will be to apply it to XAML controls.
<ContentPage. Resources> <S tyleS heet

Source=” . ./S ty le s /R e c ip e D e ta ilS ty le .c s s " />
</ContentPage.Resources> <ContentPage.Content> <S cro llV ie w >
<FlexLayout S ty le C la s s = ” fle x C o n te n tM> <Image Source=Mbuns.pngM />
<Label T e x t= ’’{B in d in g Name}" S ty le C la s s = MfoodHeaderM /> <BoxView
S ty le C la s s = "s p a c e rM /> <Label T e x t= MIn g re d ie n ts n
S ty le C la s s = ” d a ta L a b e l” H o riz o n ta lO p tio n s = ” FillA ndE xpand” />
<BoxView S ty le C la s s = MspacerM /> <Label T e x t= ” {B in d in g
In g r e d ie n ts } ’’ S ty le C la s s = ” d a ta " /> <BoxView S ty le C la s s = ” spa cer”
/> <Label T e x t= ” D ir e c tio n s ” S ty le C la s s = ” d a ta L a b e l”
F lo riz o n ta lO p tio n s = ” FillA ndE xpand” /> <BoxView S ty le C la s s = ” spa cer”
/> <Label T e xt= ” {B in d in g D ir e c tio n s } ” S ty le C la s s = ” d a ta ” />
< /F lexL ayou t> < /S c ro llV ie w > </C ontentP age.C ontent>
/,
H ere’
s what it looked like before (W
https://gistgithub.com/codemillmatt/2387b7ue2c8d42680f1ae641c2gdg2b).
In Xamarin.Forms, to reference the CSS document, add a

<StyleSheet Source=”
YOUR DOC PATFI”/>. Then you can reference the
https://www.smashingmagazine.com/20i8/10/android-ios-mobiie-apps-xamarin-forms/ 25/40
2018-10-17 Saving Grandma's R ecipes With Xamarin.Forms — Smashing Magazine
classes in each control via the StyleClass property.
It definitely cleans up the XAML, and it makes the intention of the control
clearer too. For example, now it’
s pretty obvious what those
<BoxView StyleClass="spacer" /> are up to!
And the Image gets itself styled all because it’

s an Image and the way we
defined the selector in the CSS.
To be sure, CSS in Xamarin.Forms isn ’

t as fully implemented as its web
cousin, but it’
s still pretty cool. You have selectors, classes, can set properties
and, of course, that whole cascading thing going on!
Summary
Three screens, two platforms, one article, and endless recipes saved! And
you know what else? You can build apps with Xamarin.Forms for more than
Android and iOS. You can build UWP, macOS, and even Samsung Tizen
platforms!
® Delicious/ (Large previeiv)
Xamarin.Forms is a UI toolkit that allows you to create apps by writing the

user interface once and having the UI rendered natively across the major
platforms.
It does this by providing an SDK that’

s an abstraction to the most
commonly used controls across the platforms. In addition to the UI
goodness, Xamarin.Forms also provides a full-featured M W M framework,
a pub/sub messaging service, an animation API, and a dependency service.
Xamarin.Forms also gives you all the same code benefits that traditional
Xamarin development does. Any application logic is shared across all the
platforms. And you get to develop all your apps with a single IDE using a
single language — that’
s pretty cool!
Where to next? Download the source code

https://github.com/codemiIImatt/smashing-fonns) for this Xamarin.Forms app to
give it a spin yourself. Then to learn more about Xamarin.Forms, including
the ability to create an app all within your browser, check out this online
tutorial (V+https://msou.co/bmr)!
(dm, ra,yk, il)
With a commitment to quality content for the design community.

Founded by Vitaly Friedman and Sven Lennartz. 2006-2018.
Smashing is proudly running on Netlify.
Fonts by Latinotype.
Cats can beforgetful, but we are not.

Thanks for being truly smashing - yet again.
www.smashingmagazine.com

Saving Grandma's Recipes With Xamarin - Forms

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Saving Grandma's Recipes With Xamarin - Forms

Hochgeladen von

Copyright:

Verfügbare Formate

2018-10-17 Saving Grandma’

s Recipes With Xamarin.Forms — Smashing Magazine

Matthew Soucoup is a Senior Cloud Developer Advocate at

Saving Grandma’s Recipes With

Apps (m-/category/apps), iOS (>-+/category/ios), Android

Share on Twitter (->https://TwltTeR.CoM /intent/tweet?

q u ic k sum m ary <*- When creating mobile apps,you have to create

separately: Objective-C/Swiftwith XCode and Java with Android Studio.

a single IDE to maintain it all - saving time and headaches. In this

M y grandm a makes the best, m o st

fluffiest, go weak-in-your-knees buns that anybody

Q Delicious warm buns (Large preview)

What Is This Xamarin Stuff?

More than just a fun word to say, Xamarin https://msou.co/bmt) allows

Q Which platform should I develop for? (Large preview)

The difference is that the apps are developed with C# (Whttps://msou.co/bmw)

Xamarin shines when it comes to code sharing (Whttps://msou.co/bmo).A

£1 Aha! I ’ll pick Xam arin! (Large preview)

Xamarin.Forms (h+https://msou.co/bms)takes the concept of traditional

It provides a toolkit of the most commonly used controls F

Xamarin.Forms provides more than UI controls. It also contains a M W M

Black Forest Ham

Best Chicken You've Ever Tasted

This Chicken Is Even Better!

Hot Potato Salad

Veggie Lentil Soup

Poached Eggs with Yogurt

Spicy Roasted Chickpeas

Fudgy Avocado Brownies

& (Large preview)

Then, by tapping on one of those recipes, you’

^ Recipes Buns Edit

Love and some secret stuff

Surely I'm not going to give away family secrets in

& The recipe detail screen on iOS (Large preview)

Love and some secret stuff

Surely I'm not going to give away family

& The recipe edit screen on iOS (Large preview)

The Development Environment

Recipe List Page: Laying Out the UI

Overall each screen in Xamarin.Forms is comprised of 3 elements. A Page.

The Page (*+https://msou.co/bnb)is the thing that hosts everything displayed

O The page (Large preview)

We tell Xamarin.Forms which Page to display via a Navigation Service (W

All the controls on a page are arranged by something called a Layout (W

£1 The layouts (Large preview)

One or more layouts can be added to a page.

& Layouts on the page (Large preview)

& Common Xamarinlorms layouts (Large preview)

w w w .sm ashingm agazine.com /2018/10/android-ios-m obile-apps-xam arin-form s/ 13/40

£1 Some o/the controls (Large preview)

When adding a control to a screen, you add it to a layout. It’

& Everything fits together! (Large preview)

So to generate the following screens on iOS and Android respectively:

Matthew Soucoup is a Senior Cloud Developer Advocate at

Saving Grandma’s Recipes With

Apps (m-/category/apps), iOS (>-+/category/ios), Android (>->

Share on Twitter (-> https://TwltTeR.CoM/intent/tweet?

q u ick sum m ary <*- When creating mobile have to

separately: Objective-C/Swiftwith XCode and Java with Android Studio.

a single IDE to maintain it all - saving time and headaches.In this

& Delicious warm buns (Large preview)

What Is This Xamarin Stuff?