XamarinForms SlidingPanel [Tutorial 27]

Step1:

//Set MainPage As Starting Page:
App.xaml.cs:

MainPage = new SliderPanel.MainPage();

Step2:

//Downlaod DKsliding Panel From Nuget
//Import Library inside MainPage.xaml

 xmlns:DK="clr-namespace:DK.SlidingPanel.Interface;assembly=DK.SlidingPanel.Interface"

// Create a Absolute Layout For Sliding Panel:

<AbsoluteLayout VerticalOptions="FillAndExpand" x:Name="Main">
        <StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" x:Name="main" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <Image Source="img1.jpg" Aspect="AspectFill" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Image>

        </StackLayout>
        <StackLayout x:Name="body" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All"
   Orientation="Vertical" VerticalOptions="FillAndExpand" Spacing="0">
            <!--<StackLayout VerticalOptions="End" BackgroundColor="Red">
    <Label Text="Titulo" />
    
   </StackLayout>-->
            <StackLayout VerticalOptions="FillAndExpand">
                <Label Text="Slider-Example"  HorizontalOptions="Center" VerticalOptions="Center"/>
                <Image Source="img2.jpg" Aspect="AspectFill"></Image>
                <StackLayout.GestureRecognizers>
                    <TapGestureRecognizer Tapped="Handle_Tapped">
                    </TapGestureRecognizer>
                </StackLayout.GestureRecognizers>
            </StackLayout>
        </StackLayout>
    </AbsoluteLayout>

Step3: Now Give Handler event And Pass the object to Action Event:

 async void Handle_Tapped(object sender, System.EventArgs e)
        {
            var initialPosition = Main.Height;
            var currentPosition = body.Height;

            await body.TranslateTo(0, (initialPosition - currentPosition) * -1, 500, Easing.SinIn);
        }

        public MainPage()
  {
            InitializeComponent();

            body.TranslationY = Main.Height + 500;
        }

Xamarin Forms CheckBox [Tutorial 26]

Step1:
App.Xaml.cs

public App ()
  {
   InitializeComponent();

   MainPage = new CheckBox.MainPage();
  }

Step2: MainPage.Xaml

//Note Import Xamarin.form Xlab Nuget

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:CheckBox"
             x:Class="CheckBox.MainPage"
              xmlns:controls="clr-namespace:XLabs.Forms.Controls;assembly=XLabs.Forms"
             BackgroundImage="asdads.jpg"
             >
    <ContentPage.Content>
        <StackLayout>
            <!--<Label Text="Welcome to Xamarin.Forms!"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />-->
            <Label Text=" Schedule Your Day" HorizontalOptions="Start" FontSize="Large"></Label>

            <controls:CheckBox DefaultText="Chunk Down a Project"
                               HorizontalOptions="FillAndExpand"
                               TextColor="Black"
                               FontSize="18"
                               FontName="AmericanTypewriter" 
                               />
            <controls:CheckBox DefaultText="Research One Side Hustle"
                               HorizontalOptions="FillAndExpand"
                               TextColor="Black"
                               FontSize="18"
                               FontName="AmericanTypewriter" 
                               />

            <controls:CheckBox DefaultText="Make One Business Connection"
                               HorizontalOptions="FillAndExpand"
                               TextColor="Black"
                               FontSize="18"
                               FontName="AmericanTypewriter" 
                               />

            <controls:CheckBox DefaultText="Review Your Goals"
                               HorizontalOptions="FillAndExpand"
                               TextColor="Black"
                               FontSize="18"
                               FontName="AmericanTypewriter" 
                               />

            <!--<controls:CheckBox DefaultText="rack Your Expenses"
                               HorizontalOptions="FillAndExpand"
                               TextColor="Green"
                               FontSize="25"
                               FontName="AmericanTypewriter" 
                               />
            <controls:CheckBox DefaultText="Review Your Budget"
                               HorizontalOptions="FillAndExpand"
                               TextColor="Green"
                               FontSize="25"
                               FontName="AmericanTypewriter" 
                               />
            <controls:CheckBox DefaultText="Conserve Your Utilities"
                               HorizontalOptions="FillAndExpand"
                               TextColor="Green"
                               FontSize="25"
                               FontName="AmericanTypewriter" 
                               />
            <controls:CheckBox DefaultText="Pack a Meal, Snack, and Coffee"
                               HorizontalOptions="FillAndExpand"
                               TextColor="Green"
                               FontSize="25"
                               FontName="AmericanTypewriter" 
                               />-->

        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Step3:
