Search This Blog

Friday 27 November 2020

Xamarin Form Custom Loading Bar Control



CustomControl Creation.
LoaderControl.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="CustomLoaderControl.CustomControl.LoaderControl">
  <ContentView.Content>
        <StackLayout BackgroundColor="Transparent" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
            <ActivityIndicator x:Name="activityIndicator"  IsRunning="True" />
            <Label x:Name="indicatorLabel" VerticalTextAlignment="Center"   FontAttributes="Bold"  HorizontalTextAlignment="Center" Text="Please wait.." />
        </StackLayout>
    </ContentView.Content>
</ContentView>
LoaderControl.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 CustomLoaderControl.CustomControl
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class LoaderControl : ContentView
    {
        #region Indicator Color 
        public static readonly BindableProperty IndicatorColorProperty = BindableProperty.Create(
         propertyName: nameof(IndicatorColor),
         returnType: typeof(Color),
         declaringType: typeof(LoaderControl),
         defaultValue: null,
         defaultBindingMode: BindingMode.TwoWay,
         propertyChanged: IndicatorColorPropertyChanged);
 
        private static void IndicatorColorPropertyChanged(BindableObject bindable, object oldValue, object newValue)
        {
            var control = (LoaderControl)bindable;
            if (newValue != null)
            {
                control.activityIndicator.Color = (Color)newValue;
            }
        }
        public Color IndicatorColor
        {
            get => (Color)GetValue(IndicatorColorProperty);
            set { SetValue(IndicatorColorProperty, value); }
        }
        #endregion
 
        #region Indicator Text Color
        public static readonly BindableProperty IndicatorTextColorProperty = BindableProperty.Create(
       propertyName: nameof(IndicatorTextColor),
       returnType: typeof(Color),
       declaringType: typeof(LoaderControl),
       defaultValue: null,
       defaultBindingMode: BindingMode.TwoWay,
       propertyChanged: IndicatorTextColorPropertyChanged);
 
        private static void IndicatorTextColorPropertyChanged(BindableObject bindable, object oldValue, object newValue)
        {
            var control = (LoaderControl)bindable;
            if (newValue != null)
            {
                control.indicatorLabel.TextColor = (Color)newValue;
            }
        }
        public Color IndicatorTextColor
        {
            get => (Color)GetValue(IndicatorTextColorProperty);
            set { SetValue(IndicatorTextColorProperty, value); }
        }
        #endregion
 
        #region Indicator Text
        public static readonly BindableProperty IndicatorTextProperty = BindableProperty.Create(
       propertyName: nameof(IndicatorText),
       returnType: typeof(string),
       declaringType: typeof(LoaderControl),
       defaultValue: "Loading",
       defaultBindingMode: BindingMode.TwoWay,
       propertyChanged: IndicatorTextPropertyChanged);
 
        private static void IndicatorTextPropertyChanged(BindableObject bindable, object oldValue, object newValue)
        {
            var control = (LoaderControl)bindable;
            if (newValue != null)
            {
                control.indicatorLabel.Text = (string)newValue;
            }
        }
        public string IndicatorText
        {
            get => (string)GetValue(IndicatorTextProperty);
            set { SetValue(IndicatorTextProperty, value); }
        }
        #endregion
        public LoaderControl()
        {
            InitializeComponent();
        }
    }
}


CustomControl Implementation

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:customcontrol="clr-namespace:CustomLoaderControl.CustomControl"
             x:Class="CustomLoaderControl.MainPage">
 
    <StackLayout Spacing="20">
        <Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0">
            <Label Text="Custom Loader Control!" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
        </Frame>
        <customcontrol:LoaderControl IndicatorColor="Red" IndicatorTextColor="Black" IndicatorText="Loader1 Loading..." />
        <customcontrol:LoaderControl IndicatorColor="Green" IndicatorTextColor="DarkCyan" IndicatorText="Loader2 Loading..." />
        <customcontrol:LoaderControl IndicatorColor="LightBlue" IndicatorTextColor="Black" IndicatorText="Loader3 Loading..." />
        <customcontrol:LoaderControl IndicatorColor="Gray" IndicatorTextColor="Red" IndicatorText="Loader3 Loading..." />
        <customcontrol:LoaderControl IndicatorColor="Blue" IndicatorTextColor="Black" IndicatorText="Loader3 Loading..." />
    </StackLayout>
</ContentPage>
 


App.xaml.cs
using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
 
namespace CustomLoaderControl
{
    public partial class App: Application
    {
        public App()
        {
            InitializeComponent();
 
            MainPage = new MainPage();
        }
 
        protected override void OnStart()
        {
        }
 
        protected override void OnSleep()
        {
        }
 
        protected override void OnResume()
        {
        }
    }
}
 

No comments:

Post a Comment

Popular Posts