Wednesday 25 October 2017

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..

No comments:

Post a Comment