Implement View in Xamarin form


Isn't it fun,

to instantly listen to a blog on the go? PLAY !

 
 

Implement_Viewin_Xamarin_form

The building block of a cross-platform mobile application is Xamarin Forms views. Views are user-interface objects like labels, buttons, and sliders that are normally called controls or widgets in alternative graphical programming environments. The views supported by Xamarin.Forms all derive from the read category.

Table of Content

Label

The label displays single-line text strings or multi-line blocks of text, either with the constant or variable data format. Set the Text property to a string for constant data format, or set the FormattedText property to a FormattedString object for variable data format.

Below code is used to create label.


<StackLayout Padding="5,10">
        <Label Text="Label Page"></Label>
        <Label LineBreakMode="WordWrap">
            <Label.FormattedText>
                <FormattedString>
                    <Span Text="Blue Bold," TextColor="Blue" FontAttributes="Bold" />
                    <Span Text="default," Style="{DynamicResource BodyStyle}">
                        <Span.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding TapCommand}" />
                        </Span.GestureRecognizers>
                    </Span>
                    <Span Text="italic small." FontAttributes="Italic" FontSize="Small" />
                </FormattedString>
            </Label.FormattedText>
        </Label>
    </StackLayout>


label_view

Image : Label view

Entry

Entry permits the user to enter and edit one line of text. The text is offered because the Text property, and also the TextChanged and Completed events are fired when the text changes or the user signals completion by sound the enter key.

Below code is used to create Entry.


<StackLayout Padding="5,10">
        <Label Text="Enter Your Name"></Label>
        <Entry Placeholder="UserName" TextColor="Black" BackgroundColor="LightGreen"></Entry>
    </StackLayout>


Entry_view

Image- Entry view

Editor

Editor permits the user to enter and edit multiple lines of text. The text is accessible because of the Text property, and therefore the TextChanged and Completed events area unit is dismissed once the text changes or the user signals completion.

Below code is used to create Editor.


<ContentPage.Content>
        <StackLayout Padding="5,10">
            <Label Text="This is Editor"></Label>
            <Editor Placeholder="Enter text here" PlaceholderColor="Olive" />
        </StackLayout>
    </ContentPage.Content>



Image-Editor

Image-Editor

BoxView

BoxView could be a straightforward rectangle of specified height, width, and colour. We can use BoxView for interaction, rudimentary graphics, and decoration with the user through touch.

Below code is used to create BoxView.



<StackLayout>
        <Label Text="BoxView"  
               FontSize="50"  
               FontAttributes="Bold"  
               HorizontalOptions="Center" />

        <BoxView Color="Red"  
                 WidthRequest="150"  
                 HeightRequest="150"  
                 HorizontalOptions="Center"  
                 VerticalOptions="CenterAndExpand" />
    </StackLayout>




Image-BoxView

Image-BoxView


WebView

WebView may be a read for displaying the online and HTML content on our app. WebView displays the HTML content within our app. WebView will show HTML strings from memory. WebView will sort of content within the app. WebView will sort of content within the app.

Below code is used to create WebView.


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


Image–WebView

Image–WebView

Button

When we click on a button, it responds and can perform a specific task in associate degree application. In all the Xamarin.Forms, button plays a very important role. The button displays the short text string once it follows the command. Button may show image icon or a mix of text and image. Press the button with the finger or mouse to start the command user.

ImageButton

The ImageButton read combines the Button read and Image read to make a button whose content is a picture. The user presses the ImageButton with a finger or clicks it with a mouse to direct the applying to hold out a selected task. However, not like the Button read, the ImageButton read has no idea of text and text look.

Below code is used to create Button.

Code behind file of button:


<StackLayout>
        <Label Text="Button"  
               FontSize="50"  
               FontAttributes="Bold"  
               HorizontalOptions="Center" />
        <Button Text="Click Me!"  
                Font="Large"  
                BorderWidth="1"  
                HorizontalOptions="Center"  
                VerticalOptions="CenterAndExpand"  
                Clicked="Button_Clicked" BackgroundColor="Yellow"/>
        <Label x:Name="label"  
               Text="0 button clicks"  
               FontSize="Large"  
               HorizontalOptions="Center"  
               VerticalOptions="CenterAndExpand" />
    </StackLayout>



public int ClickTotal { get; private set; }
private void Button_Clicked(object sender, EventArgs e)
    {
       ClickTotal += 1;
       label.Text = String.Format("{0} button click{1}", ClickTotal, ClickTotal == 1 ? "": "s");
    }



Image–Button

Image – Button

SearchBar

It is a section of the UI parts of Xamarin.Forms. If we want to search the info from a listing or website or something, we are able to place the search bar to try and do a look from the online or from anyplace else. largely we tend to use a search bar on Google homepage or any program.

Below code is used to create searchbar.


<StackLayout>
        <Label Text="SearchBar"
               FontSize="50"
               FontAttributes="Bold"
               HorizontalOptions="Center" />

        <SearchBar Placeholder="Xamarin.Forms Property"
                   SearchButtonPressed="OnSearchBarButtonPressed" />

        <ScrollView VerticalOptions="FillAndExpand">
            <Label x:Name="resultsLabel" />
        </ScrollView>
    </StackLayout>



Code behind file of SearchBar.