MainPage.Xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;


namespace CheckBox
{
 public partial class MainPage : ContentPage
 {
  public MainPage()
  {
   InitializeComponent();

 }
}
}

Step4:

Its Last now Enjoy The Result..... :D

Xamarin forms Activity Indicator for Log In[Tutorial 25]

Step1:
App.Xaml.cs

public App ()
  {
   InitializeComponent();

   MainPage = new App32.MainPage();
  }

Step2:

MainPage.Xaml

 <Grid>
        <ScrollView>
            <StackLayout>
                <StackLayout Padding="30" Spacing="2" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand">
                    <Label Text="Name or Phone Number" TextColor="#555" FontSize="20" FontAttributes="Bold"/>
                    <Entry  Keyboard="Numeric" Placeholder="Enter Authinticated Phone Number Or Name" PlaceholderColor="#CCC" FontSize="20" TextColor="#555" />
                    <Label Text="Password" TextColor="#555" FontSize="20" FontAttributes="Bold"/>
                    <Entry  Placeholder="Enter correct password" Keyboard="Default" IsPassword="True" FontSize="20" PlaceholderColor="#CCC" TextColor="#555" />
                </StackLayout>
                <StackLayout Padding="30" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand">
                    <Button x:Name="BtnLogin" Text="Login" BorderColor="#CB9600" BackgroundColor="#F4B400" />
                </StackLayout>
            </StackLayout>
        </ScrollView>

        <!-- The '{Binding IsBusy}' is going to search the 'IsBusy' property inside the 'BindingContext'. In our case, is the code behind -->
        <ActivityIndicator x:Name="activityIndicator" IsRunning="{Binding IsBusy}" VerticalOptions="Center" HorizontalOptions="Center" Color="Blue" />
    </Grid>

Step3:
MainPage.Xaml.cs

public MainPage()
  {
   InitializeComponent();

            this.InitializeComponent();

            // Define the binding context
            this.BindingContext = this;

            // Set the IsBusy property
            this.IsBusy = false;

            // Login button action
            this.BtnLogin.Clicked += BtnLogin_Clicked;
        }
        private void BtnLogin_Clicked(object sender, EventArgs e)
        {
            this.IsBusy = true;
        }

Step4:
Hack the Code :D  No Moore Steps Remaining..

Xamarin forms Back Button Pressed Gives Alert Box To Exit [Tutorial 24]

Step1:
App.Xaml.cs
InitializeComponent();

MainPage = new App32.MainPage();

Step2:

MainPage.Xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:App32"
             x:Class="App32.MainPage"
              BackgroundImage="school.jpg">
    <ContentPage.Content>

        <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
            <Entry Placeholder="School Home-Ground"/>
            <Button Text="Click To Enter " BackgroundColor="White" TextColor="Black" Clicked="Button_OnClicked" Image="myicon.png"></Button>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Step3: App.Xaml.cs

        private void Button_OnClicked(object sender, EventArgs e)
        {
            DisplayAlert("Important-Notification", "Do you want Play Baseball ?", "Yes", "No");
        }

        protected override bool OnBackButtonPressed()
        {
            //Device.BeginInvokeOnMainThread(async () => {
            //    //var result = await this.DisplayAlert("Alert!", "Do you really want to exit?", "Yes", "No");
            //    //if (result) await this.Navigation.PopAsync(); // or anything else
            //});

            return false;
        }
    }
}

Xamarin Forms Alert Dialog [Tutorial 23]

Step1:
App.Xaml.cs

public App ()
  {
   InitializeComponent();

   MainPage = new App32.MainPage();
  }

Step2:

MainPage.Xaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:App32"
             x:Class="App32.MainPage"
              BackgroundImage="school.jpg">
    <ContentPage.Content>

        <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
            <Entry Placeholder="School Home-Ground"/>
            <Button Text="Click To Enter " BackgroundColor="White" TextColor="Black" Clicked="Button_OnClicked" Image="myicon.png"></Button>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Step3:

MainPage.Xaml.cs

 private void Button_OnClicked(object sender, EventArgs e)
        {
            DisplayAlert("Important-Notification", "Do you want Play Baseball ?", "Yes", "No");
        }

Step4:
Hola We Have Completed Our Tutorial :D

Xamarin forms Cool Image Circle [Tutorial 21]

