"
Xamarin.Forms Notes for Professionalsπ Quay lαΊ‘i trang tαΊ£i sΓ‘ch pdf ebook Xamarin.Forms Notes for ProfessionalsEbooksNhΓ³m Zalo
Notes for Professionals Xamarin
Xamarin.Forms
.Forms
Notes for Professionals
100+ pages
of professional hints and tricks
GoalKicker.com Free Programming Books
Disclaimer
This is an unoξ€cial free book created for educational purposes and is not aξ€liated with oξ€cial Xamarin.Forms group(s) or company(s). All trademarks and registered trademarks are
the property of their respective owners
Contents
About ................................................................................................................................................................................... 1 Chapter 1: Getting started with Xamarin.Forms ........................................................................................... 2 Section 1.1: Installation (Visual Studio) ......................................................................................................................... 2 Section 1.2: Hello World Xamarin Forms: Visual Studio ............................................................................................. 4 Chapter 2: Why Xamarin Forms and When to use Xamarin Forms .................................................... 7 Section 2.1: Why Xamarin Forms and When to use Xamarin Forms ....................................................................... 7 Chapter 3: Xamarin Forms Layouts .................................................................................................................... 8 Section 3.1: AbsoluteLayout .......................................................................................................................................... 8 Section 3.2: Grid ........................................................................................................................................................... 10 Section 3.3: ContentPresenter .................................................................................................................................... 11 Section 3.4: ContentView ............................................................................................................................................ 12 Section 3.5: ScrollView ................................................................................................................................................ 13 Section 3.6: Frame ....................................................................................................................................................... 14 Section 3.7: TemplatedView ....................................................................................................................................... 14 Section 3.8: RelativeLayout ........................................................................................................................................ 15 Section 3.9: StackLayout ............................................................................................................................................ 16 Chapter 4: Xamarin Relative Layout ............................................................................................................... 19 Section 4.1: Box after box ........................................................................................................................................... 19 Section 4.2: Page with an simple label on the middle ............................................................................................. 21 Chapter 5: Navigation in Xamarin.Forms ....................................................................................................... 23 Section 5.1: NavigationPage flow with XAML ............................................................................................................ 23 Section 5.2: NavigationPage flow .............................................................................................................................. 24 Section 5.3: Master Detail Navigation ....................................................................................................................... 25 Section 5.4: Using INavigation from view model ..................................................................................................... 26 Section 5.5: Master Detail Root Page ........................................................................................................................ 28 Section 5.6: Hierarchical navigation with XAML ....................................................................................................... 29 Section 5.7: Modal navigation with XAML ................................................................................................................. 31 Chapter 6: Xamarin.Forms Page ........................................................................................................................ 32 Section 6.1: TabbedPage ............................................................................................................................................ 32 Section 6.2: ContentPage ........................................................................................................................................... 33 Section 6.3: MasterDetailPage ................................................................................................................................... 34 Chapter 7: Xamarin.Forms Cells ......................................................................................................................... 36 Section 7.1: EntryCell ................................................................................................................................................... 36 Section 7.2: SwitchCell ................................................................................................................................................. 36 Section 7.3: TextCell .................................................................................................................................................... 37 Section 7.4: ImageCell ................................................................................................................................................. 38 Section 7.5: ViewCell .................................................................................................................................................... 39 Chapter 8: Xamarin.Forms Views ....................................................................................................................... 41 Section 8.1: Button ....................................................................................................................................................... 41 Section 8.2: DatePicker ............................................................................................................................................... 42 Section 8.3: Entry ......................................................................................................................................................... 43 Section 8.4: Editor ........................................................................................................................................................ 43 Section 8.5: Image ....................................................................................................................................................... 44 Section 8.6: Label ........................................................................................................................................................ 45 Chapter 9: Using ListViews ..................................................................................................................................... 47 Section 9.1: Pull to Refresh in XAML and Code behind ............................................................................................ 47
Chapter 10: Display Alert ........................................................................................................................................ 48 Section 10.1: DisplayAlert ............................................................................................................................................ 48 Section 10.2: Alert Example with only one button and action ................................................................................. 49
Chapter 11: Accessing native features with DependencyService ....................................................... 50 Section 11.1: Implementing text-to-speech ................................................................................................................ 50 Section 11.2: Getting Application and Device OS Version Numbers - Android & iOS - PCL ................................. 53
Chapter 12: DependencyService ......................................................................................................................... 55 Section 12.1: Android implementation ........................................................................................................................ 55 Section 12.2: Interface ................................................................................................................................................. 56 Section 12.3: iOS implementation ............................................................................................................................... 56 Section 12.4: Shared code ........................................................................................................................................... 57
Chapter 13: Custom Renderers ............................................................................................................................ 58 Section 13.1: Accessing renderer from a native project ........................................................................................... 58 Section 13.2: Rounded label with a custom renderer for Frame (PCL & iOS parts) ............................................. 58 Section 13.3: Custom renderer for ListView .............................................................................................................. 59 Section 13.4: Custom Renderer for BoxView ............................................................................................................. 61 Section 13.5: Rounded BoxView with selectable background color ....................................................................... 65
Chapter 14: Caching .................................................................................................................................................. 68 Section 14.1: Caching using Akavache ....................................................................................................................... 68 Chapter 15: Gestures ................................................................................................................................................. 70 Section 15.1: Make an Image tappable by adding a TapGestureRecognizer ....................................................... 70 Section 15.2: Gesture Event ......................................................................................................................................... 70 Section 15.3: Zoom an Image with the Pinch gesture .............................................................................................. 78 Section 15.4: Show all of the zoomed Image content with the PanGestureRecognizer ....................................... 78 Section 15.5: Tap Gesture ........................................................................................................................................... 79 Section 15.6: Place a pin where the user touched the screen with MR.Gestures .................................................. 79 Chapter 16: Data Binding ........................................................................................................................................ 81 Section 16.1: Basic Binding to ViewModel .................................................................................................................. 81 Chapter 17: Working with Maps ........................................................................................................................... 83 Section 17.1: Adding a map in Xamarin.Forms (Xamarin Studio) ........................................................................... 83 Chapter 18: Custom Fonts in Styles ................................................................................................................... 92 Section 18.1: Accessing custom Fonts in Syles .......................................................................................................... 92 Chapter 19: Push Notifications ............................................................................................................................. 94 Section 19.1: Push notifications for Android with Azure ........................................................................................... 94 Section 19.2: Push notifications for iOS with Azure .................................................................................................. 96 Section 19.3: iOS Example ........................................................................................................................................... 99 Chapter 20: Eξ£ects .................................................................................................................................................. 101 Section 20.1: Adding platform specific Eξ£ect for an Entry control ...................................................................... 101 Chapter 21: Triggers & Behaviours .................................................................................................................. 105 Section 21.1: Xamarin Forms Trigger Example ....................................................................................................... 105 Section 21.2: Multi Triggers ....................................................................................................................................... 106 Chapter 22: AppSettings Reader in Xamarin.Forms .............................................................................. 107 Section 22.1: Reading app.config file in a Xamarin.Forms Xaml project ............................................................. 107 Chapter 23: Creating custom controls ........................................................................................................... 108 Section 23.1: Label with bindable collection of Spans ........................................................................................... 108 Section 23.2: Implementing a CheckBox Control ................................................................................................... 110 Section 23.3: Create an Xamarin Forms custom input control (no native required) ......................................... 116 Section 23.4: Creating a custom Entry control with a MaxLength property ....................................................... 118
Section 23.5: Creating custom Button ..................................................................................................................... 119 Chapter 24: Working with local databases ................................................................................................ 121 Section 24.1: Using SQLite.NET in a Shared Project ............................................................................................... 121 Section 24.2: Working with local databases using xamarin.forms in visual studio 2015 ................................... 123 Chapter 25: CarouselView - Pre-release version ..................................................................................... 133 Section 25.1: Import CarouselView .......................................................................................................................... 133 Section 25.2: Import CarouselView into a XAML Page .......................................................................................... 133 Chapter 26: Exception handling ........................................................................................................................ 135 Section 26.1: One way to report about exceptions on iOS .................................................................................... 135 Chapter 27: SQL Database and API in Xamarin Forms. ........................................................................ 137 Section 27.1: Create API using SQL database and implement in Xamarin forms, .............................................. 137 Chapter 28: Contact Picker - Xamarin Forms (Android and iOS) .................................................... 138 Section 28.1: contact_picker.cs ................................................................................................................................ 138 Section 28.2: MyPage.cs ........................................................................................................................................... 138 Section 28.3: ChooseContactPicker.cs .................................................................................................................... 139 Section 28.4: ChooseContactActivity.cs .................................................................................................................. 139 Section 28.5: MainActivity.cs .................................................................................................................................... 140 Section 28.6: ChooseContactRenderer.cs ............................................................................................................... 141 Chapter 29: Xamarin Plugin ................................................................................................................................ 144 Section 29.1: Media Plugin ........................................................................................................................................ 144 Section 29.2: Share Plugin ........................................................................................................................................ 146 Section 29.3: ExternalMaps ...................................................................................................................................... 147 Section 29.4: Geolocator Plugin ............................................................................................................................... 148 Section 29.5: Messaging Plugin ............................................................................................................................... 150 Section 29.6: Permissions Plugin .............................................................................................................................. 151 Chapter 30: OAuth2 ................................................................................................................................................. 155 Section 30.1: Authentication by using Plugin .......................................................................................................... 155 Chapter 31: MessagingCenter ............................................................................................................................. 157 Section 31.1: Simple example .................................................................................................................................... 157 Section 31.2: Passing arguments ............................................................................................................................. 157 Section 31.3: Unsubscribing ...................................................................................................................................... 158 Chapter 32: Generic Xamarin.Forms app lifecycle? Platform-dependant! ................................ 159
Section 32.1: Xamarin.Forms lifecycle is not the actual app lifecycle but a cross-platform representation of it .......................................................................................................................................................................... 159 Chapter 33: Platform-specific behaviour ..................................................................................................... 161 Section 33.1: Removing icon in navigation header in Anroid ................................................................................ 161 Section 33.2: Make label's font size smaller in iOS ................................................................................................ 161 Chapter 34: Platform specific visual adjustments .................................................................................. 163 Section 34.1: Idiom adjustments ............................................................................................................................... 163 Section 34.2: Platform adjustments ........................................................................................................................ 163 Section 34.3: Using styles ......................................................................................................................................... 164 Section 34.4: Using custom views ............................................................................................................................ 164 Chapter 35: Dependency Services ................................................................................................................... 165 Section 35.1: Access Camera and Gallery ............................................................................................................... 165 Chapter 36: Unit Testing ....................................................................................................................................... 166 Section 36.1: Testing the view models ..................................................................................................................... 166 Chapter 37: BDD Unit Testing in Xamarin.Forms ..................................................................................... 172 Section 37.1: Simple Specflow to test commands and navigation with NUnit Test Runner .............................. 172
Section 37.2: Advanced Usage for MVVM .............................................................................................................. 174 Credits ............................................................................................................................................................................ 175 You may also like ...................................................................................................................................................... 176
About
Please feel free to share this PDF with anyone for free,
latest version of this book can be downloaded from:
https://goalkicker.com/XamarinFormsBook
This Xamarin.Forms Notes for Professionals book is compiled from Stack Overflow Documentation, the content is written by the beautiful people at Stack Overflow. Text content is released under Creative Commons BY-SA, see credits at the end of this book whom contributed to the various chapters. Images may be copyright of their respective owners unless otherwise specified
This is an unofficial free book created for educational purposes and is not
affiliated with official Xamarin.Forms group(s) or company(s) nor Stack Overflow. All trademarks and registered trademarks are the property of their respective company owners
The information presented in this book is not guaranteed to be correct nor accurate, use at your own risk
Please send feedback and corrections to web@petercv.com
GoalKicker.com β Xamarin.Forms Notes for Professionals 1
Chapter 1: Getting started with
Xamarin.Forms
Version Release Date
3.0.0 2018-05-07
2.5.0 2017-11-15
2.4.0 2017-09-27
2.3.1 2016-08-03
2.3.0-hotfix1 2016-06-29
2.3.0 2016-06-16
2.2.0-hotfix1 2016-05-30
2.2.0 2016-04-27
2.1.0 2016-03-13
2.0.1 2016-01-20
2.0.0 2015-11-17
1.5.1 2016-10-20
1.5.0 2016-09-25
1.4.4 2015-07-27
1.4.3 2015-06-30
1.4.2 2015-04-21
1.4.1 2015-03-30
1.4.0 2015-03-09
1.3.5 2015-03-02
1.3.4 2015-02-17
1.3.3 2015-02-09
1.3.2 2015-02-03
1.3.1 2015-01-04
1.3.0 2014-12-24
1.2.3 2014-10-02
1.2.2 2014-07-30
1.2.1 2014-07-14
1.2.0 2014-07-11
1.1.1 2014-06-19
1.1.0 2014-06-12
1.0.1 2014-06-04
Section 1.1: Installation (Visual Studio)
Xamarin.Forms is a cross-platform natively backed UI toolkit abstraction that allows developers to easily create user interfaces that can be shared across Android, iOS, Windows, and Windows Phone. The user interfaces are rendered using the native controls of the target platform, allowing Xamarin.Forms applications to retain the appropriate look and feel for each platform.
Xamarin Plugin for Visual Studio
To get started with Xamarin.Forms for Visual Studio you need to have the Xamarin plugin itself. The easiest way to have it installed is to download and install the latest Visual Studio.
GoalKicker.com β Xamarin.Forms Notes for Professionals 2
If you already have the latest Visual Studio installed, go to Control Panel > Programs and Features, right click on Visual Studio, and click Change. When the installer opens, click on Modify, and select the cross-platform mobile development tools:
You can also select to install the Android SDK:
Uncheck it if you already have the SDK installed. You will be able to setup Xamarin to use existing Android SDK later. Xamarin.Forms
Xamarin.Forms is a set of libraries for your Portable Class library and native assemblies. The Xamarin.Forms library itself is available as a NuGet package. To add it to your project just use the regular Install-Package command of the Package Manager Console:
Install-Package Xamarin.Forms
for all of your initial assemblies (for example MyProject, MyProject.Droid and MyProject.iOS). The easiest way to get started with Xamarin.Forms is to create an empty project in Visual Studio:
GoalKicker.com β Xamarin.Forms Notes for Professionals 3
As you can see there are 2 available options to create the blank app -- Portable and Shared. I recommend you to get started with Portable one because it's the most commonly used in the real world (differences and more explanation to be added).
After creating the project make sure you're using the latest Xamarin.Forms version as your initial template may contain the old one. Use your Package Manager Console or Manage NuGet Packages option to upgrade to the latest Xamarin.Forms (remember it's just a NuGet package).
While the Visual Studio Xamarin.Forms templates will create an iOS platform project for you, you will need to connect Xamarin to a Mac build host to be able to run these projects on the iOS Simulator or physical devices.
Section 1.2: Hello World Xamarin Forms: Visual Studio
After successfully installing Xamarin as described in the first example, it's time to launch the first sample application.
Step 1: Creating a new Project.
In Visual Studio, choose New -> Project -> Visual C# -> Cross-Platform -> Blank App (Xamarin.Forms Portable)
Name the app "Hello World" and select the location to create the project and click OK. This will create a solution for you which contains three projects:
1. HelloWorld (this is where your logic and views is placed, i.e. the portable project)
2. HelloWorld.Droid (the Android project)
3. HelloWorld.iOS (the iOS project)
GoalKicker.com β Xamarin.Forms Notes for Professionals 4
Step 2: Investigating the sample
Having created the solution, a sample application will be ready to be deployed. Open the App.cs located in the root of the portable project and investigate the code. As seen below, the Contents of the sample is a StackLayout which contains a Label:
using Xamarin.Forms;
namespace Hello_World
{
public class App : Application
{
public App()
{
// The root page of your application
MainPage = new ContentPage
{
Content = new StackLayout
{
VerticalOptions = LayoutOptions.Center,
Children = {
new Label {
HorizontalTextAlignment = TextAlignment.Center, Text = "Welcome to Xamarin Forms!"
}
}
}
};
}
protected override void OnStart()
GoalKicker.com β Xamarin.Forms Notes for Professionals 5
{
// Handle when your app starts
}
protected override void OnSleep()
{
// Handle when your app sleeps
}
protected override void OnResume()
{
// Handle when your app resumes
}
}
}
Step 3: Launching the application
Now simply right-click the project you want to start (HelloWorld.Droid or HelloWorld.iOS) and click Set as StartUp Project. Then, in the Visual Studio toolbar, click the Start button (the green triangular button that resembles a Play button) to launch the application on the targeted simulator/emulator.
GoalKicker.com β Xamarin.Forms Notes for Professionals 6
Chapter 2: Why Xamarin Forms and When to use Xamarin Forms
Section 2.1: Why Xamarin Forms and When to use Xamarin Forms
Xamarin is becoming more and more popular - it is hard to decide when to use Xamarin.Forms and when Xamarin.Platform (so Xamarin.iOS and Xamarin.Android).
First of all you should know for what kind of applications you can use Xamarin.Forms:
1. Prototypes - to visualize how your application will look on the different devices.
2. Applications which not require platform specific functionality (like APIs) - but here please note that Xamarin is working busily to provide as many cross-platform compatibility as possible.
3. Applications where code sharing is crucial - more important than UI.
4. Applications where data displayed is more important than advanced functionality
There are also many other factors:
1. Who will be responsible for application development - if your team consists of experienced mobile developers they will be able to handle Xamarin.Forms easily. But if you have one developer per platform (native development) Forms can be bigger challenge.
2. Please also note that with Xamarin.Forms you can still encounter some issues sometimes - Xamarin.Forms platform is still being improved.
3. Fast development is sometimes very important - to reduce costs and time you can decide to use Forms.
4. When developing enterprise applications without any advanced functionality it is better to use Xamarin.Forms - it enables you to share mode code not event in mobile area but in general. Some portions of code can be shared across many platforms.
You should not use Xamarin.Forms when:
1. You have to create custom functionality and and access platform specific APIs
2. You have to create custom UI for the mobile application
3. When some functionality is not ready for Xamarin.Forms (like some specific behaviour on the mobile device)
4. Your team consists of platform specific mobile developers (mobile development in Java and/or Swift/Objective C)
GoalKicker.com β Xamarin.Forms Notes for Professionals 7
Chapter 3: Xamarin Forms Layouts Section 3.1: AbsoluteLayout
AbsoluteLayout positions and sizes child elements proportional to its own size and position or by absolute values. Child views may be positioned and sized using proportional values or static values, and proportional and static values can be mixed.
A definition of an AbsoluteLayout in XAML looks like this:
The same layout would look like this in code:
Title = "Absolute Layout Exploration - Code";
var layout = new AbsoluteLayout();
var centerLabel = new Label {
Text = "I'm centered on iPhone 4 but no other device.",
LineBreakMode = LineBreakMode.WordWrap};
AbsoluteLayout.SetLayoutBounds (centerLabel, new Rectangle (115, 159, 100, 100));
GoalKicker.com β Xamarin.Forms Notes for Professionals 8
// No need to set layout flags, absolute positioning is the default
var bottomLabel = new Label { Text = "I'm bottom center on every device.", LineBreakMode = LineBreakMode.WordWrap };
AbsoluteLayout.SetLayoutBounds (bottomLabel, new Rectangle (.5, 1, .5, .1)); AbsoluteLayout.SetLayoutFlags (bottomLabel, AbsoluteLayoutFlags.All);
var rightBox = new BoxView{ Color = Color.Olive };
AbsoluteLayout.SetLayoutBounds (rightBox, new Rectangle (1, .5, 25, 100));
AbsoluteLayout.SetLayoutFlags (rightBox, AbsoluteLayoutFlags.PositionProportional);
var leftBox = new BoxView{ Color = Color.Red };
AbsoluteLayout.SetLayoutBounds (leftBox, new Rectangle (0, .5, 25, 100));
AbsoluteLayout.SetLayoutFlags (leftBox, AbsoluteLayoutFlags.PositionProportional);
var topBox = new BoxView{ Color = Color.Blue };
AbsoluteLayout.SetLayoutBounds (topBox, new Rectangle (.5, 0, 100, 25));
AbsoluteLayout.SetLayoutFlags (topBox, AbsoluteLayoutFlags.PositionProportional);
var twoFlagsBox = new BoxView{ Color = Color.Blue };
AbsoluteLayout.SetLayoutBounds (topBox, new Rectangle (.5, 0, 1, 25));
AbsoluteLayout.SetLayoutFlags (topBox, AbsoluteLayoutFlags.PositionProportional | AbsoluteLayout.WidthProportional);
layout.Children.Add (bottomLabel);
layout.Children.Add (centerLabel);
layout.Children.Add (rightBox);
layout.Children.Add (leftBox);
layout.Children.Add (topBox);
The AbsoluteLayout control in Xamarin.Forms allows you to specify where exactly on the screen you want the child elements to appear, as well as their size and shape (bounds).
There are a few different ways to set the bounds of the child elements based on the AbsoluteLayoutFlags enumeration that are used during this process. The AbsoluteLayoutFlags enumeration contains the following values:
All: All dimensions are proportional.
HeightProportional: Height is proportional to the layout.
None: No interpretation is done.
PositionProportional: Combines XProportional and YProportional.
SizeProportional: Combines WidthProportional and HeightProportional.
WidthProportional: Width is proportional to the layout.
XProportional: X property is proportional to the layout.
YProportional: Y property is proportional to the layout.
The process of working with the layout of the AbsoluteLayout container may seem a little counterintuitive at first, but with a little use it will become familiar. Once you have created your child elements, to set them at an absolute position within the container you will need to follow three steps. You will want to set the flags assigned to the elements using the AbsoluteLayout.SetLayoutFlags() method. You will also want to use the AbsoluteLayout.SetLayoutBounds() method to give the elements their bounds. Finally, you will want to add the child elements to the Children collection. Since Xamarin.Forms is an abstraction layer between Xamarin and the device-specific implementations, the positional values can be independent of the device pixels. This is where the layout flags mentioned previously come into play. You can choose how the layout process of the Xamarin.Forms controls should interpret the values you define.
GoalKicker.com β Xamarin.Forms Notes for Professionals 9
Section 3.2: Grid
A layout containing views arranged in rows and columns.
This is a typical Grid definition in XAML.
The same Grid defined in code looks like this:
var grid = new Grid();
grid.RowDefinitions.Add (new RowDefinition { Height = new GridLength(2, GridUnitType.Star) }); grid.RowDefinitions.Add (new RowDefinition { Height = new GridLength (1, GridUnitType.Star) }); grid.RowDefinitions.Add (new RowDefinition { Height = new GridLength(200)}); grid.ColumnDefinitions.Add (new ColumnDefinition{ Width = new GridLength (200) });
To add items to the grid: In XAML:
GoalKicker.com β Xamarin.Forms Notes for Professionals 10
<--DEFINITIONS...--!>
In C# code:
var grid = new Grid();
//DEFINITIONS...
var topLeft = new Label { Text = "Top Left" };
var topRight = new Label { Text = "Top Right" };
var bottomLeft = new Label { Text = "Bottom Left" };
var bottomRight = new Label { Text = "Bottom Right" };
grid.Children.Add(topLeft, 0, 0);
grid.Children.Add(topRight, 0, 1);
grid.Children.Add(bottomLeft, 1, 0);
grid.Children.Add(bottomRight, 1, 1);
For Height and Width a number of units are available.
Auto β automatically sizes to fit content in the row or column. Specified as GridUnitType.Auto in C# or as Auto in XAML.
Proportional β sizes columns and rows as a proportion of the remaining space. Specified as a value and GridUnitType.Star in C# and as #* in XAML, with # being your desired value. Specifying one row/column with * will cause it to fill the available space.
Absolute β sizes columns and rows with specific, fixed height and width values. Specified as a value and GridUnitType.Absolute in C# and as # in XAML, with # being your desired value.
Note: The width values for columns are set as Auto by default in Xamarin.Forms, which means that the width is determined from the size of the children. Note that this differs from the implementation of XAML on Microsoft platforms, where the default width is *, which will fill the available space.
Section 3.3: ContentPresenter
A layout manager for templated views. Used within a ControlTemplate to mark where the content to be presented appears.
GoalKicker.com β Xamarin.Forms Notes for Professionals 11
Section 3.4: ContentView
An element with a single content. ContentView has very little use of its own. Its purpose is to serve as a base class for user-defined compound views.
XAML
Code
GoalKicker.com β Xamarin.Forms Notes for Professionals 12
var contentView = new ContentView {
Content = new Label {
Text = "Hi, I'm a simple Label inside of a simple ContentView",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
}
};
Section 3.5: ScrollView
An element capable of scrolling if it's Content requires.
ScrollView contains layouts and enables them to scroll offscreen. ScrollView is also used to allow views to automatically move to the visible portion of the screen when the keyboard is showing.
Note: ScrollViews should not be nested. In addition, ScrollViews should not be nested with other controls that provide scrolling, like ListView and WebView.
A ScrollView is easy to define. In XAML:
The same definition in code:
var scroll = new ScrollView();
Content = scroll;
var stack = new StackLayout();
stack.Children.Add(new BoxView { BackgroundColor = Color.Red, HeightRequest = 600, WidthRequest = 600 });
GoalKicker.com β Xamarin.Forms Notes for Professionals 13
stack.Children.Add(new Entry());
Section 3.6: Frame
An element containing a single child, with some framing options. Frame have a default
Xamarin.Forms.Layout.Padding of 20.
XAML
Code
var frameView = new Frame {
Content = new Label {
Text = "I've been framed!",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
},
OutlineColor = Color.Red
};
Section 3.7: TemplatedView
An element that displays content with a control template, and the base class for ContentView.
GoalKicker.com β Xamarin.Forms Notes for Professionals 14
Section 3.8: RelativeLayout
A Layout that uses Constraints to layout its children.
RelativeLayout is used to position and size views relative to properties of the layout or sibling views. Unlike AbsoluteLayout, RelativeLayout does not have the concept of the moving anchor and does not have facilities for positioning elements relative to the bottom or right edges of the layout. RelativeLayout does support positioning elements outside of its own bounds.
A RelativeLayout in XAML, is like this:
The same layout can be accomplished with this code:
layout.Children.Add (redBox, Constraint.RelativeToParent ((parent) => {
return parent.X;
}), Constraint.RelativeToParent ((parent) => {
return parent.Y * .15;
}), Constraint.RelativeToParent((parent) => {
return parent.Width;
}), Constraint.RelativeToParent((parent) => {
return parent.Height * .8;
}));
layout.Children.Add (blueBox, Constraint.RelativeToView (redBox, (Parent, sibling) => { return sibling.X + 20;
}), Constraint.RelativeToView (blueBox, (parent, sibling) => {
return sibling.Y + 20;
}), Constraint.RelativeToParent((parent) => {
return parent.Width * .5;
}), Constraint.RelativeToParent((parent) => {
return parent.Height * .5;
}));
Section 3.9: StackLayout
StackLayout organizes views in a one-dimensional line ("stack"), either horizontally or vertically. Views in a StackLayout can be sized based on the space in the layout using layout options. Positioning is determined by the order views were added to the layout and the layout options of the views.
GoalKicker.com β Xamarin.Forms Notes for Professionals 16
Usage in XAML
Usage in code
StackLayout stackLayout = new StackLayout
{
Spacing =0,
VerticalOptions = LayoutOptions.FillAndExpand,
Children =
{
new Label
{
Text = "StackLayout",
HorizontalOptions = LayoutOptions.Start
},
new Label
{
Text = "stacks its children",
HorizontalOptions = LayoutOptions.Center
},
new Label
{
Text = "vertically",
HorizontalOptions = LayoutOptions.End
},
new Label
{
Text = "by default,",
HorizontalOptions = LayoutOptions.Center
},
new Label
{
Text = "but horizontal placement",
HorizontalOptions = LayoutOptions.Start
},
new Label
GoalKicker.com β Xamarin.Forms Notes for Professionals 17
{
Text = "can be controlled with",
HorizontalOptions = LayoutOptions.Center
},
new Label
{
Text = "the HorizontalOptions property.", HorizontalOptions = LayoutOptions.End
},
new Label
{
Text = "An Expand option allows one or more children " + "to occupy the an area within the remaining " + "space of the StackLayout after it's been sized " + "to the height of its parent.",
VerticalOptions = LayoutOptions.CenterAndExpand, HorizontalOptions = LayoutOptions.End
},
new StackLayout
{
Spacing = 0,
Orientation = StackOrientation.Horizontal, Children =
{
new Label
{
Text = "Stacking",
},
new Label
{
Text = "can also be",
HorizontalOptions = LayoutOptions.CenterAndExpand },
new Label
{
Text = "horizontal.",
},
}
}
}
};
GoalKicker.com β Xamarin.Forms Notes for Professionals 18
Chapter 4: Xamarin Relative Layout Section 4.1: Box after box
public class MyPage : ContentPage
{
RelativeLayout _layout;
BoxView centerBox;
BoxView rightBox;
BoxView leftBox;
BoxView topBox;
BoxView bottomBox;
const int spacing = 10;
const int boxSize = 50;
public MyPage()
{
_layout = new RelativeLayout();
centerBox = new BoxView
{
BackgroundColor = Color.Black
};
rightBox = new BoxView
{
BackgroundColor = Color.Blue,
//You can both set width and hight here
GoalKicker.com β Xamarin.Forms Notes for Professionals 19
//Or when adding the control to the layout
WidthRequest = boxSize,
HeightRequest = boxSize
};
leftBox = new BoxView
{
BackgroundColor = Color.Yellow,
WidthRequest = boxSize,
HeightRequest = boxSize
};
topBox = new BoxView
{
BackgroundColor = Color.Green,
WidthRequest = boxSize,
HeightRequest = boxSize
};
bottomBox = new BoxView
{
BackgroundColor = Color.Red,
WidthRequest = boxSize,
HeightRequest = boxSize
};
//First adding center box since other boxes will be relative to center box _layout.Children.Add(centerBox,
//Constraint for X, centering it horizontally
//We give the expression as a paramater, parent is our layout in this case Constraint.RelativeToParent(parent => parent.Width / 2 - boxSize / 2), //Constraint for Y, centering it vertically
Constraint.RelativeToParent(parent => parent.Height / 2 - boxSize / 2), //Constraint for Width
Constraint.Constant(boxSize),
//Constraint for Height
Constraint.Constant(boxSize));
_layout.Children.Add(leftBox,
//The x constraint will relate on some level to centerBox
//Which is the first parameter in this case
//We both need to have parent and centerBox, which will be called sibling, //in our expression parameters
//This expression will be our second paramater
Constraint.RelativeToView(centerBox, (parent, sibling) => sibling.X - spacing - boxSize),
//Since we only need to move it left,
//it's Y constraint will be centerBox' position at Y axis
Constraint.RelativeToView(centerBox, (parent, sibling) => sibling.Y) //No need to define the size constraints
//Since we initialize them during instantiation
);
_layout.Children.Add(rightBox,
//The only difference hear is adding spacing and boxSize instead of subtracting them Constraint.RelativeToView(centerBox, (parent, sibling) => sibling.X + spacing + boxSize),
Constraint.RelativeToView(centerBox, (parent, sibling) => sibling.Y) );
_layout.Children.Add(topBox,
//Since we are going to move it vertically this thime
GoalKicker.com β Xamarin.Forms Notes for Professionals 20
//We need to do the math on Y Constraint
//In this case, X constraint will be centerBox' position at X axis Constraint.RelativeToView(centerBox, (parent, sibling) => sibling.X), //We will do the math on Y axis this time
Constraint.RelativeToView(centerBox, (parent, sibling) => sibling.Y - spacing - boxSize)
);
_layout.Children.Add(bottomBox,
Constraint.RelativeToView(centerBox, (parent, sibling) => sibling.X), Constraint.RelativeToView(centerBox, (parent, sibling) => sibling.Y + spacing + boxSize)
);
Content = _layout;
}
}
Section 4.2: Page with an simple label on the middle
public class MyPage : ContentPage
{
RelativeLayout _layout;
Label MiddleText;
public MyPage()
{
_layout = new RelativeLayout();
MiddleText = new Label
{
GoalKicker.com β Xamarin.Forms Notes for Professionals 21
Text = "Middle Text"
};
MiddleText.SizeChanged += (s, e) =>
{
//We will force the layout so it will know the actual width and height of the label //Otherwise width and height of the label remains 0 as far as layout knows _layout.ForceLayout();
};
_layout.Children.Add(MiddleText
Constraint.RelativeToParent(parent => parent.Width / 2 - MiddleText.Width / 2), Constraint.RelativeToParent(parent => parent.Height / 2 - MiddleText.Height / 2));
Content = _layout;
}
}
GoalKicker.com β Xamarin.Forms Notes for Professionals 22
Chapter 5: Navigation in Xamarin.Forms Section 5.1: NavigationPage flow with XAML
App.xaml.cs file (App.xaml file is default, so skipped)
using Xamrin.Forms
namespace NavigationApp
{
public partial class App : Application
{
public static INavigation GlobalNavigation { get; private set; }
public App()
{
InitializeComponent();
var rootPage = new NavigationPage(new FirstPage());
GlobalNavigation = rootPage.Navigation;
MainPage = rootPage;
}
}
}
FirstPage.xaml file
In some cases you need to open the new page not in the current navigation but in the global one. For example, if your current page contains bottom menu, it will be visible when you push the new page in the current navigation. If you need the page to be opened over the whole visible content hiding the bottom menu and other current page's content, you need to push the new page as a modal into the global navigation. See App.GlobalNavigation property and the example below.
FirstPage.xaml.cs file
using System;
using Xamarin.Forms;
GoalKicker.com β Xamarin.Forms Notes for Professionals 23
namespace NavigationApp
{
public partial class FirstPage : ContentPage
{
public FirstPage()
{
InitializeComponent();
}
async void GoToSecondPageButtonClicked(object sender, EventArgs e) {
await Navigation.PushAsync(new SecondPage(), true); }
async void OpenGlobalModalPageButtonClicked(object sender, EventArgs e) {
await App.GlobalNavigation.PushModalAsync(new SecondPage(), true); }
}
}
SecondPage.xaml file (xaml.cs file is default, so skipped)
Section 5.2: NavigationPage flow
using System;
using Xamarin.Forms;
namespace NavigationApp
{
public class App : Application
{
public App()
{
MainPage = new NavigationPage(new FirstPage());
}
}
public class FirstPage : ContentPage
{
Label FirstPageLabel { get; set; } = new Label();
Button FirstPageButton { get; set; } = new Button();
public FirstPage()
{
Title = "First page";
GoalKicker.com β Xamarin.Forms Notes for Professionals 24
FirstPageLabel.Text = "This is the first page";
FirstPageButton.Text = "Navigate to the second page";
FirstPageButton.Clicked += OnFirstPageButtonClicked;
var content = new StackLayout();
content.Children.Add(FirstPageLabel);
content.Children.Add(FirstPageButton);
Content = content;
}
async void OnFirstPageButtonClicked(object sender, EventArgs e)
{
await Navigation.PushAsync(new SecondPage(), true);
}
}
public class SecondPage : ContentPage
{
Label SecondPageLabel { get; set; } = new Label();
public SecondPage()
{
Title = "Second page";
SecondPageLabel.Text = "This is the second page";
Content = SecondPageLabel;
}
}
}
Section 5.3: Master Detail Navigation
The code below shows how to perform asynchronous navigation when the app is in a MasterDetailPage context.
public async Task NavigateMasterDetail(Page page)
{
if (page == null)
{
return;
}
var masterDetail = App.Current.MainPage as MasterDetailPage;
if (masterDetail == null || masterDetail.Detail == null)
return;
var navigationPage = masterDetail.Detail as NavigationPage;
if (navigationPage == null)
{
masterDetail.Detail = new NavigationPage(page);
masterDetail.IsPresented = false;
return;
}
await navigationPage.Navigation.PushAsync(page);
navigationPage.Navigation.RemovePage(navigationPage.Navigation.NavigationStack[navigationPage.Navig ation.NavigationStack.Count - 2]);
GoalKicker.com β Xamarin.Forms Notes for Professionals 25
masterDetail.IsPresented = false;
}
Section 5.4: Using INavigation from view model First step is create navigation interface which we will use on view model:
public interface IViewNavigationService
{
void Initialize(INavigation navigation, SuperMapper navigationMapper); Task NavigateToAsync(object navigationSource, object parameter = null); Task GoBackAsync();
}
In Initialize method I use my custom mapper where I keep collection of pages types with associated keys.
public class SuperMapper
{
private readonly ConcurrentDictionary _typeToAssociateDictionary = new ConcurrentDictionary();
private readonly ConcurrentDictionary _associateToType = new ConcurrentDictionary();
public void AddMapping(Type type, object associatedSource)
{
_typeToAssociateDictionary.TryAdd(type, associatedSource);
_associateToType.TryAdd(associatedSource, type);
}
public Type GetTypeSource(object associatedSource)
{
Type typeSource;
_associateToType.TryGetValue(associatedSource, out typeSource);
return typeSource;
}
public object GetAssociatedSource(Type typeSource)
{
object associatedSource;
_typeToAssociateDictionary.TryGetValue(typeSource, out associatedSource);
return associatedSource;
}
}
Enum with pages:
public enum NavigationPageSource
{
Page1,
Page2
}
App.cs file:
public class App : Application
{
GoalKicker.com β Xamarin.Forms Notes for Professionals 26
public App()
{
var startPage = new Page1();
InitializeNavigation(startPage);
MainPage = new NavigationPage(startPage);
}
#region Sample of navigation initialization
private void InitializeNavigation(Page startPage)
{
var mapper = new SuperMapper();
mapper.AddMapping(typeof(Page1), NavigationPageSource.Page1); mapper.AddMapping(typeof(Page2), NavigationPageSource.Page2);
var navigationService = DependencyService.Get(); navigationService.Initialize(startPage.Navigation, mapper);
}
#endregion
}
In mapper I associated type of some page with enum value.
IViewNavigationService implementation:
[assembly: Dependency(typeof(ViewNavigationService))]
namespace SuperForms.Core.ViewNavigation
{
public class ViewNavigationService : IViewNavigationService
{
private INavigation _navigation;
private SuperMapper _navigationMapper;
public void Initialize(INavigation navigation, SuperMapper navigationMapper) {
_navigation = navigation;
_navigationMapper = navigationMapper;
}
public async Task NavigateToAsync(object navigationSource, object parameter = null) {
CheckIsInitialized();
var type = _navigationMapper.GetTypeSource(navigationSource);
if (type == null)
{
throw new InvalidOperationException(
"Can't find associated type for " + navigationSource.ToString()); }
ConstructorInfo constructor;
object[] parameters;
if (parameter == null)
{
constructor = type.GetTypeInfo()
.DeclaredConstructors
.FirstOrDefault(c => !c.GetParameters().Any());
parameters = new object[] { };
}
GoalKicker.com β Xamarin.Forms Notes for Professionals 27
else
{
constructor = type.GetTypeInfo()
.DeclaredConstructors
.FirstOrDefault(c =>
{
var p = c.GetParameters();
return p.Count() == 1 &&
p[0].ParameterType == parameter.GetType(); });
parameters = new[] { parameter };
}
if (constructor == null)
{
throw new InvalidOperationException(
"No suitable constructor found for page " + navigationSource.ToString()); }
var page = constructor.Invoke(parameters) as Page;
await _navigation.PushAsync(page);
}
public async Task GoBackAsync()
{
CheckIsInitialized();
await _navigation.PopAsync();
}
private void CheckIsInitialized()
{
if (_navigation == null || _navigationMapper == null)
throw new NullReferenceException("Call Initialize method first."); }
}
}
I get type of page on which user want navigate and create it's instance using reflection. And then I could use navigation service on view model:
var navigationService = DependencyService.Get(); await navigationService.NavigateToAsync(NavigationPageSource.Page2, "hello from Page1");
Section 5.5: Master Detail Root Page
public class App : Application
{
internal static NavigationPage NavPage;
public App ()
{
// The root page of your application
MainPage = new RootPage();
}
}
public class RootPage : MasterDetailPage
GoalKicker.com β Xamarin.Forms Notes for Professionals 28
{
public RootPage()
{
var menuPage = new MenuPage();
menuPage.Menu.ItemSelected += (sender, e) => NavigateTo(e.SelectedItem as MenuItem); Master = menuPage;
App.NavPage = new NavigationPage(new HomePage());
Detail = App.NavPage;
}
protected override async void OnAppearing()
{
base.OnAppearing();
}
void NavigateTo(MenuItem menuItem)
{
Page displayPage = (Page)Activator.CreateInstance(menuItem.TargetType); Detail = new NavigationPage(displayPage);
IsPresented = false;
}
}
Section 5.6: Hierarchical navigation with XAML
By default, the navigation pattern works like a stack of pages, calling the newest pages over the previous pages. You will need to use the NavigationPage object for this.
Pushing new pages
...
public class App : Application
{
public App()
{
MainPage = new NavigationPage(new Page1());
}
}
...
Page1.xaml
...
...
Page1.xaml.cs
...
public partial class Page1 : ContentPage
{
public Page1()
{
InitializeComponent();
}
protected async void GoToNextPage(object sender, EventArgs e)
{
await Navigation.PushAsync(new Page2());
}
}
GoalKicker.com β Xamarin.Forms Notes for Professionals 29
...
Page2.xaml
...
...
Page2.xaml.cs
...
public partial class Page2 : ContentPage
{
public Page2()
{
InitializeComponent();
}
protected async void GoToNextPage(object sender, EventArgs e)
{
await Navigation.PushAsync(new Page3());
}
}
...
Popping pages
Normally the user uses the back button to return pages, but sometimes you need to control this programmatically, so you need to call the method NavigationPage.PopAsync() to return to the previous page or NavigationPage.PopToRootAsync() to return at the beggining, such like...
Page3.xaml
...
...
Page3.xaml.cs
...
public partial class Page3 : ContentPage
{
public Page3()
{
InitializeComponent();
}
protected async void GoToPreviousPage(object sender, EventArgs e)
{
await Navigation.PopAsync();
}
protected async void GoToStartPage(object sender, EventArgs e)
{
GoalKicker.com β Xamarin.Forms Notes for Professionals 30
await Navigation.PopToRootAsync();
}
}
...
Section 5.7: Modal navigation with XAML
Modal pages can created in three ways:
From NavigationPage object for full screen pages
For Alerts and Notifications
For ActionSheets that are pop-ups menus
Full screen modals
...
// to open
await Navigation.PushModalAsync(new ModalPage());
// to close
await Navigation.PopModalAsync();
...
Alerts/Confirmations and Notifications
...
// alert
await DisplayAlert("Alert title", "Alert text", "Ok button text");
// confirmation
var booleanAnswer = await DisplayAlert("Confirm?", "Confirmation text", "Yes", "No"); ...
ActionSheets
...
var selectedOption = await DisplayActionSheet("Options", "Cancel", "Destroy", "Option 1", "Option 2", "Option 3");
...
GoalKicker.com β Xamarin.Forms Notes for Professionals 31
Chapter 6: Xamarin.Forms Page Section 6.1: TabbedPage
A TabbedPage is similar to a NavigationPage in that it allows for and manages simple navigation between several child Page objects. The difference is that generally speaking, each platform displays some sort of bar at the top or bottom of the screen that displays most, if not all, of the available child Page objects. In Xamarin.Forms applications, a TabbedPage is generally useful when you have a small predefined number of pages that users can navigate between, such as a menu or a simple wizard that can be positioned at the top or bottom of the screen.
XAML
Code
var page1 = new ContentPage {
Title = "Tab1",
Content = new Label {
Text = "I'm the Tab1 Page",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
}
};
var page2 = new ContentPage {
Title = "Tab2",
Content = new Label {
Text = "I'm the Tab2 Page",
HorizontalOptions = LayoutOptions.Center,
66
VerticalOptions = LayoutOptions.Center
}
};
var tabbedPage = new TabbedPage {
Children = { page1, page2 }
};
GoalKicker.com β Xamarin.Forms Notes for Professionals 32
Section 6.2: ContentPage
ContentPage: Displays a single View.
XAML
Code
var label = new Label {
Text = "This is a simple ContentPage",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
};
var contentPage = new ContentPage {
Content = label
};
GoalKicker.com β Xamarin.Forms Notes for Professionals 33
Section 6.3: MasterDetailPage
MasterDetailPage: Manages two separate Pages (panes) of information.
XAML
Code
var masterDetailPage = new MasterDetailPage {
Master = new ContentPage {
Content = new Label {
Title = "Master",
BackgroundColor = Color.Silver,
TextColor = Color.Black,
Text = "This is the Master page.",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
}
GoalKicker.com β Xamarin.Forms Notes for Professionals 34
},
Detail = new ContentPage {
Content = new Label {
Title = "Detail",
Text = "This is the Detail page.",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
}
}
};
GoalKicker.com β Xamarin.Forms Notes for Professionals 35
Chapter 7: Xamarin.Forms Cells
Section 7.1: EntryCell
An EntryCell is a Cell that combines the capabilities of a Label and an Entry. The EntryCell can be useful in scenarios when building some functionality within your application to gather data from the user. They can easily be placed into a TableView and be treated as a simple form.
XAML
Code
var entryCell = new EntryCell {
Label = "Type Something",
Placeholder = "Here"
};
Section 7.2: SwitchCell
A SwitchCell is a Cell that combines the capabilities of a Label and an on-off switch. A SwitchCell can be useful for turning on and off functionality, or even user preferences or configuration options.
XAML
Code
var switchCell = new SwitchCell {
Text = "Switch It Up!"
};
GoalKicker.com β Xamarin.Forms Notes for Professionals 36
Section 7.3: TextCell
A TextCell is a Cell that has two separate text areas for displaying data. A TextCell is typically used for information purposes in both TableView and ListView controls. The two text areas are aligned vertically to maximize the space within the Cell. This type of Cell is also commonly used to display hierarchical data, so when the user taps this cell, it will navigate to another page.
XAML
Code
var textCell = new TextCell {
Text = "I am primary",
TextColor = Color.Red,
Detail = "I am secondary",
DetailColor = Color.Blue
};
GoalKicker.com β Xamarin.Forms Notes for Professionals 37
Section 7.4: ImageCell
An ImageCell is exactly what it sounds like. It is a simple Cell that contains only an Image. This control functions very similarly to a normal Image control, but with far fewer bells and whistles.
XAML
Code
var imageCell = new ImageCell {
ImageSource = ImageSource.FromUri(new Uri("http://d2g29cya9iq7ip.clou
109
dfront.net/content/images/company/aboutus-videobg.png?v=25072014072745")),
Text = "This is some text",
Detail = "This is some detail"
};
GoalKicker.com β Xamarin.Forms Notes for Professionals 38
Section 7.5: ViewCell
You can consider a ViewCell a blank slate. It is your personal canvas to create a Cell that looks exactly the way you want it. You can even compose it of instances of multiple other View objects put together with Layout controls. You are only limited by your imagination. And maybe screen size.
XAML
Code
var button = new Button { Text = "My Button" };
var label = new Label { Text = "My Label" };
var entry = new Entry { Text ="And some other stuff" };
var viewCell = new ViewCell {
View = new StackLayout {
Children = { button, label, entry }
}
};
GoalKicker.com β Xamarin.Forms Notes for Professionals 39
GoalKicker.com β Xamarin.Forms Notes for Professionals 40
Chapter 8: Xamarin.Forms Views Section 8.1: Button
The Button is probably the most common control not only in mobile applications, but in any applications that have a UI. The concept of a button has too many purposes to list here. Generally speaking though, you will use a button to allow users to initiate some sort of action or operation within your application. This operation could include anything from basic navigation within your app, to submitting data to a web service somewhere on the Internet.
XAML
XAML Code-Behind
public void Button_Clicked( object sender, EventArgs args )
{
MyButton.Text = "I've been clicked!";
}
Code
var button = new Button( )
{
Text = "Hello, Forms !",
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand,
TextColor = Color.Red,
BorderColor = Color.Blue,
};
button.Clicked += ( sender, args ) =>
{
var b = (Button) sender;
b.Text = "I've been clicked!";
};
GoalKicker.com β Xamarin.Forms Notes for Professionals 41
Section 8.2: DatePicker
Quite often within mobile applications, there will be a reason to deal with dates. When working with dates, you will probably need some sort of user input to select a date. This could occur when working with a scheduling or calendar app. In this case, it is best to provide users with a specialized control that allows them to interactively pick a date, rather than requiring users to manually type a date. This is where the DatePicker control is really useful.
XAML
Code
var datePicker = new DatePicker{
Date = DateTime.Now,
Format = "d"
};
GoalKicker.com β Xamarin.Forms Notes for Professionals 42
Section 8.3: Entry
The Entry View is used to allow users to type a single line of text. This single line of text can be used for multiple purposes including entering basic notes, credentials, URLs, and more. This View is a multi-purpose View, meaning that if you need to type regular text or want to obscure a password, it is all done through this single control.
XAML
Code
var entry = new Entry {
Placeholder = "Please Enter Some Text Here",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
Keyboard = Keyboard.Email
};
Section 8.4: Editor
The Editor is very similar to the Entry in that it allows users to enter some free-form text. The difference is that the Editor allows for multi-line input whereas the Entry is only used for single line input. The Entry also provides a few more properties than the Editor to allow further customization of the View.
XAML
Code
var editor = new Editor {
GoalKicker.com β Xamarin.Forms Notes for Professionals 43
HorizontalOptions = LayoutOptions.Fill,
VerticalOptions = LayoutOptions.Fill,
Keyboard = Keyboard.Chat
};
Section 8.5: Image
Images are very important parts of any application. They provide the opportunity to inject additional visual elements as well as branding into your application. Not to mention that images are typically more interesting to look at than text or buttons. You can use an Image as a standalone element within your application, but an Image element can also be added to other View elements such as a Button.
XAML
Code
var image = new Image {
Aspect = Aspect.AspectFit,
Source = ImageSource.FromUri(new Uri("http://d2g29cya9iq7ip.cloudfron
t.net/content/images/company/aboutus-video-bg.png?v=25072014072745"))
};
GoalKicker.com β Xamarin.Forms Notes for Professionals 44
Section 8.6: Label
Believe it or not, the Label is one of the most crucial yet underappreciated View classes not only in Xamarin.Forms, but in UI development in general. It is seen as a rather boring line of text, but without that line of text it would be very difficult to convey certain ideas to the user. Label controls can be used to describe what the user should enter into an Editor or Entry control. They can describe a section of the UI and give it context. They can be used to show the total in a calculator app. Yes, the Label is truly the most versatile control in your tool bag that may not always spark a lot of attention, but it is the first one noticed if it isnβt there.
XAML
Code
var label = new Label {
Text = "This is some really awesome text in a Label!",
TextColor = Color.Red,
XAlign = TextAlignment.Center,
YAlign = TextAlignment.Center
};
GoalKicker.com β Xamarin.Forms Notes for Professionals 45
GoalKicker.com β Xamarin.Forms Notes for Professionals 46
Chapter 9: Using ListViews
This documentation details how to use the different components of the Xamarin Forms ListView Section 9.1: Pull to Refresh in XAML and Code behind
To enable Pull to Refresh in a ListView in Xamarin, you first need to specify that it is PullToRefresh enabled and then specify the name of the command you want to invoke upon the ListView being pulled:
The same can be achieved in code behind:
itemListView.IsPullToRefreshEnabled = true;
itemListView.RefreshCommand = Refresh;
Then, you must specify what the Refresh Command does in your code behind:
public ICommand Refresh
{
get
{
itemListView.IsRefreshing = true; //This turns on the activity
//Indicator for the ListView
//Then add your code to execute when the ListView is pulled
itemListView.IsRefreshing = false;
}
}
GoalKicker.com β Xamarin.Forms Notes for Professionals 47
Chapter 10: Display Alert
Section 10.1: DisplayAlert
An alert box can be popped-up on a Xamarin.Forms Page by the method, DisplayAlert. We can provide a Title, Body (Text to be alerted) and one/two Action Buttons. Page offers two overrides of DisplayAlert method.
1. public Task DisplayAlert (String title, String message, String cancel)
This override presents an alert dialog to the application user with a single cancel button. The alert displays modally and once dismissed the user continues interacting with the application.
Example :
DisplayAlert ("Alert", "You have been alerted", "OK");
Above snippet will present a native implementation of Alerts in each platform (AlertDialog in Android, UIAlertView in iOS, MessageDialog in Windows) as below.
2. public System.Threading.Tasks.Task DisplayAlert (String title, String message, String accept, String cancel)
This override presents an alert dialog to the application user with an accept and a cancel button. It captures a user's response by presenting two buttons and returning a boolean. To get a response from an alert, supply text for both buttons and await the method. After the user selects one of the options the answer will be returned to the code.
Example :
var answer = await DisplayAlert ("Question?", "Would you like to play a game", "Yes", "No"); Debug.WriteLine ("Answer: " + (answer?"Yes":"No"));
Example 2:(if Condition true or false check to alert proceed)
GoalKicker.com β Xamarin.Forms Notes for Professionals 48
async void listSelected(object sender, SelectedItemChangedEventArgs e)
{
var ans = await DisplayAlert("Question?", "Would you like Delete", "Yes", "No"); if (ans == true)
{
//Success condition
}
else
{
//false conditon
}
}
Section 10.2: Alert Example with only one button and action
var alertResult = await DisplayAlert("Alert Title", Alert Message, null, "OK"); if(!alertResult)
{
//do your stuff.
}
Here we will get Ok click action.
GoalKicker.com β Xamarin.Forms Notes for Professionals 49
Chapter 11: Accessing native features with DependencyService
Section 11.1: Implementing text-to-speech
A good example of a feature that request platform specific code is when you want to implement text-to-speech (tts). This example assumes that you are working with shared code in a PCL library.
A schematic overview of our solution would look like the image underneath.
In our shared code we define an interface which is registered with the DependencyService. This is where we will do our calls upon. Define an interface like underneath.
public interface ITextToSpeech
{
void Speak (string text);
}
Now in each specific platform, we need to create an implementation of this interface. Let's start with the iOS implementation.
iOS Implementation
using AVFoundation;
public class TextToSpeechImplementation : ITextToSpeech
{
public TextToSpeechImplementation () {}
public void Speak (string text)
{
var speechSynthesizer = new AVSpeechSynthesizer ();
var speechUtterance = new AVSpeechUtterance (text) {
Rate = AVSpeechUtterance.MaximumSpeechRate/4,
Voice = AVSpeechSynthesisVoice.FromLanguage ("en-US"),
GoalKicker.com β Xamarin.Forms Notes for Professionals 50
Volume = 0.5f,
PitchMultiplier = 1.0f
};
speechSynthesizer.SpeakUtterance (speechUtterance);
}
}
In the code example above you notice that there is specific code to iOS. Like types such as AVSpeechSynthesizer. These would not work in shared code.
To register this implementation with the Xamarin DependencyService add this attribute above the namespace declaration.
using AVFoundation;
using DependencyServiceSample.iOS;//enables registration outside of namespace
[assembly: Xamarin.Forms.Dependency (typeof (TextToSpeechImplementation))] namespace DependencyServiceSample.iOS {
public class TextToSpeechImplementation : ITextToSpeech
//... Rest of code
Now when you do a call like this in your shared code, the right implementation for the platform you are running your app on is injected.
DependencyService.Get(). More on this later on.
Android Implementation
The Android implementation of this code would look like underneath.
using Android.Speech.Tts;
using Xamarin.Forms;
using System.Collections.Generic;
using DependencyServiceSample.Droid;
public class TextToSpeechImplementation : Java.Lang.Object, ITextToSpeech, TextToSpeech.IOnInitListener
{
TextToSpeech speaker;
string toSpeak;
public TextToSpeechImplementation () {}
public void Speak (string text)
{
var ctx = Forms.Context; // useful for many Android SDK features
toSpeak = text;
if (speaker == null) {
speaker = new TextToSpeech (ctx, this);
} else {
var p = new Dictionary ();
speaker.Speak (toSpeak, QueueMode.Flush, p);
}
}
#region IOnInitListener implementation
public void OnInit (OperationResult status)
{
if (status.Equals (OperationResult.Success)) {
GoalKicker.com β Xamarin.Forms Notes for Professionals 51
var p = new Dictionary ();
speaker.Speak (toSpeak, QueueMode.Flush, p);
}
}
#endregion
}
Again don't forget to register it with the DependencyService.
using Android.Speech.Tts;
using Xamarin.Forms;
using System.Collections.Generic;
using DependencyServiceSample.Droid;
[assembly: Xamarin.Forms.Dependency (typeof (TextToSpeechImplementation))] namespace DependencyServiceSample.Droid{
//... Rest of code
Windows Phone Implementation
Finally, for Windows Phone this code can be used.
public class TextToSpeechImplementation : ITextToSpeech
{
public TextToSpeechImplementation() {}
public async void Speak(string text)
{
MediaElement mediaElement = new MediaElement();
var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer(); SpeechSynthesisStream stream = await synth.SynthesizeTextToStreamAsync("Hello World");
mediaElement.SetSource(stream, stream.ContentType);
mediaElement.Play();
await synth.SynthesizeTextToStreamAsync(text);
}
}
And once more do not forget to register it.
using Windows.Media.SpeechSynthesis;
using Windows.UI.Xaml.Controls;
using DependencyServiceSample.WinPhone;//enables registration outside of namespace
[assembly: Xamarin.Forms.Dependency (typeof (TextToSpeechImplementation))] namespace DependencyServiceSample.WinPhone{
//... Rest of code
Implementing in Shared Code
Now everything is in place to make it work! Finally, in your shared code you can now call this function by using the interface. At runtime, the implementation will be injected which corresponds to the current platform it is running on.
In this code you will see a page that could be in a Xamarin Forms project. It creates a button which invokes the Speak() method by using the DependencyService.
GoalKicker.com β Xamarin.Forms Notes for Professionals 52
public MainPage ()
{
var speak = new Button {
Text = "Hello, Forms !",
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand,
};
speak.Clicked += (sender, e) => {
DependencyService.Get().Speak("Hello from Xamarin Forms"); };
Content = speak;
}
The result will be that when the app is ran and the button is clicked, the text provided will be spoken.
All of this without having to do hard stuff like compiler hints and such. You now have one uniform way of accessing platform specific functionality through platform independent code.
Section 11.2: Getting Application and Device OS Version Numbers - Android & iOS - PCL
The example below will collect the Device's OS version number and the the version of the application (which is defined in each projects' properties) that is entered into Version name on Android and Version on iOS.
First make an interface in your PCL project:
public interface INativeHelper {
///
/// On iOS, gets the CFBundleVersion number and on Android, gets the PackageInfo's VersionName, both of which are specified in their respective project properties. ///
/// string, containing the build number.
string GetAppVersion();
///
/// On iOS, gets the UIDevice.CurrentDevice.SystemVersion number and on Android, gets the Build.VERSION.Release.
///
/// string, containing the OS version number.
string GetOsVersion();
}
Now we implement the interface in the Android and iOS projects.
Android:
[assembly: Dependency(typeof(NativeHelper_Android))]
namespace YourNamespace.Droid{
public class NativeHelper_Android : INativeHelper {
///
/// See interface summary.
///
public string GetAppVersion() {
Context context = Forms.Context;
return context.PackageManager.GetPackageInfo(context.PackageName, 0).VersionName; }
GoalKicker.com β Xamarin.Forms Notes for Professionals 53
///
/// See interface summary.
///
public string GetOsVersion() { return Build.VERSION.Release; }
}
}
iOS:
[assembly: Dependency(typeof(NativeHelper_iOS))]
namespace YourNamespace.iOS {
public class NativeHelper_iOS : INativeHelper {
///
/// See interface summary.
///
public string GetAppVersion() { return Foundation.NSBundle.MainBundle.InfoDictionary[new Foundation.NSString("CFBundleVersion")].ToString(); }
///
/// See interface summary.
///
public string GetOsVersion() { return UIDevice.CurrentDevice.SystemVersion; } }
}
Now to use the code in a method:
public string GetOsAndAppVersion {
INativeHelper helper = DependencyService.Get();
if(helper != null) {
string osVersion = helper.GetOsVersion();
string appVersion = helper.GetBuildNumber()
}
}
GoalKicker.com β Xamarin.Forms Notes for Professionals 54
Chapter 12: DependencyService
Section 12.1: Android implementation
The Android specific implementation is a bit more complex because it forces you to inherit from a native Java.Lang.Object and forces you to implement the IOnInitListener interface. Android requires you to provide a valid Android context for a lot of the SDK methods it exposes. Xamarin.Forms exposes a Forms.Context object that provides you with a Android context that you can use in such cases.
using Android.Speech.Tts;
using Xamarin.Forms;
using System.Collections.Generic;
using DependencyServiceSample.Droid;
public class TextToSpeechAndroid : Java.Lang.Object, ITextToSpeech, TextToSpeech.IOnInitListener {
TextToSpeech _speaker;
public TextToSpeechAndroid () {}
public void Speak (string whatToSay)
{
var ctx = Forms.Context;
if (_speaker == null)
{
_speaker = new TextToSpeech (ctx, this);
}
else
{
var p = new Dictionary ();
_speaker.Speak (whatToSay, QueueMode.Flush, p);
}
}
#region IOnInitListener implementation
public void OnInit (OperationResult status)
{
if (status.Equals (OperationResult.Success))
{
var p = new Dictionary ();
_speaker.Speak (toSpeak, QueueMode.Flush, p);
}
}
#endregion
}
When you've created your class you need to enable the DependencyService to discover it at run time. This is done by adding an [assembly] attribute above the class definition and outside of any namespace definitions.
using Android.Speech.Tts;
using Xamarin.Forms;
using System.Collections.Generic;
using DependencyServiceSample.Droid;
GoalKicker.com β Xamarin.Forms Notes for Professionals 55
[assembly: Xamarin.Forms.Dependency (typeof (TextToSpeechAndroid))]
namespace DependencyServiceSample.Droid {
...
This attribute registers the class with the DependencyService so it can be used when an instance of the ITextToSpeech interface is needed.
Section 12.2: Interface
The interface defines the behaviour that you want to expose through the DependencyService. One example usage of a DependencyService is a Text-To-Speech service. There is currently no abstraction for this feature in Xamarin.Forms, so you need to create your own. Start off by defining an interface for the behaviour:
public interface ITextToSpeech
{
void Speak (string whatToSay);
}
Because we define our interface we can code against it from our shared code.
Note: Classes that implement the interface need to have a parameterless constructor to work with the DependencyService.
Section 12.3: iOS implementation
The interface you defined needs to be implemented in every targeted platform. For iOS this is done through the AVFoundation framework. The following implementation of the ITextToSpeech interface handles speaking a given text in English.
using AVFoundation;
public class TextToSpeechiOS : ITextToSpeech
{
public TextToSpeechiOS () {}
public void Speak (string whatToSay)
{
var speechSynthesizer = new AVSpeechSynthesizer ();
var speechUtterance = new AVSpeechUtterance (whatToSay) {
Rate = AVSpeechUtterance.MaximumSpeechRate/4,
Voice = AVSpeechSynthesisVoice.FromLanguage ("en-US"),
Volume = 0.5f,
PitchMultiplier = 1.0f
};
speechSynthesizer.SpeakUtterance (speechUtterance);
}
}
When you've created your class you need to enable the DependencyService to discover it at run time. This is done by adding an [assembly] attribute above the class definition and outside of any namespace definitions.
using AVFoundation;
using DependencyServiceSample.iOS;
[assembly: Xamarin.Forms.Dependency (typeof (TextToSpeechiOS))]
GoalKicker.com β Xamarin.Forms Notes for Professionals 56
namespace DependencyServiceSample.iOS {
public class TextToSpeechiOS : ITextToSpeech
...
This attribute registers the class with the DependencyService so it can be used when an instance of the ITextToSpeech interface is needed.
Section 12.4: Shared code
After you've created and registered your platform-specific classes you can start hooking them up to your shared code. The following page contains a button that triggers the text-to-speech functionality using a pre-defined sentence. It uses DependencyService to retrieve a platform-specific implementation of ITextToSpeech at run time using the native SDKs.
public MainPage ()
{
var speakButton = new Button {
Text = "Talk to me baby!",
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand,
};
speakButton.Clicked += (sender, e) => {
DependencyService.Get().Speak("Xamarin Forms likes eating cake by the ocean.");
};
Content = speakButton;
}
When you run this application on an iOS or Android device and tap the button you will hear the application speak the given sentence.
GoalKicker.com β Xamarin.Forms Notes for Professionals 57
Chapter 13: Custom Renderers
Section 13.1: Accessing renderer from a native project
var renderer = Platform.GetRenderer(visualElement);
if (renderer == null)
{
renderer = Platform.CreateRenderer(visualElement);
Platform.SetRenderer(visualElement, renderer);
}
DoSomeThingWithRender(render); // now you can do whatever you want with render
Section 13.2: Rounded label with a custom renderer for Frame (PCL & iOS parts)
First step : PCL part
using Xamarin.Forms;
namespace ProjectNamespace
{
public class ExtendedFrame : Frame
{
///
/// The corner radius property.
///
public static readonly BindableProperty CornerRadiusProperty =
BindableProperty.Create("CornerRadius", typeof(double), typeof(ExtendedFrame), 0.0);
///
/// Gets or sets the corner radius.
///
public double CornerRadius
{
get { return (double)GetValue(CornerRadiusProperty); }
set { SetValue(CornerRadiusProperty, value); }
}
}
}
Second step : iOS part
using ProjectNamespace;
using ProjectNamespace.iOS;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
[assembly: ExportRenderer(typeof(ExtendedFrame), typeof(ExtendedFrameRenderer))] namespace ProjectNamespace.iOS
{
public class ExtendedFrameRenderer : FrameRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs e) {
base.OnElementChanged(e);
GoalKicker.com β Xamarin.Forms Notes for Professionals 58
if (Element != null)
{
Layer.MasksToBounds = true;
Layer.CornerRadius = (float)(Element as ExtendedFrame).CornerRadius; }
}
protected override void OnElementPropertyChanged(object sender,
System.ComponentModel.PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
if (e.PropertyName == ExtendedFrame.CornerRadiusProperty.PropertyName) {
Layer.CornerRadius = (float)(Element as ExtendedFrame).CornerRadius; }
}
}
}
Third step : XAML code to call an ExtendedFrame
If you want to use it in a XAML part, don't forget to write this :
xmlns:controls="clr-namespace:ProjectNamespace;assembly:ProjectNamespace"
after
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
Now, you can use the ExtendedFrame like this :
Section 13.3: Custom renderer for ListView
Custom Renderers let developers customize the appearance and behavior of Xamarin.Forms controls on each platform. Developers could use features of native controls.
For example, we need to disable scroll in ListView. On iOS ListView is scrollable even if all items are placed on the screen and user shouldn't be able to scroll the list. Xamarin.Forms.ListView doesn't manage such setting. In this case, a renderer is coming to help.
Firstly, we should create custom control in PCL project, which will declare some required bindable property:
public class SuperListView : ListView
{
GoalKicker.com β Xamarin.Forms Notes for Professionals 59
public static readonly BindableProperty IsScrollingEnableProperty =
BindableProperty.Create(nameof(IsScrollingEnable),
typeof(bool),
typeof(SuperListView),
true);
public bool IsScrollingEnable
{
get { return (bool)GetValue(IsScrollingEnableProperty); }
set { SetValue(IsScrollingEnableProperty, value); }
}
}
Next step will be creating a renderer for each platform.
iOS:
[assembly: ExportRenderer(typeof(SuperListView), typeof(SuperListViewRenderer))] namespace SuperForms.iOS.Renderers
{
public class SuperListViewRenderer : ListViewRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs e) {
base.OnElementChanged(e);
var superListView = Element as SuperListView;
if (superListView == null)
return;
Control.ScrollEnabled = superListView.IsScrollingEnable;
}
}
}
And Android(Android's list doesn't have scroll if all items are placed on the screen, so we will not disable scrolling, but still we are able to use native properties):
[assembly: ExportRenderer(typeof(SuperListView), typeof(SuperListViewRenderer))] namespace SuperForms.Droid.Renderers
{
public class SuperListViewRenderer : ListViewRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs e) {
base.OnElementChanged(e);
var superListView = Element as SuperListView;
if (superListView == null)
return;
}
}
}
Element property of renderer is my SuperListView control from PCL project.
Control property of renderer is native control. Android.Widget.ListView for Android and UIKit.UITableView for iOS.
GoalKicker.com β Xamarin.Forms Notes for Professionals 60
And how we will use it in XAML:
.cs file of page:
public partial class SuperListViewPage : ContentPage
{
private ObservableCollection _items;
public ObservableCollection Items
{
get { return _items; }
set
{
_items = value;
OnPropertyChanged();
}
}
public SuperListViewPage()
{
var list = new SuperListView();
InitializeComponent();
var items = new List(10);
for (int i = 1; i <= 10; i++)
{
items.Add($"Item {i}");
}
Items = new ObservableCollection(items);
}
}
Section 13.4: Custom Renderer for BoxView
Custom Renderer help to allows to add new properties and render them differently in native platform that can not be otherwise does through shared code. In this example we will add radius and shadow to a boxview.
Firstly, we should create custom control in PCL project, which will declare some required bindable property:
GoalKicker.com β Xamarin.Forms Notes for Professionals 61
namespace Mobile.Controls
{
public class ExtendedBoxView : BoxView
{
///
/// Respresents the background color of the button.
///
public static readonly BindableProperty BorderRadiusProperty =
BindableProperty.Create(p => p.BorderRadius, 0);
public double BorderRadius
{
get { return (double)GetValue(BorderRadiusProperty); }
set { SetValue(BorderRadiusProperty, value); }
}
public static readonly BindableProperty StrokeProperty =
BindableProperty.Create(p => p.Stroke, Color.Transparent);
public Color Stroke
{
get { return (Color)GetValue(StrokeProperty); }
set { SetValue(StrokeProperty, value); }
}
public static readonly BindableProperty StrokeThicknessProperty = BindableProperty.Create(p => p.StrokeThickness, 0);
public double StrokeThickness
{
get { return (double)GetValue(StrokeThicknessProperty); }
set { SetValue(StrokeThicknessProperty, value); }
}
}
}
Next step will be creating a renderer for each platform.
iOS:
[assembly: ExportRenderer(typeof(ExtendedBoxView), typeof(ExtendedBoxViewRenderer))] namespace Mobile.iOS.Renderers
{
public class ExtendedBoxViewRenderer : VisualElementRenderer
{
public ExtendedBoxViewRenderer()
{
}
protected override void OnElementChanged(ElementChangedEventArgs e) {
base.OnElementChanged(e);
if (Element == null)
return;
Layer.MasksToBounds = true;
Layer.CornerRadius = (float)((ExtendedBoxView)this.Element).BorderRadius / 2.0f; }
protected override void OnElementPropertyChanged(object sender,
GoalKicker.com β Xamarin.Forms Notes for Professionals 62
System.ComponentModel.PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
if (e.PropertyName == ExtendedBoxView.BorderRadiusProperty.PropertyName) {
SetNeedsDisplay();
}
}
public override void Draw(CGRect rect)
{
ExtendedBoxView roundedBoxView = (ExtendedBoxView)this.Element; using (var context = UIGraphics.GetCurrentContext())
{
context.SetFillColor(roundedBoxView.Color.ToCGColor()); context.SetStrokeColor(roundedBoxView.Stroke.ToCGColor()); context.SetLineWidth((float)roundedBoxView.StrokeThickness);
var rCorner = this.Bounds.Inset((int)roundedBoxView.StrokeThickness / 2, (int)roundedBoxView.StrokeThickness / 2);
nfloat radius = (nfloat)roundedBoxView.BorderRadius;
radius = (nfloat)Math.Max(0, Math.Min(radius, Math.Max(rCorner.Height / 2, rCorner.Width / 2)));
var path = CGPath.FromRoundedRect(rCorner, radius, radius); context.AddPath(path);
context.DrawPath(CGPathDrawingMode.FillStroke);
}
}
}
}
Again you can customize however you want inside the draw method.
And same for Android:
[assembly: ExportRenderer(typeof(ExtendedBoxView), typeof(ExtendedBoxViewRenderer))] namespace Mobile.Droid
{
///
///
///
public class ExtendedBoxViewRenderer : VisualElementRenderer {
///
///
///
public ExtendedBoxViewRenderer()
{
}
///
///
///
///
protected override void OnElementChanged(ElementChangedEventArgs e) {
base.OnElementChanged(e);
GoalKicker.com β Xamarin.Forms Notes for Professionals 63
SetWillNotDraw(false);
Invalidate();
}
///
///
///
///
///
protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
if (e.PropertyName == ExtendedBoxView.BorderRadiusProperty.PropertyName) {
Invalidate();
}
}
///
///
///
///
public override void Draw(Canvas canvas)
{
var box = Element as ExtendedBoxView;
base.Draw(canvas);
Paint myPaint = new Paint();
myPaint.SetStyle(Paint.Style.Stroke);
myPaint.StrokeWidth = (float)box.StrokeThickness;
myPaint.SetARGB(convertTo255ScaleColor(box.Color.A),
convertTo255ScaleColor(box.Color.R), convertTo255ScaleColor(box.Color.G), convertTo255ScaleColor(box.Color.B));
myPaint.SetShadowLayer(20, 0, 5, Android.Graphics.Color.Argb(100, 0, 0, 0)); SetLayerType(Android.Views.LayerType.Software, myPaint);
var number = (float)box.StrokeThickness / 2;
RectF rectF = new RectF(
number, // left
number, // top
canvas.Width - number, // right
canvas.Height - number // bottom
);
var radius = (float)box.BorderRadius;
canvas.DrawRoundRect(rectF, radius, radius, myPaint);
}
///
///
///
///
///
private int convertTo255ScaleColor(double color)
{
return (int) Math.Ceiling(color * 255);
}
GoalKicker.com β Xamarin.Forms Notes for Professionals 64
}
}
The XAML:
We first reference to our control with the namespace we defined earlier.
xmlns:Controls="clr-namespace:Mobile.Controls"
We then use the Control as follows and use properties defined at the beginning:
Section 13.5: Rounded BoxView with selectable background color
First step : PCL part
public class RoundedBoxView : BoxView
{
public static readonly BindableProperty CornerRadiusProperty =
BindableProperty.Create("CornerRadius", typeof(double), typeof(RoundedEntry), default(double));
public double CornerRadius
{
get
{
return (double)GetValue(CornerRadiusProperty);
}
set
{
SetValue(CornerRadiusProperty, value);
}
}
public static readonly BindableProperty FillColorProperty =
BindableProperty.Create("FillColor", typeof(string), typeof(RoundedEntry), default(string));
public string FillColor
{
get
{
return (string) GetValue(FillColorProperty);
}
set
{
SetValue(FillColorProperty, value);
}
}
}
GoalKicker.com β Xamarin.Forms Notes for Professionals 65
Second step : Droid part
[assembly: ExportRenderer(typeof(RoundedBoxView), typeof(RoundedBoxViewRenderer))] namespace MyNamespace.Droid
{
public class RoundedBoxViewRenderer : VisualElementRenderer {
protected override void OnElementChanged(ElementChangedEventArgs e) {
base.OnElementChanged(e);
SetWillNotDraw(false);
Invalidate();
}
protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
SetWillNotDraw(false);
Invalidate();
}
public override void Draw(Canvas canvas)
{
var box = Element as RoundedBoxView;
var rect = new Rect();
var paint = new Paint
{
Color = Xamarin.Forms.Color.FromHex(box.FillColor).ToAndroid(), AntiAlias = true,
};
GetDrawingRect(rect);
var radius = (float)(rect.Width() / box.Width * box.CornerRadius);
canvas.DrawRoundRect(new RectF(rect), radius, radius, paint); }
}
}
Third step : iOS part
[assembly: ExportRenderer(typeof(RoundedBoxView), typeof(RoundedBoxViewRenderer))] namespace MyNamespace.iOS
{
public class RoundedBoxViewRenderer : BoxRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs e) {
base.OnElementChanged(e);
if (Element != null)
{
Layer.CornerRadius = (float)(Element as RoundedBoxView).CornerRadius; Layer.BackgroundColor = Color.FromHex((Element as RoundedBoxView).FillColor).ToCGColor();
}
}
protected override void OnElementPropertyChanged(object sender,
GoalKicker.com β Xamarin.Forms Notes for Professionals 66
System.ComponentModel.PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
if (Element != null)
{
Layer.CornerRadius = (float)(Element as RoundedBoxView).CornerRadius; Layer.BackgroundColor = (Element as RoundedBoxView).FillColor.ToCGColor(); }
}
}
}
GoalKicker.com β Xamarin.Forms Notes for Professionals 67
Chapter 14: Caching
Section 14.1: Caching using Akavache
About Akavache
Akavache is an incredibly useful library providing reach functionality of caching your data. Akavache provides a key value storage interface and works on the top of SQLite3. You do not need to keep your schema synced as it's actually No-SQL solution which makes it perfect for most of the mobile applications especially if you need your app to be updated often without data loss.
Recommendations for Xamarin
Akavache is definetly the best caching library for Xamarin application if only you do not need to operate with strongly relative data, binary or really big amounts of data. Use Akavache in the following cases:
You need your app to cache the data for a given period of time (you can configure expiration timeout for each entity being saved;
You want your app to work offline;
It's hard to determine and freeze the schema of your data. For example, you have lists containing different typed objects;
It's enough for you to have simple key-value access to the data and you do not need to make complex queries.
Akavache is not a "silver bullet" for data storage so think twice about using it in the following cases:
Your data entities have many relations between each other;
You don't really need your app to work offline;
You have huge amount of data to be saved locally;
You need to migrate your data from version to version;
You need to perform complex queries typical for SQL like grouping, projections etc.
Actually you can manually migrate your data just by reading and writing it back with updated fields.
Simple example
Interacting with Akavache is primarily done through an object called BlobCache.
Most of the Akavache's methods returns reactive observables, but you also can just await them thanks to extension methods.
using System.Reactive.Linq; // IMPORTANT - this makes await work!
// Make sure you set the application name before doing any inserts or gets
BlobCache.ApplicationName = "AkavacheExperiment";
var myToaster = new Toaster();
await BlobCache.UserAccount.InsertObject("toaster", myToaster);
//
// ...later, in another part of town...
//
GoalKicker.com β Xamarin.Forms Notes for Professionals 68
// Using async/await
var toaster = await BlobCache.UserAccount.GetObject("toaster");
// or without async/await
Toaster toaster;
BlobCache.UserAccount.GetObject("toaster")
.Subscribe(x => toaster = x, ex => Console.WriteLine("No Key!")); Error handling
Toaster toaster;
try {
toaster = await BlobCache.UserAccount.GetObjectAsync("toaster"); } catch (KeyNotFoundException ex) {
toaster = new Toaster();
}
// Or without async/await:
toaster = await BlobCache.UserAccount.GetObjectAsync("toaster") .Catch(Observable.Return(new Toaster()));
GoalKicker.com β Xamarin.Forms Notes for Professionals 69
Chapter 15: Gestures
Section 15.1: Make an Image tappable by adding a TapGestureRecognizer
There are a couple of default recognizers available in Xamarin.Forms, one of them is the TapGestureRecognizer.
You can add them to virtually any visual element. Have a look at a simple implementation which binds to an Image. Here is how to do it in code.
var tappedCommand = new Command(() =>
{
//handle the tap
});
var tapGestureRecognizer = new TapGestureRecognizer { Command = tappedCommand }; image.GestureRecognizers.Add(tapGestureRecognizer);
Or in XAML:
Here the command is set by using data binding. As you can see you can also set the NumberOfTapsRequired to enable it for more taps before it takes action. The default value is 1 tap.
Other gestures are Pinch and Pan.
Section 15.2: Gesture Event
When we put the control of Label, the Label does not provide any event. as shown the Label only display purpose only.
When the user want to replace Button with Label, then we give the event for Label. As shown below: XAML