void OnSearchBarButtonPressed(object sender, EventArgs args)
          {
              SearchBar searchBar = (SearchBar)sender;
              string searchText = searchBar.Text;
              var list = new List<Tuple<Type, Type>>();
              resultsLabel.Text = "";
              Assembly xamarinFormsAssembly = typeof(View).GetTypeInfo().Assembly;
              foreach (Type type in xamarinFormsAssembly.ExportedTypes)
              {
                  TypeInfo typeInfo = type.GetTypeInfo();
                  if (typeInfo.IsPublic)
                  {
                      foreach (PropertyInfo property in typeInfo.DeclaredProperties)
                      {
                          if (property.Name.Equals(searchText))
                          {
                              list.Add(Tuple.Create<Type, Type>(type, property.PropertyType));
                          }
                      }
                  }
              }
if (list.Count == 0)
              {
                  resultsLabel.Text =
                  String.Format("No Xamarin.Forms properties with " +
                                    "the name of {0} were found", searchText);
              }

              else
              {
                  resultsLabel.Text = "The ";

                  foreach (Tuple<Type, Type> tuple in list)
                  {
                      resultsLabel.Text +=
                          String.Format("{0} type defines a property named {1} of type {2}",
                                        tuple.Item1.Name, searchText, tuple.Item2.Name);
                      if (tuple != list.Last())
                      {
                          resultsLabel.Text += "; and the ";
                      }
                  }
                  resultsLabel.Text += ".";
              }
          }



Image-Searchbar

Image - Searchbar

ListView

ListView derives from ItemsView and displays a scrollable list of selectable knowledge things. Set the ItemsSource property to a set of objects, and set the ItemTemplate property to a DataTemplate object describing, however, the things are to be formatted. The ItemSelected event signals that a range has been created, that is accessible because the SelectedItem property.

Below code is used for ListView.


<StackLayout Margin="20,35,20,20">
        <ListView>
            <ListView.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>Baboon</x:String>
                    <x:String>Capuchin Monkey</x:String>
                    <x:String>Blue Monkey</x:String>
                    <x:String>Squirrel Monkey</x:String>
                    <x:String>Golden Lion Tamarin</x:String>
                    <x:String>Howler Monkey</x:String>
                    <x:String>Japanese Macaque</x:String>
                </x:Array>
            </ListView.ItemsSource>
        </ListView>
    </StackLayout>



Image–ListView

Image – ListView

DatePicker

DatePicker permits the user to pick a date with the platform date picker. Set a variety of allowable dates with the MinimumDate and MaximumDate properties. The Date property is that the chosen date, and also the DateSelected event is dismissed once that property changes.


<StackLayout>
        <Label Text="DatePicker"  
               FontSize="50"  
               FontAttributes="Bold"  
               HorizontalOptions="Center" />

        <DatePicker Format="D"  
                    VerticalOptions="CenterAndExpand"  
                    Margin="10, 0" />
    </StackLayout>


Image–DatePicker

Image – DatePicker

TimePicker

TimePicker permits the user to pick a time with the platform time picker. The Time property is that the chosen time. An application will monitor changes within the Time property by putting in a handler for the PropertyChanged event.

Below code is used to create DatePicker and TimePicker.


<ContentPage.Content>
        <StackLayout Padding="10">
            <Label Text="DatePicker And TimePicker" FontSize="20" HorizontalOptions="Center"></Label>
            <DatePicker x:Name="dp" MaximumDate="2021/12/31" MinimumDate="2000/12/31"></DatePicker>
            <TimePicker x:Name="tp"></TimePicker>
            <Button x:Name="button" Clicked="Button_Clicked" Text="Details"></Button>
            <Label x:Name="details"></Label>
        </StackLayout>



Code behind file of DatePicker & TimePicker.



private void Button_Clicked(object sender, EventArgs e)
        {
          var date = dp.Date;
          var time = tp.Time;
          details.Text = string.Format("Date:{0}\n Time:{1}", date, time);
        }



Image–DatePicker&TimePicker />

Image – DatePicker & TimePicker

Ellipse

Ellipse displays associate ellipse or circle of size WidthRequest x HeightRequest. to color the within of the ellipse, set its Fill property to a Color. To present the ellipse an overview, set its Stroke property to a Color.


<StackLayout>
        <Label Text="Ellipse"
               FontSize="50"
               FontAttributes="Bold"
               HorizontalOptions="Center" />
        <Ellipse Fill="green"
                 WidthRequest="150"
                 HeightRequest="50"
                 HorizontalOptions="Center" />
        <Ellipse Stroke="green"
                 StrokeThickness="4"
                 WidthRequest="150"
                 HeightRequest="150"
                 HorizontalOptions="Center" />
    </StackLayout>



Image–Ellipse

Image – Ellipse

RefreshView

RefreshView could be a container control that has pull-to-refresh practicality for scrollable content. The ICommand outlined by the Command property is executed once a refresh is triggered, and also the IsRefreshing property indicates this state of the control.

Below code is used to create RefreshView.