Step1:Design Your MainPage.Xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:App32"
             x:Class="App32.MainPage"
               xmlns:image="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"
             BackgroundColor="Black">
    <ContentPage.Content>
      
        <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
            <Label Text="Tony-Stark" TextColor="White" HorizontalOptions="Center"></Label>
            <image:CircleImage Source="http://beardoholic.com/wp-content/uploads/2017/01/beardtrendbeardstyling.png"
        Aspect="AspectFill" WidthRequest="120" HeightRequest="120"
        BorderColor="White" BorderThickness="2">
            </image:CircleImage>
            <Label></Label>
            <Label></Label>
            <image:CircleImage Source="https://wallpaperclicker.com/storage/wallpaper/love-heart-artwork-painting-80416152.jpg"
        Aspect="AspectFill" WidthRequest="80" HeightRequest="80"
        BorderColor="White" BorderThickness="2">
            </image:CircleImage>
            <Label></Label>
            <Label></Label>
            <Label Text="Pepper" TextColor="White" HorizontalOptions="Center"></Label>
            <image:CircleImage Source="https://i.pinimg.com/originals/1f/4e/54/1f4e54e31465024c152c879de50b0b50.jpg"
        Aspect="AspectFill" WidthRequest="120" HeightRequest="120"
        BorderColor="White" BorderThickness="2" HorizontalOptions="End">
            </image:CircleImage>
     
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Step 2:
Get App.xaml.cs to MainPage

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Xamarin.Forms;

namespace App32
{
 public partial class App : Application
 {
  public App ()
  {
   InitializeComponent();

   MainPage = new App32.MainPage();
  }

