BenkoTIPS

Some Common Xamarin.Forms XAML Control Properties

@MikeBenkovich 12/28/2014 BenkoTIPS

Xamarin.Forms is an attractive option when building cross platform apps, but for an old XAML developer like myself it can be a challenge to get the nuances of the grammar and syntax right. For Windows I’ve depended on tools like Blend and Visual Studio Intellisense to help me understand what’s possible. Moving to Xamarin XAML is sometimes tedious because while I can use the intellisense from the C# code behind file it’s not there yet in a designer. While there’s some posts out there that compare and contrast how to move to Xamarin XAML from Microsoft XAML (like this one from TCPWare by Nicolò Carandini), I still wasn’t finding what I was looking for. This post is an attempt to iterate thru some of the core proprties of interest for many of the controls I use, and to catalog them here for current and future reference.

1/3/2015 : Update, added more controls to list -

Technorati Tags: xamarin xaml cheat sheet

First some common properties – Some common properties to most controls include:

x:Name : The control name that can be used to reference the control from code
AnchorX, AnchorY : Positions control within the layout
HeightRequest, WidthRequest : The requested size of the control if the layout allows
MinimumHeightRequest, MinimumWidthRequest : The minimum size allowed
HorizontalOptions, VerticalOptions : Layout options for the control, include values Start, End, Fill, Center, StartAndExpand, EndAndExpand, CenterAndExpand
BackgroundColor : Color of background
Rotation, RotationX, RotationY : Rotation properties for rendering control
Scale : Scale value

Label - Displays text on a page.

XAlign, YAlign : Text alignment property…values include TextAlignment.Start, TextAlignment.Center, TextAlignment.End
TextColor : Color of text and background…can be named color
Font : Attributes of the font, such as Bold, Italic, Large, Medium, Small, Micro,
LineBreakMode : Used to determine label’s text wrap properties. Values include CharacterWrap, NoWrap, WordWrap, HeadTruncation, MiddleTruncation, TailTruncation

TextCell - Displays text and detail subtext in a single control

Text : The main text to display
TextColor : Primary color of the text
Detail : Subtext displayed below main text
DetailColor : Color of secondary text

BoxView - Similar to Rectangle in Windows XAML. Used to display a box with some color on a page.

Color : Color of box
Opacity : Value of opacity…
IsEnabled, IsFocused : properties of Box

Entry - Similar to TextBox in Windows XAML. Used to get input from user.

TextColor : Color of text and background…can be named color
IsEnabled, IsFocused, IsPassword, IsVisible : Values that drive entry behaviors
InputTransparent : Determines whether to show input
Keyboard : Type of keyboard to show, possible values include Chat, Default, Email, Numeric, Telephone, Text, Url
Placeholder : Text to display when there is no value entered…displayed in grayed out mode
Text : Value of control

Image - Display an image. Includes common properties and:

Aspect : Scaling of image…stretch or fill. Values include Fill, AspectFill, AspectFit
IsEnabled, IsFocused, IsLoading, IsOpaque, IsVisible : Drive behaviors of image control
Source: This is where the image is sourced from…can be local resource or online.

ImageCell Displays an image and a TextCell

ImageSource
Text, TextColor
Detail, DetailColor
IsEnabled

Button - Used to trigger event processing in response to user’s actions

BorderColor, BorderRadius, BorderWidth : Values to control the border of the button
Command, CommandParameter : Values for the command to be executed when clicked
Font : Attributes of the font
IsEnabled, IsFocused, IsVisible : Values to drive button’s behaviors
Text : Text on the button
TextColor : Color of text on the button

ActivityIndicator. An indicator that shows there is an action processing and the user needs to wait for it to complete

Color : Color of the indicator
IsEnabled, IsFocused, IsRunning IsVisible : Values to drive activity indicator’s behaviors

ProgressBar. Used to display how far along a process is

IsEnabled, IsFocused, IsVisible : Values to drive the control’s behaviors
Progress : Value to show completion…I think this is a value from 0.0 to 1.0

TimePicker. Used to select a time value

Time : The time value of the control
Format : Format to display, supports standard C# formats for DateTime (see http://www.csharp-examples.net/string-format-datetime/)

DatePicker. Similar to TimePicker, but used to select a date

Date : The date value of the control
Format : Format to display, using standard C# formats

Switch. Used to input whether a boolean property is true or false

IsToggled, IsEnabled, IsVisible, IsFocused : Drive control’s behaviors

SwitchCell. Displays a label and a switch

Text : The text of the label
On : A boolean value of whether the switch is toggled
Height : The height of the control

ViewCell. A basic layout control that displays an item in a data template. Does not have the basic properties.

Height : Height of cell to display

StackLayout. Similar to a StackPanel in Windows XAML, used to display items in a stack. Has the common properties as well

Padding : The area around the layout, displayed as an integer or series of values “left, top, right, bottom”… i.e. “20,0,0,0” means left margin of 20, zero on other sides
Spacing : The area between items
Orientation : Horizontal vs Vertical

Grid. Layout in Columns and Rows, using various spacing options, such as fixed, Auto and Star – *

RowDefinitions, ColumnDefinitions : Same as Windows XAML
RowSpacing, ColumnSpacing : distance between columns and rows, defaults to 6 px

ListView. Container for collections of items…

ItemsSource : The data collection used to populate the list
SelectedItem : If an item is selected in the list
IsEnabled, IsGroupingEnabled, IsVisible : Drives list’s behaviors
RowHeight : Height of item’s row
HasUnevenRows : A flag that indicates row height varies
Triggers : connects an item to a behavior
ItemTemplate : Binding template for item’s display
GroupHeaderTemplate : Binding template for list’s header