<ContentPage.BindingContext>
        <local1:RefreshViewDemoPageViewModel />
    </ContentPage.BindingContext>
    <ContentPage.Resources>
        <DataTemplate x:Key="ColorItemTemplate">
            <Grid Margin="5"
                  HeightRequest="120"
                  WidthRequest="105">
                <BoxView Color="{Binding Color}" />
                <Label Text="{Binding Name}"
                       HorizontalOptions="Center"
                       VerticalOptions="Center" />
            </Grid>
        </DataTemplate>
    </ContentPage.Resources>
    <StackLayout Margin="10">
        <Label Text="RefreshView"
               FontSize="50"
               FontAttributes="Bold"
               HorizontalOptions="Center" />
        <Label Text="Pull the items down to refresh the ScrollView." />
        <Label Text="{Binding Items.Count, StringFormat='Number of items: {0}'}" />
        <RefreshView IsRefreshing="{Binding IsRefreshing}"
                     RefreshColor="Teal"
                     Command="{Binding RefreshCommand}">
            <ScrollView>
                <FlexLayout Direction="Row"
                            Wrap="Wrap"
                            AlignItems="Center"
                            AlignContent="Center"
                            BindableLayout.ItemsSource="{Binding Items}"
                            BindableLayout.ItemTemplate="{StaticResource ColorItemTemplate}" />
            </ScrollView>
        </RefreshView>
    </StackLayout>





using System.Collections;
using Xamarin.Forms;
namespace FormsGallery.CodeExamples
{
    public class RefreshViewDemoPage : ContentPage
    {
        public RefreshViewDemoPage()
        {
            RefreshViewDemoPageViewModel viewModel = new RefreshViewDemoPageViewModel();
            DataTemplate colorItemTemplate = new DataTemplate(() =>
            {
                Grid grid = new Grid
                {
                    Margin = new Thickness(5),
                    HeightRequest = 120,
                    WidthRequest = 105
                };
                BoxView boxView = new BoxView();
                boxView.SetBinding(BoxView.ColorProperty, "Color");
                Label label = new Label
                {
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions = LayoutOptions.Center
                };
                label.SetBinding(Label.TextProperty, "Name");
                grid.Children.Add(boxView);
                grid.Children.Add(label);
                return grid;
            });
            Label header = new Label
            {
                Text = "RefreshView",
                FontSize = 50,
                FontAttributes = FontAttributes.Bold,
                HorizontalOptions = LayoutOptions.Center
            };
Label pullMessage = new Label
            {
                Text = "Pull the items down to refresh the ScrollView."
            };
            Label numberOfItems = new Label();
            numberOfItems.SetBinding(Label.TextProperty, "Items.Count", stringFormat: "Number of items: {0}");
FlexLayout flexLayout = new FlexLayout
            {
                Direction = FlexDirection.Row,
                Wrap = FlexWrap.Wrap,
                AlignItems = FlexAlignItems.Center,
                AlignContent = FlexAlignContent.Center
            };
            BindableLayout.SetItemsSource(flexLayout, viewModel.Items);
            BindableLayout.SetItemTemplate(flexLayout, colorItemTemplate);
            ScrollView scrollView = new ScrollView
            {
                Content = flexLayout
            };
            RefreshView refreshView = new RefreshView
            {
                Content = scrollView,
                RefreshColor = Color.Teal
            };
            refreshView.SetBinding(RefreshView.IsRefreshingProperty, "IsRefreshing");
            refreshView.SetBinding(RefreshView.CommandProperty, "RefreshCommand");
            Title = "RefreshView Demo";
            BindingContext = viewModel;
            Content = new StackLayout
{
                Margin = new Thickness(10),
                Children =
                {
                    header,
                    pullMessage,
                    numberOfItems,
                    refreshView
                }
            };
        }
    }
    internal class RefreshViewDemoPageViewModel
    {
        public RefreshViewDemoPageViewModel()
        {
        }
        public IEnumerable Items { get; internal set; }
    }
}




Image–Refreshview

Image – Refreshview

Planning to Hire Xamarin App Development Company ?

Your Search ends here.


SwipeView

SwipeView could be a container control that wraps around an item of content, and provides context menu things that are disclosed by a swipe gesture. Every menu item is described by a SwipeItem, that contains a Command property that executes an ICommand once the item is tapped.

Below code is used to create SwipeView.


<StackLayout Margin="20">
        <Label Text="SwipeView"
               FontSize="50"
               FontAttributes="Bold"
               HorizontalOptions="Center" />
        <CollectionView x:Name="collectionView"
                        ItemsSource="{Binding Monkeys}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <SwipeView>
                        <SwipeView.LeftItems>
                            <SwipeItems>
                                <SwipeItem Text="Delete"
                                           IconImageSource="delete.png"
                                           BackgroundColor="LightPink"
                                           Command="{Binding Source={x:Reference collectionView}, Path=BindingContext.DeleteCommand}"
                                           CommandParameter="{Binding}" />
                            </SwipeItems>
                        </SwipeView.LeftItems>
                        <Grid BackgroundColor="White"
                              Padding="10">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Image Grid.RowSpan="2" 
                                   Source="{Binding ImageUrl}" Aspect="AspectFill"
                                   HeightRequest="60" WidthRequest="60" />
                            <Label Grid.Column="1" 
                                   Text="{Binding Name}" 
                                   FontAttributes="Bold" />
                            <Label Grid.Row="1"
                                   Grid.Column="1" 
                                   Text="{Binding Location}"
                                   FontAttributes="Italic" 
                                   VerticalOptions="End" />
                        </Grid>
                    </SwipeView>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>




Code behind file of SwipeView.

Image–Swipeview

Image – Swipe view

Slider

Slider permits the user to pick out a double value from a nonstop a continuous fixed with the Minimum and maximum properties.

Below code is used to create Slider.