  protected override void OnStart ()
  {
   // 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: Download The Image Circle Plugin

https://github.com/jamesmontemagno/ImageCirclePlugin

Step4:
Hola Enjoy then NICE look and Feel Of Image Circle Inside your UI

Xamarin Forms Profile UI Design[Tutorial 16]

Step1:
App.Xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Xamarin.Forms;

namespace ProfileUi
{
 public partial class App : Application
 {
  public App ()
  {
   InitializeComponent();

   MainPage = new ProfileUi.MainPage();
  }

  protected override void OnStart ()
  {
   // Handle when your app starts
  }

  protected override void OnSleep ()
  {
   // Handle when your app sleeps
  }

  protected override void OnResume ()
  {
   // Handle when your app resumes
  }
 }
}

Step:2
MainPage.Xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ProfileUi"
             x:Class="ProfileUi.MainPage"
             BackgroundColor="Black">
    <ContentPage.Content>
        <StackLayout>
            <Image Aspect="AspectFill" Source="http://d.ibtimes.co.uk/en/full/1611491/cristiano-ronaldo.jpg"/>
            <BoxView HeightRequest="1" BackgroundColor="#ffffff"
               />
            <StackLayout Padding="15">

                <Label Text="Cristiano Ronaldo" FontAttributes="Bold" TextColor="White"/>
                <Label Text="My comments were misinterpreted after the game. I wasn't saying that I'm better than everyone else. I was referring to injuries. The team have lost a lot of important players through injury like Pepe, Bale, Benzema, Marcelo… That has harmed us and prevented us from reaching our usual level."
                      TextColor="White" />

            </StackLayout>

            <BoxView HeightRequest="1" BackgroundColor="#ffffff"/>


            <StackLayout Orientation="Horizontal" VerticalOptions="Center" HorizontalOptions="Center"/>
            <Button Text="NextPage"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Step3:
MainPage.Xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace ProfileUi
{
 public partial class MainPage : ContentPage
 {
  public MainPage()
  {
   InitializeComponent();
  }
 }
}

Step4:
No More Work Holaa!!! You Will Get Expected OutPut.. :D

Xamarin Forms Pending ProgressBar WebView[Tutorial 10]

Step1:
MainPage.Xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:AwesomeWebView"
             x:Class="AwesomeWebView.MainPage"
              NavigationPage.HasNavigationBar="false">

 
 <AbsoluteLayout>

        <StackLayout AbsoluteLayout.LayoutFlags="All"
                   AbsoluteLayout.LayoutBounds="0,0,1,1">

            <WebView x:Name="browser"
               VerticalOptions="FillAndExpand"
               Navigating="WebOnNavigating"
               Navigated="WebOnNavigated"/>

        </StackLayout>


        <Frame AbsoluteLayout.LayoutFlags="PositionProportional"
           AbsoluteLayout.LayoutBounds="0.5,0.5,AutoSize,AutoSize"
           x:Name="loading"
           BackgroundColor="Gray"
           Opacity="0.9"
           IsVisible="True">
            <StackLayout>
                <ActivityIndicator IsRunning="True"/>
                <Label Text="Loading..."
               TextColor="White"/>
            </StackLayout>
        </Frame>

    </AbsoluteLayout>        
</ContentPage>

Step2:

MainPage.Xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace AwesomeWebView
{
 public partial class MainPage : ContentPage
 {
  public MainPage()
  {
   InitializeComponent();
            browser.Source = "https://giphy.com/search/smiling";
        }


        void WebOnNavigating(object sender, WebNavigatingEventArgs s)
        {
            loading.IsVisible = true;
        }

        void WebOnNavigated(object sender, WebNavigationEventArgs s)
        {
            loading.IsVisible = false;

        }

    }
}

Step 3: Holaa!!!! No Steps Tutorial Completed :D

Xamarin Forms WelcomeScreen Fading (Splash Screen) [Tutorial 9]

Step1:
Page1.Xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TwitterAimation.Page1">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="Welcome to Xamarin Forms!" HorizontalOptions="Center" VerticalOptions="Center" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Step2:

SplashPage:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Reflection.Emit;
using System.Text;

using Xamarin.Forms;

namespace TwitterAimation
{
    public class SplashPage : ContentPage
    {
        Image splashImage;  

        public SplashPage()
        {
            NavigationPage.SetHasNavigationBar(this, false); 

            var sub = new AbsoluteLayout();
            splashImage = new Image
            {
                Source = "Twitter.png",
                WidthRequest = 100,
                HeightRequest = 100
            };
             AbsoluteLayout.SetLayoutFlags(splashImage,
                AbsoluteLayoutFlags.PositionProportional); 
               AbsoluteLayout.SetLayoutBounds(splashImage,
                new Rectangle(0.5, 0.5, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

            sub.Children.Add(splashImage);

            this.BackgroundColor = Color.FromHex("#429de3");
            this.Content = sub;
        }

          
         protected override async void OnAppearing()
        {
            base.OnAppearing();

            await splashImage.ScaleTo(1, 2000); //Time-consuming processes such as initialization
            await splashImage.ScaleTo(0.9, 1500, Easing.Linear);
            await splashImage.ScaleTo(150, 1200, Easing.Linear);
            Application.Current.MainPage = new NavigationPage(new Page1());    //After loading  MainPage it gets Navigated to our new Page
        }     
    }
}

Step3: Holaaa Steps Complete Enjoy Friends :D

Xamarin Forms CardView As Like GoogleCards[Tutorial 8]

 

  Step1: CardDataModel

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace AwesomeCardView.Model
{
   public class CardDataModel
    {
        public string HeadTitle { get; set; }
        public string HeadLines { get; set; }
        public string HeadLinesDesc { get; set; }
        public string ProfileImage { get; set; }
    }
}

Step 2:

Card View Template.Xaml

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AwesomeCardView.View.CardViewTemplate"
             xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"
             xmlns:local="clr-namespace:AwesomeCardView">

    <Frame IsClippedToBounds="True"
         HasShadow="True"
         BackgroundColor="White" >
        <Frame.OutlineColor>
            <OnPlatform x:TypeArguments="Color"
                  Android="Gray"
                  iOS="Gray"/>
        </Frame.OutlineColor>
        <Frame.Margin>
            <OnPlatform x:TypeArguments="Thickness"
                  Android="7" iOS="7"/>
        </Frame.Margin>
        <Frame.Padding>
            <OnPlatform x:TypeArguments="Thickness"
                  Android="5" iOS="5"/>
        </Frame.Padding>
        <StackLayout Orientation="Horizontal">

            <Grid VerticalOptions="CenterAndExpand"
            Padding="0"
            HorizontalOptions="FillAndExpand"
            BackgroundColor="Transparent">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

                <StackLayout Orientation="Horizontal" VerticalOptions="Start" >
                    <controls:CircleImage Source="{Binding ProfileImage}" VerticalOptions="Start" HeightRequest="30" WidthRequest="30"></controls:CircleImage>
                    <Label FontAttributes="None"
               Grid.Row="0"
               HorizontalTextAlignment="Start"
               VerticalTextAlignment="Center"
               FontSize="12"
               Text="{Binding HeadTitle , Mode = TwoWay}" TextColor="Gray" >
                    </Label>



                </StackLayout>
                <Grid Grid.Row="1">
                    <StackLayout Orientation="Horizontal">
                        <Label FontAttributes="None"
               Grid.Row="1"
               HorizontalTextAlignment="Start"
               VerticalTextAlignment="Start"
               FontSize="12"
               Text="{Binding HeadLines, Mode = TwoWay}" TextColor="Black">

                        </Label>
                        <Image Source="{Binding  ProfileImage}"  Grid.Row="2"  WidthRequest="40" HeightRequest="40" HorizontalOptions="End" />
                    </StackLayout>
                </Grid>

             
                <Grid Grid.Row="2"
              BackgroundColor="Transparent"
              Padding="4">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <Label Grid.Row="0"
                 Grid.Column="0"
                 />
                    <Label Grid.Row="0"
                 Grid.Column="0"
                 Text="{Binding HeadLinesDesc}" HorizontalOptions="Start" VerticalOptions="Start"/>
                </Grid>

            </Grid>
        </StackLayout>
    </Frame>
</ContentView>

Step3:

CardViewTemplate.Xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace AwesomeCardView.View
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class CardViewTemplate : ContentView
    {
        public CardViewTemplate()
        {
            InitializeComponent();
        }
    }
}

Step4:
CardDataViewModel

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using AwesomeCardView.Model;

namespace AwesomeCardView.ViewModel
{
    public class CardDataViewModel
    {
        public IList<CardDataModel> CardDataCollection { get; set; }

        public object SelectedItem { get; set; }

        public CardDataViewModel()
        {
            CardDataCollection = new List<CardDataModel>();
            GenerateCardModel();
        }

        private void GenerateCardModel()
        {
            // for (var i = 0; i < 10; i++)
            {
                CardDataCollection = new ObservableCollection<CardDataModel>
                {
                    new CardDataModel
                    {
                     HeadTitle = " 1 day ago   - FaceBook ",

                     HeadLines="Samsung SM-T385S with Android 7.0 gets Wifi certified - GSM Arena News " ,
                     ProfileImage = "Person_7.jpg",
                     HeadLinesDesc = "Facebook is a social networking service launched on February 4........small sample based on your scenario. Please review my project and let us know  ",

                    },



                     new CardDataModel
                    {
                     HeadTitle = " 9 hrs ago   - The Indipendendent",
                     HeadLines="Game of THrones season 7 : Fans think Catelyn's Stark's Ghost was" ,
                     HeadLinesDesc = "The Independent is a British online newspaper.[2]............small sample based on your scenario. Please review my project and let us know",
                   
                     ProfileImage = "Person_2.png"
                     },



                      new CardDataModel
                    {
                    HeadTitle       = " 10 hrs ago  - Power BI Microsoft",
                    HeadLines         ="Announcing the Power BI Solution Tempelate for Azure Activity Log" ,
                     HeadLinesDesc     = "Microsoft Corporation (/ˈmaɪkrəˌsɒft/,[2][3] abbreviated.............small sample based on your scenario. Please review my project and let us know",
                   
                      ProfileImage     = "Person_3.png"
                      },


                       new CardDataModel
                    {
                    HeadTitle = " 13 hrs ago  - MacRumors ",
                      HeadLines    = "MacRumors.com is a website that aggregates Mac and Apple",
                     HeadLinesDesc="Google Rolls Out Anti-Polishing Feature to Gmail on Ios",
                     ProfileImage = "Person_4.jpg"

                       },


                        new CardDataModel
                    {
                    HeadTitle= " 15 hrs ago - Android Authority",
                   HeadLinesDesc  = "If you have read Jules Verne’s Around the World...........small sample based on your scenario. Please review my project and let us know" ,
                     HeadLines="Set it and forget it : 5 Things you should always automate on your phone" ,
                     ProfileImage = "Person_5.jpg"
                        },


                         new CardDataModel
                    {
                      HeadTitle = " 16 hrs ago - MacRumors",
                      HeadLinesDesc = "MacRumors.com is a website that aggregates Mac and Apple related news................small sample based on your scenario. Please review my project and let us know,",
                      HeadLines="Set it and forget it : 5 Things you should always automate on your phone" ,
                      ProfileImage = "Person_1.png"
                         },


                          new CardDataModel
                    {
                     HeadTitle = " 19 hrs ago  - Android Authority",
                      HeadLinesDesc = "MacRumors.com is a website that aggregates Mac and Apple.........small sample based on your scenario. Please review my project and let us know",
                      HeadLines="Set it and forget it : 5 Things you should always automate on your phone" ,
                      ProfileImage = "Person_2.png"
                          },
                   
                 //   AlertColor =  Color.Green : Color.Blue,    This can be added to set alert dialog inside card data model
                };


               
            }
        }
    }
}

Step 5: MainPage.Xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:AwesomeCardView"
             xmlns:view="clr-namespace:AwesomeCardView.View;assembly=AwesomeCardView"
             xmlns:viewModel="clr-namespace:AwesomeCardView.ViewModel;assembly=AwesomeCardView"
             x:Class="AwesomeCardView.MainPage"
             Title="Lets Hack It">
    <ContentPage.BindingContext>
        <viewModel:CardDataViewModel/>
    </ContentPage.BindingContext>

    <StackLayout Orientation="Vertical">
        <Label Text="Google List View"
             VerticalOptions="Start"
             HorizontalTextAlignment="Center"
             VerticalTextAlignment="Center"
             BackgroundColor="Transparent"
             HorizontalOptions="CenterAndExpand" />
        <ListView x:Name="listView" SelectedItem="{Binding SelcetedItem,Mode=TwoWay}" 
              RowHeight="150" 
              ItemsSource="{Binding CardDataCollection}" HasUnevenRows="True"  >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <view:CardViewTemplate/>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

Step6:
MainPage.Xaml.cs
<pre class="code">using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace AwesomeCardView
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }
}
</pre>

Step -7:
Holaaa We are All Done No More Steps :D....

Xamarin Forms StarWars Intro Labels and Attributes [Tutorial 7]

Step1: App.Xaml

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StarWars.App">
<Application.Resources>

