XAML  With  Xamarin   There  Is  Life  A,er  Death  

Jesse  Liberty  Master  Consultant  Falafel  So5ware  

jesse@falafel.com  @jesseliberty  

What  We  Will  Cover

• Xamarin  Forms  and  XAML  • Data  and  Data  Binding  • MVVM  

Am  I  In  The  Right  Presenta:on?

•  I  assume…  •  LiEle  or  no  Xamarin  Forms  experience  •  Comfortable  with  C#  •  Familiar  with  XAML  •  Interested  in  Databinding  •  Interested  in  MVVM  

Q&A  at  the  end    

This  is  not  your  mama's  Xamarin!

• Xamarin  Forms  are  a  whole  new  thing  • Xamarin  Forms  are  the  future!*  •  For  now,  limited  but  extremely  powerful  • A  natural  migraMon  for  XAML  programmers    *  Personal  Opinion  

What  Is  Xamarin?

• Xamarin  is  a  framework  that  allows  you  to  create  naMve  iOS,  Android,  Windows  Phone  and  Mac  applicaMons  in  C#.  

What  Is  Xamarin  Forms?

• Create  naMve  iOS,  Android,  WP    applicaMons  (UX)  with  shared  code    • XAML  and/or  C#  

What  Is  Xamarin  Studio?

• An  Integrated  Development  Environment  (IDE)  •  Similar  to  Visual  Studio  • Runs  on  Mac                  and  Windows  

Your  Development  Environment • OpMon  1:  Mac  only  –  Develop  iOS  and  Android  in  Xamarin  Studio  • OpMon  2:  Parallels  on  Mac,  Business  license.    Develop  iOS,  Android  and  Windows  Phone  in  Visual  Studio  • OpMon  3:  Windows  only  –  Develop  Android  and  Windows  Phone  in  Visual  Studio  or  Xamarin  Studio  

XAML

• Anything  you  can  do  in  XAML  you  can  do  in  C#.      • But  don't.  

XAML  and  MVVM

•  You  can  do  XAML  without  MVVM  • But  don't.  

MVVM  From  The  Start

• Model:  Your  data  • View:  Your  presentaMon  (UI)  • View-­‐Model:  The  glue  •  The  logic  goes  in  the  VM  

Why  MVVM?

•  Proven  paEern  (WPF,  Silverlight,  etc.)  •  Especially  lends  itself  to  Xamarin  Forms  

•  Data  binding  •  XAML  

•  SeparaMon  of  concerns  •  Easier  to  maintain    •  Easier  to  test  

C#  &&    XAML

• XAML  is  great  because  •  DeclaraMve  •  Machine-­‐readable  (designer?)  

Data  Binding

• Rather  than  copying  data  to  and  from  the  user  interface,  we  bind!  • Bind  from  any  object  to  any  widget  

Data  Source   Control  Data  Binding  

Element  Binding

•  You  can  even  bind  from  one  control  to  another  •  Example:  slider  to  label  

Label  Data  Binding  Slider  

Events

• Assign  event  handlers  • Handle  in  code-­‐behind    • No  support  yet  for  binding  events  •  Though  there  are  libraries  

Demo

• CreaMng  your  first  forms  applicaMon  •  3  Projects  •  PCL  •  iOS  •  Android  

Demo  1  –  New  SoluMon  

What  we're  going  to  build

•  Evaluator  is  a  mobile  applicaMon    • Helps  you  compare  items  such  as  dishwashers  •  You  can  add  criteria  you  care  about  •  You  set  how  important  each  is  

Demo

•  First  MVVM  Xamarin  Forms  ApplicaMon  •  Goal:  create  a  page  that  lists  3  items  and  their  locaMon  

• Demo  2  

Being  No:fied

• How  do  we  update  the  UI  if  the  data  changes?  •  Implement  interface  INoMfyPropertyChanged  • Put  our  items  in  an  ObservableCollecMon  •  Sound  familiar?  

Demo

• Adding  noMficaMon  • Demo  3  

Views  and  More

• Pages  •  Layouts  • Views  • Cells  

Key  Layouts  We’ll  Work  With

•  StackLayout  • GridLayout  

Key  Views  We’ll  Work  With

•  Label  (display  text)  •  Entry  (gather  text)  •  ListView  

Adding  Views  and  Data

• We  want  to  add  Criteria  for  each  item  •  Each  criterion  has  a  name,  a  descripMon,  an  importance  raMng  and  a  raMng  

•  Example:  •  Quiet  •  Higher  values  =  quieter  •  Importance  =  5  •  RaMng  =    

Two  New  Views

• Details  page  displays  the  criteria  for  a  selected  item  • AddCriterion  allows  you  to  add  new  criteria  for  all  items  

Naviga:on

• How  do  we  go  from  one  page  to  another?  • How  do  we  pass  informaMon  from  one  page  to  another?  

Demo

• Criteria  • Details  Page  • Demo  4  

Demo

•  Fixing  the  integers  •  Forms  provide  strings  •  Storing  numbers  as  strings  is  undesirable  •  SoluMon:  IValueConverter  

• Demo  5  

Demo

• Move  the  “Add  criterion”  buEon  to  the  details  page  • Add  “Add  Item”  to  Items  page  •  Create  AddItemPage  

• Demo  6  

Tabbed  Pages • As  always,  write  to  the  abstracMon  •  Displays  appropriate  to  the  plamorm  

•  In  the  MainPage.xaml:  

       <TabbedPage.Children>                  <local:ItemsPage  />                  <local:HelpPage  />                  <local:LicensePage  />          </TabbedPage.Children>    

Remember  to  create  namespace  

Declare  your  tabbed  pages  

Demo

•  Create  a  new  MainPage  •  Add  tabbed  Pages  

•  1st  tab  =  Items  •  2nd  tab  =  Help  •  3rd  tab  =  License  

•  Remember:  Page  type  is  TabbedPage  •  Demo  7  

Demo

• Adding  to  toolbar      • Drop/Seed  DB  • Demo  8  

Images

•  From  •  A  file,  A  Uri,  A  Resource  

• Aspect  •  Fill,  AspectFill,  AspectFit  

• hEp://jliberty.me/dishwasherjpg  

Maps

• Using  Map  control  •  Sepng  locaMon  •  Sepng  MapType  

Demo

• Adding  a  map  • Demo  9  

Custom  Rendering

• Remember  that  forms  render  naMvely  •  This  is  done  with  “Renderers”  •  You  can  write  Custom  Renderers  

Demo

• Custom  Rendering  • Demo  10  

Add  icons

•  Evaluate  

Ques:ons?

Contact  Me

•  Jesse  Liberty  •  Falafel  So5ware  •  jesse@falafel.com    • @jesseliberty