<Label Text="Slider"
               FontSize="50"
               FontAttributes="Bold"
               HorizontalOptions="Center" />
        <Slider x:Name="slider"
                 Minimum="0"
    MaximumTrackColor="Pink"                
    Maximum="100"
                 VerticalOptions="CenterAndExpand" />
        <Label Text="{Binding Source={x:Reference slider},
                              Path=Value,
                              StringFormat='Slider value is {0:F1}'}"
               FontSize="Large"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />




Stepper

Stepper permits the user to pick out a double value from a variety of progressive values fixed with the Minimum, Maximum, and Increment properties.

Below code is used to create Stepper.



<Label Text="Stepper"
               FontSize="50"
               FontAttributes="Bold"
               HorizontalOptions="Center" />
        <Stepper x:Name="stepper"
                 Minimum="0"
                 Maximum="10"
                 Increment="0.1"
                 HorizontalOptions="Center"
                 VerticalOptions="CenterAndExpand" />
        <Label Text="{Binding Source={x:Reference stepper},
                              Path=Value,
                              StringFormat='Stepper value is {0:F1}'}"
               FontSize="Large"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />





Switch

Switch takes the shape of an on/off switch to permit the user to pick a boolean value. The IsToggled property is that the state of the switch, and also the Toggled event is fired when the state changes.

Below code is used to create Switch.



<Label Text="Switch"
               FontSize="50"
               FontAttributes="Bold"
               HorizontalOptions="Center" />
        <Switch x:Name="switch"
                HorizontalOptions="Center"
                VerticalOptions="CenterAndExpand" />
        <Label Text="Switch is now False"
               FontSize="Large"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand">
           <Label.Triggers>
             <DataTrigger TargetType="Label"
 Binding="{Binding Source={x:Reference switch}, Path=IsToggled}"
                             Value="True">
         <Setter Property="Text" Value="Switch is now True" />
                </DataTrigger>
            </Label.Triggers>



Image–Slider,Stepper&Switch

Image – Slider, Stepper & Switch

CheckBox

CheckBox permits the user to pick a boolean price using a form of button that may either be checked or empty. The IsChecked property is that the state of the CheckBox, and also the CheckedChanged event is fired once the state changes.

Below code is used for CheckBox.



<Label Text="CheckBox"
               FontSize="50"
               FontAttributes="Bold"
               HorizontalOptions="Center" />

            <CheckBox x:Name="checkbox"
                  HorizontalOptions="Center"
                  VerticalOptions="CenterAndExpand" />

            <Label Text="CheckBox is now False"
               FontSize="Large"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand">
                <Label.Triggers>
                    <DataTrigger TargetType="Label"
                             Binding="{Binding Source={x:Reference checkbox},
                                               Path=IsChecked}"
                             Value="True">
                        <Setter Property="Text"
                            Value="CheckBox is now True" />
                    </DataTrigger>
                </Label.Triggers>
            </Label>



RadioButton

RadioButton permits the choice of one possibility from a group, and fires a CheckedChanged event once choice happens.

Below code is used for RadioButton.




<Label Text="RadioButton"
               FontSize="50"
               FontAttributes="Bold"
               HorizontalOptions="Center" />
        <Label Text="What's your favorite color?" />
        <RadioButton Content="Red"
                     TextColor="Red"
                     GroupName="colors"
                     CheckedChanged="OnColorsRadioButtonCheckedChanged" />
        <RadioButton Content="Pink"
                     TextColor="HotPink"
                     GroupName="colors"
                     CheckedChanged="OnColorsRadioButtonCheckedChanged" />
        <RadioButton Content="Blue"
                     TextColor="Blue"
                     GroupName="colors"
                     CheckedChanged="OnColorsRadioButtonCheckedChanged" />
        <RadioButton Content="Other"
                     GroupName="colors"
                     CheckedChanged="OnColorsRadioButtonCheckedChanged" />
        <Label x:Name="colorLabel"
               Text="You have chosen:" />
        <Label Text="What's your favorite fruit?" />
        <RadioButton Content="Apple"
                     GroupName="fruits"
                     CheckedChanged="OnFruitsRadioButtonCheckedChanged" />
        <RadioButton Content="Banana"
                     GroupName="fruits"
                     CheckedChanged="OnFruitsRadioButtonCheckedChanged" />
        <RadioButton Content="Pineapple"
                     GroupName="fruits"
                     CheckedChanged="OnFruitsRadioButtonCheckedChanged" />
        <RadioButton Content="Other"
                     GroupName="fruits"
                     CheckedChanged="OnFruitsRadioButtonCheckedChanged" />
        <Label x:Name="fruitLabel"
               Text="You have chosen:" />




Code behind file of RadioButton.




void OnColorsRadioButtonCheckedChanged(object sender, CheckedChangedEventArgs e)
        {
            RadioButton button = sender as RadioButton;
            colorLabel.Text = $"You have chosen: {button.Content}";
        }
        void OnFruitsRadioButtonCheckedChanged(object sender, CheckedChangedEventArgs e)
        {
            RadioButton button = sender as RadioButton;
            fruitLabel.Text = $"You have chosen: {button.Content}";
        }




Image–RadioButton&Checkbox

Image – RadioButton & Checkbox

Conclusion

Xamarin contains various views that are used for different purposes. In the above blog, we are discussing commonly used views, which are Label, Entry, Editor, Button, Slider, etc. And how to define a view and its properties.