        <ResourceDictionary>
             <!--Text Color-->
            <Color x:Key="TextColor">#ffd700</Color> <!--StarwarsIntroColor-->

            <!--  Customized font  -->
            <OnPlatform x:Key="RegularFontFamily" x:TypeArguments="x:String">
                <On Platform="iOS">HelveticaNeue</On>
                <On Platform="Android">sans-serif</On>
            </OnPlatform>
   
            <!--  font sizes  -->
            <x:Double x:Key="TitleFont">20</x:Double>



            <x:String x:Key="WarsText">
                It is a period of civil war.
The Star Wars 
'opening crawl'
is one of the first truly
great things about the 
Star Wars films.

While not an original
movie making concept
(Flash Gordon has that
claim, we believe) it
made the idea very
popular and is these
days is expected as
part of the opening
of every Star Wars film.

Many other works have
sort to emulate or
parody the concept
of the opening words
scroll.

Each crawl's prologue
gives a quick explanation
of the most immediate
events leading up to
the start of the film.

While the text is
crawling up the screen,
John Williams' famous
Star Wars theme is
blasting it's familiar
notes, creating an
attention grabbing
start to the film.

The font of the crawl
has also become quite 
iconic and adopted by
many designers.

Here's the opening
text to each film.
Note the animated
Clone Wars movie
did not have a word
crawl, nor did Rogue One.

