Building Xamarin.Forms Mobile Apps Using XAML: Mobile Cross-Platform XAML and Xamarin.Forms Fundamentals

445 Pages·2019·7.37 MB·English

by  Dan Hermes

Building
Xamarin.Forms
Mobile Apps Using
XAML
Mobile Cross-Platform XAML and
Xamarin.Forms Fundamentals
—
Dan Hermes
with Contributions by Dr. Nima Mazloumi
Building Xamarin.Forms
Mobile Apps Using XAML
Mobile Cross-Platform XAML and
Xamarin.Forms Fundamentals
Dan Hermes
with Contributions by Dr. Nima Mazloumi
Building Xamarin.Forms Mobile Apps Using XAML: Mobile Cross-Platform XAML
and Xamarin.Forms Fundamentals
Dan Hermes Nima Mazloumi
Boston, MA, USA San Francisco, CA, USA
ISBN-13 (pbk): 978-1-4842-4029-8 ISBN-13 (electronic): 978-1-4842-4030-4
https://doi.org/10.1007/978-1-4842-4030-4
Library of Congress Control Number: 2019930581
Copyright © 2019 by Dan Hermes
This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the
material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation,
broadcasting, reproduction on microfilms or in any other physical way, and transmission or information
storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now
known or hereafter developed.
Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with
every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an
editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the
trademark.
The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not
identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to
proprietary rights.
While the advice and information in this book are believed to be true and accurate at the date of publication,
neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or
omissions that may be made. The publisher makes no warranty, express or implied, with respect to the
material contained herein.
Managing Director, Apress Media LLC: Welmoed Spahr
Acquisitions Editor: Todd Green
Development Editor: James Markham
Coordinating Editor: Jill Balzano
Cover designed by eStudioCalamar
Cover image designed by Freepik (www.freepik.com)
Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street,
6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax [phone], e-mail orders-ny@springer-
sbm.com, or visit www.springeronline.com. Apress Media, LLC is a California LLC and the sole member
(owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a
Delaware corporation.
For information on translations, please e-mail [email protected], or visit http://www.apress.com/
rights-permissions.
Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook versions and
licenses are also available for most titles. For more information, reference our Print and eBook Bulk Sales
web page at http://www.apress.com/bulk-sales.
Any source code or other supplementary material referenced by the author in this book is available to
readers on GitHub via the book’s product page, located at www.apress.com/9781484240298. For more
detailed information, please visit http://www.apress.com/source-code.
Printed on acid-free paper
For your apps.
And for my fiancée, Ginger.
Table of Contents
Foreword xv
About the Authors xvii
About the Technical Reviewer xix
Acknowledgments xxi
Introduction xxiii
Chapter 1: Building Apps Using Xamarin1
Understanding Xamarin.Forms .....................................................................................................2
XAML vs. C# .............................................................................................................................3
Xamarin.Forms Solution Architecture ......................................................................................4
Understanding the Platform-Specific UI Approach .......................................................................6
Platform-Specific UI Solution Architecture ..............................................................................6
Choosing Xamarin.Forms or a Platform-Specific UI ......................................................................7
Using Custom Renderers, Effects, and Native Views ...............................................................9
Exploring the Elements of Mobile UIs .........................................................................................10
Using the Xamarin.Forms UI .......................................................................................................11
Page.......................................................................................................................................12
Layout ....................................................................................................................................12
View .......................................................................................................................................13
Creating a Xamarin.Forms Solution ............................................................................................14
Xamarin.Forms Project ..........................................................................................................16
Xamarin.Android ....................................................................................................................19
Xamarin.iOS ...........................................................................................................................20
Core Library ...........................................................................................................................21
Setting the App’s Main Page ..................................................................................................21
v
Table of ConTenTs
Adding Xamarin.Forms Views .....................................................................................................23
Label View .............................................................................................................................23
Placing Views Using StackLayout ..........................................................................................24
Background Color and Font Color ..........................................................................................25
Using Fonts ............................................................................................................................25
Using Platform-Specific Fonts ...............................................................................................26
Button View ...........................................................................................................................26
Setting View Alignment and Size: HorizontalOptions and VerticalOptions .............................29
Entry View for Text Input ........................................................................................................30
BoxView .................................................................................................................................31
Image View ............................................................................................................................32
ScrollView ..............................................................................................................................36
Padding Around the Entire Page ............................................................................................37
CODE COMPLETE: Adding Xamarin.Forms Views ...................................................................38
Summary.....................................................................................................................................41
Chapter 2: Building XamarinForms Apps Using XAML 43
Basic Syntax ...............................................................................................................................44
XML Syntax .................................................................................................................................44
Element .................................................................................................................................44
Attribute .................................................................................................................................45
Hierarchy ...............................................................................................................................45
XML Namespaces ..................................................................................................................46
XAML Syntax ...............................................................................................................................46
Classes and Members ...........................................................................................................47
Markup Extensions ................................................................................................................48
Constructors ..........................................................................................................................55
XAML Terms ...........................................................................................................................60
Xamarin.Forms Syntax ................................................................................................................61
Property Element Syntax .......................................................................................................62
Content Property Syntax ........................................................................................................62
Enumeration Value Syntax .....................................................................................................63
vi
Table of ConTenTs
Event Handler Syntax ............................................................................................................63
Collection Syntax ...................................................................................................................65
Attached Property Syntax ......................................................................................................65
Anatomy of XAML Files ...............................................................................................................67
XAML Compilation .......................................................................................................................68
XAML Standard ...........................................................................................................................69
Summary.....................................................................................................................................71
Chapter 3: UI Design Using Layouts 73
Xamarin.Forms Layouts ..............................................................................................................73
Using Xamarin.Forms Layouts ....................................................................................................74
StackLayout ................................................................................................................................74
Padding Around the Entire Layout .........................................................................................75
Stacking with Vertical Orientation .........................................................................................76
Stacking with Horizontal Orientation .....................................................................................77
Nesting Layouts .....................................................................................................................79
Expanding and Padding Views by Using LayoutOptions ........................................................79
CODE COMPLETE: StackLayout ..............................................................................................81
FlexLayout ...................................................................................................................................82
Position Views Using Axes .....................................................................................................82
FlexLayout Patterns ...............................................................................................................86
Grid .............................................................................................................................................87
Sizing Rows and Columns .....................................................................................................90
Sizing to Fit Views .................................................................................................................90
Setting Exact Size ..................................................................................................................91
Expanding Views to Fit Available Space ................................................................................92
Expanding Views Proportionally ............................................................................................93
Creating Multicell Views ........................................................................................................94
Padding Between Cells ..........................................................................................................96
CODE COMPLETE: Grid ...........................................................................................................97
vii
Table of ConTenTs
RelativeLayout ............................................................................................................................98
Setting View Location and Size .............................................................................................99
Using Constraints ..................................................................................................................99
CODE COMPLETE: RelativeLayout ........................................................................................104
AbsoluteLayout .........................................................................................................................106
Creating Bounding Objects with SetLayoutBounds .............................................................107
CODE COMPLETE: AbsoluteLayout .......................................................................................111
ContentView ..............................................................................................................................112
CODE COMPLETE: ContentView ...........................................................................................114
Frame ........................................................................................................................................115
Understanding Custom Controls ...............................................................................................116
Summary...................................................................................................................................117
Chapter 4: Styles, Themes, and CSS 119
Creating a Page Without Style ...................................................................................................119
Styling Manually Using View Formatting Properties ............................................................123
Resources and Dictionaries ......................................................................................................126
Defining Resources .............................................................................................................127
Static Resource Lookup .......................................................................................................128
Dynamic Resource Lookup ..................................................................................................134
Reusable Resource Dictionaries ..........................................................................................140
Lookup Behavior ..................................................................................................................143
Overriding Resources ..........................................................................................................143
Merging Dictionaries ...........................................................................................................143
Styles ........................................................................................................................................144
Style Lookup ........................................................................................................................145
Explicit Styles ......................................................................................................................146
Implicit Styles ......................................................................................................................148
Overriding Styles .................................................................................................................149
Using Resources in Styles ...................................................................................................151
Style Inheritance..................................................................................................................153
viii
Table of ConTenTs
Styles Overview ...................................................................................................................157
Device Styles .......................................................................................................................163
Themes .....................................................................................................................................165
Using Themes ......................................................................................................................165
Theme Styling Options.........................................................................................................167
Dark Theme .........................................................................................................................168
Light Theme .........................................................................................................................169
Custom Themes ...................................................................................................................171
Cascading Style Sheets (CSS) ...................................................................................................174
Selectors .............................................................................................................................175
Using CSS ............................................................................................................................175
Xamarin.Forms CSS Definition ............................................................................................181
Summary...................................................................................................................................185
Chapter 5: User Interaction Using Controls 187
Xamarin.Forms Views ...............................................................................................................187
Picker ..................................................................................................................................188
DatePicker ...........................................................................................................................191
TimePicker ...........................................................................................................................193
Stepper ................................................................................................................................195
Slider ...................................................................................................................................196
Switch..................................................................................................................................197
Scale, Rotation, Opacity, Visibility, and Focus ......................................................................198
CODE COMPLETE: Xamarin.Forms Views .............................................................................199
Custom Controls ........................................................................................................................201
Control Templates .....................................................................................................................202
Commands ................................................................................................................................204
CommandParameters ..........................................................................................................206
Triggers .....................................................................................................................................207
TargetType ...........................................................................................................................207
Property Trigger ...................................................................................................................208
Data Trigger .........................................................................................................................209
ix
Table of ConTenTs
Multi Trigger ........................................................................................................................209
Event Trigger ........................................................................................................................210
CODE COMPLETE: Triggers ...................................................................................................211
Behaviors ..................................................................................................................................214
Attached Properties .............................................................................................................214
Behavior ..............................................................................................................................216
Summary...................................................................................................................................218
Chapter 6: Making a Scrollable List 219
Xamarin.Forms ListView ...........................................................................................................219
Binding to a List of Strings ........................................................................................................220
Selecting an Item ......................................................................................................................222
Binding to a Data Model ............................................................................................................225
CODE COMPLETE: Binding to a Data Model .........................................................................227
Adding an Image .......................................................................................................................229
Customizing List Rows ..............................................................................................................232
CODE COMPLETE: Customizing List Rows ...........................................................................236
Adding Buttons ..........................................................................................................................238
Using Button Views ..............................................................................................................238
Using Context Actions ..........................................................................................................242
Grouping Headers .....................................................................................................................245
Customizing the Group Header .................................................................................................249
Creating a Jump List .................................................................................................................253
ListViews Scroll Automatically ..................................................................................................254
Pull-to-Refresh ..........................................................................................................................255
Optimizing Performance ...........................................................................................................255
ListView Caching .................................................................................................................256
ListView Optimization ..........................................................................................................257
Summary...................................................................................................................................258
x