Implement_Viewin_Xamarin_form

The building block of a cross-platform mobile application is Xamarin Forms views. Views are user-interface objects like labels, buttons, and sliders that are normally called controls or widgets in alternative graphical programming environments. The views supported by Xamarin.Forms all derive from the read category.

Table of Content

Label

The label displays single-line text strings or multi-line blocks of text, either with the constant or variable data format. Set the Text property to a string for constant data format, or set the FormattedText property to a FormattedString object for variable data format.

Below code is used to create label.


<StackLayout Padding="5,10">
        <Label Text="Label Page"></Label>
        <Label LineBreakMode="WordWrap">
            <Label.FormattedText>
                <FormattedString>
                    <Span Text="Blue Bold," TextColor="Blue" FontAttributes="Bold" />
                    <Span Text="default," Style="{DynamicResource BodyStyle}">
                        <Span.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding TapCommand}" />
                        </Span.GestureRecognizers>
                    </Span>
                    <Span Text="italic small." FontAttributes="Italic" FontSize="Small" />
                </FormattedString>
            </Label.FormattedText>
        </Label>
    </StackLayout>


label_view

Image : Label view

Entry

Entry permits the user to enter and edit one line of text. The text is offered because the Text property, and also the TextChanged and Completed events are fired when the text changes or the user signals completion by sound the enter key.

Below code is used to create Entry.


<StackLayout Padding="5,10">
        <Label Text="Enter Your Name"></Label>
        <Entry Placeholder="UserName" TextColor="Black" BackgroundColor="LightGreen"></Entry>
    </StackLayout>


Entry_view

Image- Entry view

Editor

Editor permits the user to enter and edit multiple lines of text. The text is accessible because of the Text property, and therefore the TextChanged and Completed events area unit is dismissed once the text changes or the user signals completion.

Below code is used to create Editor.


<ContentPage.Content>
        <StackLayout Padding="5,10">
            <Label Text="This is Editor"></Label>
            <Editor Placeholder="Enter text here" PlaceholderColor="Olive" />
        </StackLayout>
    </ContentPage.Content>



Image-Editor

Image-Editor

BoxView

BoxView could be a straightforward rectangle of specified height, width, and colour. We can use BoxView for interaction, rudimentary graphics, and decoration with the user through touch.

Below code is used to create BoxView.



<StackLayout>
        <Label Text="BoxView"  
               FontSize="50"  
               FontAttributes="Bold"  
               HorizontalOptions="Center" />

        <BoxView Color="Red"  
                 WidthRequest="150"  
                 HeightRequest="150"  
                 HorizontalOptions="Center"  
                 VerticalOptions="CenterAndExpand" />
    </StackLayout>




Image-BoxView

Image-BoxView


WebView

WebView may be a read for displaying the online and HTML content on our app. WebView displays the HTML content within our app. WebView will show HTML strings from memory. WebView will sort of content within the app. WebView will sort of content within the app.

Below code is used to create WebView.


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


Image–WebView

Image–WebView

Button

When we click on a button, it responds and can perform a specific task in associate degree application. In all the Xamarin.Forms, button plays a very important role. The button displays the short text string once it follows the command. Button may show image icon or a mix of text and image. Press the button with the finger or mouse to start the command user.

ImageButton

The ImageButton read combines the Button read and Image read to make a button whose content is a picture. The user presses the ImageButton with a finger or clicks it with a mouse to direct the applying to hold out a selected task. However, not like the Button read, the ImageButton read has no idea of text and text look.

Below code is used to create Button.

Code behind file of button:


<StackLayout>
        <Label Text="Button"  
               FontSize="50"  
               FontAttributes="Bold"  
               HorizontalOptions="Center" />
        <Button Text="Click Me!"  
                Font="Large"  
                BorderWidth="1"  
                HorizontalOptions="Center"  
                VerticalOptions="CenterAndExpand"  
                Clicked="Button_Clicked" BackgroundColor="Yellow"/>
        <Label x:Name="label"  
               Text="0 button clicks"  
               FontSize="Large"  
               HorizontalOptions="Center"  
               VerticalOptions="CenterAndExpand" />
    </StackLayout>



public int ClickTotal { get; private set; }
private void Button_Clicked(object sender, EventArgs e)
    {
       ClickTotal += 1;
       label.Text = String.Format("{0} button click{1}", ClickTotal, ClickTotal == 1 ? "": "s");
    }



Image–Button

Image – Button

SearchBar

It is a section of the UI parts of Xamarin.Forms. If we want to search the info from a listing or website or something, we are able to place the search bar to try and do a look from the online or from anyplace else. largely we tend to use a search bar on Google homepage or any program.

Below code is used to create searchbar.


<StackLayout>
        <Label Text="SearchBar"
               FontSize="50"
               FontAttributes="Bold"
               HorizontalOptions="Center" />

        <SearchBar Placeholder="Xamarin.Forms Property"
                   SearchButtonPressed="OnSearchBarButtonPressed" />

        <ScrollView VerticalOptions="FillAndExpand">
            <Label x:Name="resultsLabel" />
        </ScrollView>
    </StackLayout>



Code behind file of SearchBar.