 </x:String>


            <!--  styles  -->
            <Style x:Key="TextFontAttributes" TargetType="Label">
                <Setter Property="TextColor" Value="{StaticResource TextColor}" />
         
                <Setter Property="FontFamily" Value="{StaticResource RegularFontFamily}" />
        
                <Setter Property="FontSize" Value="{StaticResource TitleFont}" />
    
            </Style>


        </ResourceDictionary>

 </Application.Resources> 
</Application>

Step2:
App.Xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Xamarin.Forms;

namespace StarWars
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            MainPage = new StarWars.MainPage();
        }

        protected override void OnStart()
        {
            // Handle when your app starts
        }

        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }

        protected override void OnResume()
        {
            // Handle when your app resumes
        }
    }
}

Step3:
MainPage.Xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:StarWars"
             x:Class="StarWars.MainPage">
  <Grid>
        <Image Source="mystars.jpg" Aspect="AspectFill" HorizontalOptions="Fill" VerticalOptions="Fill"/>
        <ScrollView Orientation="Vertical" RotationX="16" Padding="0,700,0,0">
            <Label x:Name="Text" Style="{StaticResource TextFontAttributes}" Text="{StaticResource WarsText}"  HorizontalOptions="Fill" XAlign="Center"/>
        </ScrollView>
    </Grid>
    <!--<ContentPage.Resources>
        <ResourceDictionary>
           
        </ResourceDictionary>
    </ContentPage.Resources>-->
 
</ContentPage>

Step4:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace StarWars
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }
}

Step-5 : Hola!!! our Tutorial Gets Over Thanks For Watching....

Xamarin Forms Cinemax UI Design[Tutorial 6]

