Xamarin Forms Controls

Page 1

Xamarin forms controls iFour Consultancy

https://www.ifourtechnolab.com/xamarin-mobile-app-development


List of controls ❏ ❏ ❏ ❏ ❏ ❏ ❏ ❏ ❏ ❏ ❏ ❏

Label Entry Editor Button Image Picker Date Picker Time Picker Stepper Slider Box View List View

❏ Map View ❏ Web View ❏ Image Button

https://www.ifourtechnolab.com/xamarin-mobile-app-development


❑Label ❏ The label view is used for displaying text, both single and multi-line. Labels can have text decorations, colored text, and use custom fonts (families, sizes, and options).

Example <Label Text=“This is Label” TextDecorations=“Underline, Strikethrough”></Label>

https://www.ifourtechnolab.com/xamarin-mobile-app-development


❑Entry ❏ The Xamarin.Forms Entry is used for single-line input. The Entry, like the Editor view, supports multiple keyboard types. Additionally, the Entry can be used as a password field.

Example <Entry Text="I am an Entry“ Keyboard=“Email” />

https://www.ifourtechnolab.com/xamarin-mobile-app-development


❑Editor ❏ The Xamarin.Forms Editor control is used to accept multi-line input.

Example <Editor Text="I am an Entry“ />

https://www.ifourtechnolab.com/xamarin-mobile-app-development


â?‘Button â?? The Button is the most fundamental interactive control in all Xamarin.Forms. The Button usually displays a short text string indicating a command, but it can also display a bitmap image, or combination of text and an image.

Example <Button Text="Click to Rotate Text!" VerticalOptions="CenterAndExpand" HorizontalOptions="Center" Clicked="OnButtonClicked" />

https://www.ifourtechnolab.com/xamarin-mobile-app-development


❑Image ❏ Xamarin.Forms uses the Image view to display images on page. It has two important properties: Source and Aspect.

Example <Image Source=“name” Aspect=“AspectFill” />

https://www.ifourtechnolab.com/xamarin-mobile-app-development


❑Picker ❏ The Picker view is a control for selecting a text item from a list of data.

Example <Picker ItemSource=“{Binding …}” ItemSelected=“MethodName” />

https://www.ifourtechnolab.com/xamarin-mobile-app-development


❑Date picker ❏ A Xamarin.Forms view that allows the user to select a date.

Example <DatePicker Date=“{x:static sys:DateTime.Now}” />

https://www.ifourtechnolab.com/xamarin-mobile-app-development


❑Time picker ❏ A Xamarin.Forms view that allows the user to select a time.

Example <TimePicker Time="4:15:26“ />

https://www.ifourtechnolab.com/xamarin-mobile-app-development


â?‘Stepper â?? The Xamarin.Forms Stepper consists of two labeled with minus and plus signs. These buttons can be manipulated by the user to incrementally select a double value from range of values.

Example <Stepper Maximum="360" Increment="30" HorizontalOptions="Center" ValueChanged="OnStepperValueChanged" />

https://www.ifourtechnolab.com/xamarin-mobile-app-development


â?‘Slider â?? The Xamarin.Forms slider is horizontal bar that can be manipulated by the user to select a double value from a continuous range.

Example <Slider Maximum="360" ValueChanged="OnSliderValueChanged" />

https://www.ifourtechnolab.com/xamarin-mobile-app-development


❑BoxView ❏ BoxView renders a simple rectangle of a specified width, height and color. You can use BoxView for decoration, rudimentary graphics, and interaction with the user through touch.

Example <BoxView Color="CornflowerBlue" CornerRadius="10" WidthRequest="160" HeightRequest="160" VerticalOptions="Center" HorizontalOptions="Center" />

https://www.ifourtechnolab.com/xamarin-mobile-app-development


â?‘ListView â?? Listview is a view presenting list of data, especially long list that require scrolling.

Example <ListView> <ListView.ItemsSource> <x:Array Type="{x:Type x:String}"> <x:String>mono</x:String> <x:String>monodroid</x:String> <x:String>monotouch</x:String> <x:String>monorail</x:String> <x:String>monodevelop</x:String> <x:String>monotone</x:String> <x:String>monopoly</x:String> <x:String>monomodal</x:String> <x:String>mononucleosis</x:String> </x:Array> </ListView.ItemsSource> </ListView> https://www.ifourtechnolab.com/xamarin-mobile-app-development


❑WebView ❏ WebView is a view for displaying web and HTML content in your app. Unlike OpenUri, which takes the user to the web browser on the device, WebView displays the HTML content inside your app.

Example <WebView x:Name="webView" WidthRequest="1000" HeightRequest="1000" Source=“ https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface /webview?tabs=windows ” />

https://www.ifourtechnolab.com/xamarin-mobile-app-development


â?‘ImageButton â?? The ImageButton displays an image and responds to a tap or click that directs an application to carry out particular task.

Example <ImageButton Source="XamarinLogo.png" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />

https://www.ifourtechnolab.com/xamarin-mobile-app-development


â?‘Maps â?? Xamarin.Forms.Maps uses the native map APIs on each platform. This provides a fast, familiar maps experience for users, but means that some configuration steps are needed to adhere to each platforms API requirements. Once configured, the Map control works just like any other Xamarin.Forms element in common code.

https://www.ifourtechnolab.com/xamarin-mobile-app-development


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.