void OnSearchBarButtonPressed(object sender, EventArgs args)
          {
              SearchBar searchBar = (SearchBar)sender;
              string searchText = searchBar.Text;
              var list = new List<Tuple<Type, Type>>();
              resultsLabel.Text = "";
              Assembly xamarinFormsAssembly = typeof(View).GetTypeInfo().Assembly;
              foreach (Type type in xamarinFormsAssembly.ExportedTypes)
              {
                  TypeInfo typeInfo = type.GetTypeInfo();
                  if (typeInfo.IsPublic)
                  {
                      foreach (PropertyInfo property in typeInfo.DeclaredProperties)
                      {
                          if (property.Name.Equals(searchText))
                          {
                              list.Add(Tuple.Create<Type, Type>(type, property.PropertyType));
                          }
                      }
                  }
              }
if (list.Count == 0)
              {
                  resultsLabel.Text =
                  String.Format("No Xamarin.Forms properties with " +
                                    "the name of {0} were found", searchText);
              }

              else
              {
                  resultsLabel.Text = "The ";

                  foreach (Tuple<Type, Type> tuple in list)
                  {
                      resultsLabel.Text +=
                          String.Format("{0} type defines a property named {1} of type {2}",
                                        tuple.Item1.Name, searchText, tuple.Item2.Name);
                      if (tuple != list.Last())
                      {
                          resultsLabel.Text += "; and the ";
                      }
                  }
                  resultsLabel.Text += ".";
              }
          }



Image-Searchbar

Image - Searchbar

ListView

ListView derives from ItemsView and displays a scrollable list of selectable knowledge things. Set the ItemsSource property to a set of objects, and set the ItemTemplate property to a DataTemplate object describing, however, the things are to be formatted. The ItemSelected event signals that a range has been created, that is accessible because the SelectedItem property.

Below code is used for ListView.


<StackLayout Margin="20,35,20,20">
        <ListView>
            <ListView.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>Baboon</x:String>
                    <x:String>Capuchin Monkey</x:String>
                    <x:String>Blue Monkey</x:String>
                    <x:String>Squirrel Monkey</x:String>
                    <x:String>Golden Lion Tamarin</x:String>
                    <x:String>Howler Monkey</x:String>
                    <x:String>Japanese Macaque</x:String>
                </x:Array>
            </ListView.ItemsSource>
        </ListView>
    </StackLayout>



Image–ListView

Image – ListView

DatePicker

DatePicker permits the user to pick a date with the platform date picker. Set a variety of allowable dates with the MinimumDate and MaximumDate properties. The Date property is that the chosen date, and also the DateSelected event is dismissed once that property changes.


<StackLayout>
        <Label Text="DatePicker"  
               FontSize="50"  
               FontAttributes="Bold"  
               HorizontalOptions="Center" />

        <DatePicker Format="D"  
                    VerticalOptions="CenterAndExpand"  
                    Margin="10, 0" />
    </StackLayout>


Image–DatePicker

Image – DatePicker

TimePicker

TimePicker permits the user to pick a time with the platform time picker. The Time property is that the chosen time. An application will monitor changes within the Time property by putting in a handler for the PropertyChanged event.

Below code is used to create DatePicker and TimePicker.


<ContentPage.Content>
        <StackLayout Padding="10">
            <Label Text="DatePicker And TimePicker" FontSize="20" HorizontalOptions="Center"></Label>
            <DatePicker x:Name="dp" MaximumDate="2021/12/31" MinimumDate="2000/12/31"></DatePicker>
            <TimePicker x:Name="tp"></TimePicker>
            <Button x:Name="button" Clicked="Button_Clicked" Text="Details"></Button>
            <Label x:Name="details"></Label>
        </StackLayout>



Code behind file of DatePicker & TimePicker.



private void Button_Clicked(object sender, EventArgs e)
        {
          var date = dp.Date;
          var time = tp.Time;
          details.Text = string.Format("Date:{0}\n Time:{1}", date, time);
        }



Image–DatePicker&TimePicker />

Image – DatePicker & TimePicker

Ellipse

Ellipse displays associate ellipse or circle of size WidthRequest x HeightRequest. to color the within of the ellipse, set its Fill property to a Color. To present the ellipse an overview, set its Stroke property to a Color.


<StackLayout>
        <Label Text="Ellipse"
               FontSize="50"
               FontAttributes="Bold"
               HorizontalOptions="Center" />
        <Ellipse Fill="green"
                 WidthRequest="150"
                 HeightRequest="50"
                 HorizontalOptions="Center" />
        <Ellipse Stroke="green"
                 StrokeThickness="4"
                 WidthRequest="150"
                 HeightRequest="150"
                 HorizontalOptions="Center" />
    </StackLayout>



Image–Ellipse

Image – Ellipse

RefreshView

RefreshView could be a container control that has pull-to-refresh practicality for scrollable content. The ICommand outlined by the Command property is executed once a refresh is triggered, and also the IsRefreshing property indicates this state of the control.

Below code is used to create RefreshView.