Step1: App.Xaml Will Look like:

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="BeutifulUI.App">
<Application.Resources>
        <!-- This are the  Application resource dictionary  -->
        <ResourceDictionary>
            <!--  colors  -->
            <Color x:Key="HeaderTextColor">#555555</Color> <!--Davy grey-->
            <Color x:Key="BodyTextColor">#bababa</Color>   <!--Lightgray-->
           

            <!--  Customized font  -->
            <OnPlatform x:Key="RegularFontFamily" x:TypeArguments="x:String">
                <On Platform="iOS">HelveticaNeue</On>
                <On Platform="Android">sans-serif</On>
            </OnPlatform>

            <OnPlatform x:Key="LightFontFamily" x:TypeArguments="x:String">
                <On Platform="iOS">HelveticaNeue-Light</On>
                <On Platform="Android">sans-serif-light</On>
            </OnPlatform>

            <OnPlatform x:Key="MediumFontFamily" x:TypeArguments="x:String">
                <On Platform="iOS">HelveticaNeue-Medium</On>
                <On Platform="Android">sans-serif-medium</On>
            </OnPlatform>

            <!--  font sizes  -->
            <x:Double x:Key="TitleFont">20</x:Double>
            <x:Double x:Key="BodyFont">18</x:Double>
            <x:Double x:Key="TagTextFont">18</x:Double>
            <x:Double x:Key="StatsNumberFont">20</x:Double>
            <x:Double x:Key="StatsCaptionFont">16</x:Double>
          

            <!--  styles  -->
            <Style x:Key="ProfileNameLabel" TargetType="Label">
                <Setter Property="TextColor" Value="{StaticResource HeaderTextColor}" />   <!--Davy grey-->
                <Setter Property="FontFamily" Value="{StaticResource MediumFontFamily}" /> <!--Medium In Size-->
                <Setter Property="FontSize" Value="{StaticResource TitleFont}" />         <!--20-->

            </Style>

            <Style x:Key="ProfileTagLabel" TargetType="Label">
                <Setter Property="TextColor" Value="{StaticResource BodyTextColor}" />    <!--Lightgray-->
                <Setter Property="FontFamily" Value="{StaticResource RegularFontFamily}" />     <!--Regular-->
                <Setter Property="FontSize" Value="{StaticResource TagTextFont}" />  <!--18-->
            </Style>

            <Style x:Key="StatsNumberLabel" TargetType="Label">
                <Setter Property="TextColor" Value="{StaticResource HeaderTextColor}" />     <!--Davy grey-->
                <Setter Property="HorizontalTextAlignment" Value="Center" />
                <Setter Property="FontFamily" Value="{StaticResource LightFontFamily}" />       <!--light-->
                <Setter Property="FontSize" Value="{StaticResource StatsNumberFont}" />         <!--20-->
            </Style>

            <Style x:Key="StatsCaptionLabel" TargetType="Label">
                <Setter Property="TextColor" Value="{StaticResource BodyTextColor}" />     <!--Lightgray-->
                <Setter Property="Margin" Value="0,-5,0,0" />
                <Setter Property="HorizontalTextAlignment" Value="Center" />
                <Setter Property="FontFamily" Value="{StaticResource LightFontFamily}" />      <!--Light-->
                <Setter Property="FontSize" Value="{StaticResource StatsCaptionFont}" />     <!--16-->
            </Style>
          
        </ResourceDictionary>
    </Application.Resources>
</Application>

Step2: App.Xaml.cs Will Look Like

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Xamarin.Forms;

namespace BeutifulUI
{
 public partial class App : Application
 {
  public App ()
  {
   InitializeComponent();

   MainPage = new MainPage();
  }

  protected override void OnStart ()
  {
   // Handle when your app starts
  }

  protected override void OnSleep ()
  {
   // Handle when your app sleeps
  }

  protected override void OnResume ()
  {
   // Handle when your app resumes
  }
 }
}

Step3: MainPage Will Look Like this

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:BeutifulUI"
             x:Class="BeutifulUI.MainPage"
             BackgroundColor="White">