<ContentPage.BindingContext>
        <local1:RefreshViewDemoPageViewModel />
    </ContentPage.BindingContext>
    <ContentPage.Resources>
        <DataTemplate x:Key="ColorItemTemplate">
            <Grid Margin="5"
                  HeightRequest="120"
                  WidthRequest="105">
                <BoxView Color="{Binding Color}" />
                <Label Text="{Binding Name}"
                       HorizontalOptions="Center"
                       VerticalOptions="Center" />
            </Grid>
        </DataTemplate>
    </ContentPage.Resources>
    <StackLayout Margin="10">
        <Label Text="RefreshView"
               FontSize="50"
               FontAttributes="Bold"
               HorizontalOptions="Center" />
        <Label Text="Pull the items down to refresh the ScrollView." />
        <Label Text="{Binding Items.Count, StringFormat='Number of items: {0}'}" />
        <RefreshView IsRefreshing="{Binding IsRefreshing}"
                     RefreshColor="Teal"
                     Command="{Binding RefreshCommand}">
            <ScrollView>
                <FlexLayout Direction="Row"
                            Wrap="Wrap"
                            AlignItems="Center"
                            AlignContent="Center"
                            BindableLayout.ItemsSource="{Binding Items}"
                            BindableLayout.ItemTemplate="{StaticResource ColorItemTemplate}" />
            </ScrollView>
        </RefreshView>
    </StackLayout>





using System.Collections;
using Xamarin.Forms;
namespace FormsGallery.CodeExamples
{
    public class RefreshViewDemoPage : ContentPage
    {
        public RefreshViewDemoPage()
        {
            RefreshViewDemoPageViewModel viewModel = new RefreshViewDemoPageViewModel();
            DataTemplate colorItemTemplate = new DataTemplate(() =>
            {
                Grid grid = new Grid
                {
                    Margin = new Thickness(5),
                    HeightRequest = 120,
                    WidthRequest = 105
                };
                BoxView boxView = new BoxView();
                boxView.SetBinding(BoxView.ColorProperty, "Color");
                Label label = new Label
                {
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions = LayoutOptions.Center
                };
                label.SetBinding(Label.TextProperty, "Name");
                grid.Children.Add(boxView);
                grid.Children.Add(label);
                return grid;
            });
            Label header = new Label
            {
                Text = "RefreshView",
                FontSize = 50,
                FontAttributes = FontAttributes.Bold,
                HorizontalOptions = LayoutOptions.Center
            };
Label pullMessage = new Label
            {
                Text = "Pull the items down to refresh the ScrollView."
            };
            Label numberOfItems = new Label();
            numberOfItems.SetBinding(Label.TextProperty, "Items.Count", stringFormat: "Number of items: {0}");
FlexLayout flexLayout = new FlexLayout
            {
                Direction = FlexDirection.Row,
                Wrap = FlexWrap.Wrap,
                AlignItems = FlexAlignItems.Center,
                AlignContent = FlexAlignContent.Center
            };
            BindableLayout.SetItemsSource(flexLayout, viewModel.Items);
            BindableLayout.SetItemTemplate(flexLayout, colorItemTemplate);
            ScrollView scrollView = new ScrollView
            {
                Content = flexLayout
            };
            RefreshView refreshView = new RefreshView
            {
                Content = scrollView,
                RefreshColor = Color.Teal
            };
            refreshView.SetBinding(RefreshView.IsRefreshingProperty, "IsRefreshing");
            refreshView.SetBinding(RefreshView.CommandProperty, "RefreshCommand");
            Title = "RefreshView Demo";
            BindingContext = viewModel;
            Content = new StackLayout
{
                Margin = new Thickness(10),
                Children =
                {
                    header,
                    pullMessage,
                    numberOfItems,
                    refreshView
                }
            };
        }
    }
    internal class RefreshViewDemoPageViewModel
    {
        public RefreshViewDemoPageViewModel()
        {
        }
        public IEnumerable Items { get; internal set; }
    }
}




Image–Refreshview

Image – Refreshview

Planning to Hire Xamarin App Development Company ?

Your Search ends here.


SwipeView

SwipeView could be a container control that wraps around an item of content, and provides context menu things that are disclosed by a swipe gesture. Every menu item is described by a SwipeItem, that contains a Command property that executes an ICommand once the item is tapped.

Below code is used to create SwipeView.


<StackLayout Margin="20">
        <Label Text="SwipeView"
               FontSize="50"
               FontAttributes="Bold"
               HorizontalOptions="Center" />
        <CollectionView x:Name="collectionView"
                        ItemsSource="{Binding Monkeys}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <SwipeView>
                        <SwipeView.LeftItems>
                            <SwipeItems>
                                <SwipeItem Text="Delete"
                                           IconImageSource="delete.png"
                                           BackgroundColor="LightPink"
                                           Command="{Binding Source={x:Reference collectionView}, Path=BindingContext.DeleteCommand}"
                                           CommandParameter="{Binding}" />
                            </SwipeItems>
                        </SwipeView.LeftItems>
                        <Grid BackgroundColor="White"
                              Padding="10">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Image Grid.RowSpan="2" 
                                   Source="{Binding ImageUrl}" Aspect="AspectFill"
                                   HeightRequest="60" WidthRequest="60" />
                            <Label Grid.Column="1" 
                                   Text="{Binding Name}" 
                                   FontAttributes="Bold" />
                            <Label Grid.Row="1"
                                   Grid.Column="1" 
                                   Text="{Binding Location}"
                                   FontAttributes="Italic" 
                                   VerticalOptions="End" />
                        </Grid>
                    </SwipeView>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>




Code behind file of SwipeView.

Image–Swipeview

Image – Swipe view

Slider

Slider permits the user to pick out a double value from a nonstop a continuous fixed with the Minimum and maximum properties.

Below code is used to create Slider.