<ScrollView>
        <Grid ColumnSpacing="0" RowSpacing="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="AUTO" />
                <RowDefinition Height="AUTO" />
                <RowDefinition Height="AUTO" />
                <RowDefinition Height="*" />
                <RowDefinition Height="AUTO" />
            </Grid.RowDefinitions>

            <!--  header background  -->
            <Image Aspect="AspectFill" Source="screen.png" />
            <Image Aspect="Fill" Source="CurvedMask.png" VerticalOptions="End" />

            <!--  profile image  -->
            <Image HeightRequest="100" HorizontalOptions="Center" Source="ic_launcher.png" TranslationY="50" VerticalOptions="End" WidthRequest="100" />

            <!--  Profile Name this will b Included  -->
            <StackLayout Grid.Row="1" Padding="0,50,0,00" HorizontalOptions="Center">
                <Label HorizontalTextAlignment="Center" Style="{StaticResource ProfileNameLabel}" Text="Signed In" />
                <Label Margin="0,-5" HorizontalTextAlignment="Center" Style="{StaticResource ProfileTagLabel}" Text="Star Wars Reviews" />
            </StackLayout>

            <!--  Social Stats Section  -->
            <Grid Grid.Row="2" Margin="0,30" ColumnSpacing="0" RowSpacing="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <StackLayout>
                    <StackLayout.Children>

                        <Image Source="http://bbcpersian7.com/images/facebook-clipart-png-circle-14.jpg" HeightRequest="50" WidthRequest="50"></Image>

                    </StackLayout.Children>

                    <Label Style="{StaticResource StatsNumberLabel}" Text="103" />
                    <Label Style="{StaticResource StatsCaptionLabel}" Text="Likes" />


                </StackLayout>

                <StackLayout Grid.Column="1">

                    <StackLayout.Children>
                        <Image Source="https://lh3.googleusercontent.com/N-AY2XwXafWq4TQWfua6VyjPVQvTGRdz9CKOHaBl2nu2GVg7zxS886X5giZ9yY2qIjPh=w300" HeightRequest="50" WidthRequest="50"></Image>
                    </StackLayout.Children>
                    <Label Style="{StaticResource StatsNumberLabel}" Text="164" />
                    <Label Style="{StaticResource StatsCaptionLabel}" Text="Follow Us" />

                </StackLayout>

                <StackLayout Grid.Column="2">

                    <StackLayout.Children>
                        <Image Source="http://www.movingchurchofgod.org/wp-content/uploads/2015/04/twitter-circle-icon-blue-logo-flat.png" HeightRequest="50" WidthRequest="50"></Image>
                    </StackLayout.Children>
                    <Label Style="{StaticResource StatsNumberLabel}" Text="107" />
                    <Label Style="{StaticResource StatsCaptionLabel}" Text="Tweet Us" />
                </StackLayout>
            </Grid>

        </Grid>
    </ScrollView>
</ContentPage>

Step4: Holla!!!Our Tutorial Is Completed

Xamarin Forms ListView EasyWay[Tutorial 5]

Step1:

Our Human.cs class:

Step2:

Our HumanPage.xaml

Step3:

Our HumanPage.xaml.cs

Step4:

Our MyData1.cs class will Look like this

Step5:

Our HumanViewModels.cs

Step6:

Our App.Xaml.cs

Xamarin Forms MasterDetail Navigation Page Customizable [Tutorial 4]

Step1:Our App.Xaml.cs Will Look Like this:

Step2:Now : Let's create MasterPageItems.cs class inside MenuItems folder:

Step3:Now you can create any Number of View1.Xaml(Pages) For Instance i will take 1:

Step4: 1.You have to create a new MasterDetailPage by adding a new page  and rename it to MainPage.
            2.if  you have previous MainPage then  delete it at first and after that add master detail page  and remove detail page that was created while creating MasterDetailPage.Rename Masterpage to MainPage
**Now Inside MainPage.xaml
Step5:Let us Invoke Some actions Inside Our MainPage.Cs

Step6: Please Note: I have included ViewMain as  random page you can create new page and include it as a main page.
If you like Work please don't forget to give thumps up.
         

Xamarin Guy Show Tutorial - 3 Button Images

Xamarin Forms Customized Button Never Before in XF[Tutorial 17]

Step1:Configure App to Start From Main Page

Step2: DesignYour MainPage

Step3: Create Some Custome Renderer For Android Project To Get Customized Buttons

Finally Run Your XamarinForms project For Android

Xamarin Forms Profile UI Design[Tutorial 16]

This  is a  Small Tutorial Regarding Profile-UI Tutorial 16

Step1: Configure App. Xaml to Start from Main Page

Step2:Design Your MainPage

Step3:Run Your project to Get Expected Output

Or Watch This..


https://www.youtube.com/watch?v=sAFYNL7ArJU

ZoomInZoomOut in XamarinForms [Tutorial 18]

Step1:

MainPage.Xaml

Step2: Xamarin.Cs

Step3: ElementInside XamarinForms

Step4: Custome Renderer Create