<Label Text="Slider"
               FontSize="50"
               FontAttributes="Bold"
               HorizontalOptions="Center" />
        <Slider x:Name="slider"
                 Minimum="0"
    MaximumTrackColor="Pink"                
    Maximum="100"
                 VerticalOptions="CenterAndExpand" />
        <Label Text="{Binding Source={x:Reference slider},
                              Path=Value,
                              StringFormat='Slider value is {0:F1}'}"
               FontSize="Large"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />




Stepper

Stepper permits the user to pick out a double value from a variety of progressive values fixed with the Minimum, Maximum, and Increment properties.

Below code is used to create Stepper.



<Label Text="Stepper"
               FontSize="50"
               FontAttributes="Bold"
               HorizontalOptions="Center" />
        <Stepper x:Name="stepper"
                 Minimum="0"
                 Maximum="10"
                 Increment="0.1"
                 HorizontalOptions="Center"
                 VerticalOptions="CenterAndExpand" />
        <Label Text="{Binding Source={x:Reference stepper},
                              Path=Value,
                              StringFormat='Stepper value is {0:F1}'}"
               FontSize="Large"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />





Switch

Switch takes the shape of an on/off switch to permit the user to pick a boolean value. The IsToggled property is that the state of the switch, and also the Toggled event is fired when the state changes.

Below code is used to create Switch.



<Label Text="Switch"
               FontSize="50"
               FontAttributes="Bold"
               HorizontalOptions="Center" />
        <Switch x:Name="switch"
                HorizontalOptions="Center"
                VerticalOptions="CenterAndExpand" />
        <Label Text="Switch is now False"
               FontSize="Large"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand">
           <Label.Triggers>
             <DataTrigger TargetType="Label"
 Binding="{Binding Source={x:Reference switch}, Path=IsToggled}"
                             Value="True">
         <Setter Property="Text" Value="Switch is now True" />
                </DataTrigger>
            </Label.Triggers>



Image–Slider,Stepper&Switch

Image – Slider, Stepper & Switch

CheckBox

CheckBox permits the user to pick a boolean price using a form of button that may either be checked or empty. The IsChecked property is that the state of the CheckBox, and also the CheckedChanged event is fired once the state changes.

Below code is used for CheckBox.



<Label Text="CheckBox"
               FontSize="50"
               FontAttributes="Bold"
               HorizontalOptions="Center" />

            <CheckBox x:Name="checkbox"
                  HorizontalOptions="Center"
                  VerticalOptions="CenterAndExpand" />

            <Label Text="CheckBox is now False"
               FontSize="Large"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand">
                <Label.Triggers>
                    <DataTrigger TargetType="Label"
                             Binding="{Binding Source={x:Reference checkbox},
                                               Path=IsChecked}"
                             Value="True">
                        <Setter Property="Text"
                            Value="CheckBox is now True" />
                    </DataTrigger>
                </Label.Triggers>
            </Label>



RadioButton

RadioButton permits the choice of one possibility from a group, and fires a CheckedChanged event once choice happens.

Below code is used for RadioButton.




<Label Text="RadioButton"
               FontSize="50"
               FontAttributes="Bold"
               HorizontalOptions="Center" />
        <Label Text="What's your favorite color?" />
        <RadioButton Content="Red"
                     TextColor="Red"
                     GroupName="colors"
                     CheckedChanged="OnColorsRadioButtonCheckedChanged" />
        <RadioButton Content="Pink"
                     TextColor="HotPink"
                     GroupName="colors"
                     CheckedChanged="OnColorsRadioButtonCheckedChanged" />
        <RadioButton Content="Blue"
                     TextColor="Blue"
                     GroupName="colors"
                     CheckedChanged="OnColorsRadioButtonCheckedChanged" />
        <RadioButton Content="Other"
                     GroupName="colors"
                     CheckedChanged="OnColorsRadioButtonCheckedChanged" />
        <Label x:Name="colorLabel"
               Text="You have chosen:" />
        <Label Text="What's your favorite fruit?" />
        <RadioButton Content="Apple"
                     GroupName="fruits"
                     CheckedChanged="OnFruitsRadioButtonCheckedChanged" />
        <RadioButton Content="Banana"
                     GroupName="fruits"
                     CheckedChanged="OnFruitsRadioButtonCheckedChanged" />
        <RadioButton Content="Pineapple"
                     GroupName="fruits"
                     CheckedChanged="OnFruitsRadioButtonCheckedChanged" />
        <RadioButton Content="Other"
                     GroupName="fruits"
                     CheckedChanged="OnFruitsRadioButtonCheckedChanged" />
        <Label x:Name="fruitLabel"
               Text="You have chosen:" />




Code behind file of RadioButton.




void OnColorsRadioButtonCheckedChanged(object sender, CheckedChangedEventArgs e)
        {
            RadioButton button = sender as RadioButton;
            colorLabel.Text = $"You have chosen: {button.Content}";
        }
        void OnFruitsRadioButtonCheckedChanged(object sender, CheckedChangedEventArgs e)
        {
            RadioButton button = sender as RadioButton;
            fruitLabel.Text = $"You have chosen: {button.Content}";
        }




Image–RadioButton&Checkbox

Image – RadioButton & Checkbox

Conclusion

Xamarin contains various views that are used for different purposes. In the above blog, we are discussing commonly used views, which are Label, Entry, Editor, Button, Slider, etc. And how to define a view and its properties.