Custom renderer in UWP xamarin

0
votes

I have code which is custom render worked on iOS xamarin form but i want similar for UWP,

using System;
using MobileAssessment.Interface;
using MobileAssessment.iOS;
using MobileAssessment.Pages;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using iOSPlatform = Xamarin.Forms.Platform.iOS.Platform;


[assembly: Xamarin.Forms.Dependency(typeof(ILoadingPageServiceiOS))]
namespace MobileAssessment.iOS
{
    public class ILoadingPageServiceiOS : ILodingPageService
    {
        private UIView _nativeView;
        private bool _isInitialized;


        public void ShowLoadingPage()
        {
            // check if the user has set the page or not
            if (!_isInitialized)
                InitLoadingPage(new LoadingIndicatorPage());  // set the default page

            // showing the native loading page
            UIApplication.SharedApplication.KeyWindow.AddSubview(_nativeView);
        }

        public void HideLoadingPage()
        {
            _nativeView.RemoveFromSuperview();
        }

        public void InitLoadingPage(ContentPage loadingIndicatorPage = null)
        {
            // check if the page parameter is available
            if (loadingIndicatorPage != null)
            {
                // build the loading page with native base
                loadingIndicatorPage.Parent = Xamarin.Forms.Application.Current.MainPage;

                loadingIndicatorPage.Layout(new Rectangle(0, 0,
                    Xamarin.Forms.Application.Current.MainPage.Width,
                    Xamarin.Forms.Application.Current.MainPage.Height));
                var renderer = loadingIndicatorPage.GetOrCreateRenderer();
                 _nativeView = renderer.NativeView;
                _nativeView.BackgroundColor = UIColor.Black;
                _nativeView.Alpha = (System.nfloat)0.7;
                _isInitialized = true;
            }
        }

    }


    internal static class PlatformExtension
    {
        public static IVisualElementRenderer GetOrCreateRenderer(this VisualElement bindable)
        {
            var renderer = iOSPlatform.GetRenderer(bindable);
            if (renderer == null)
            {
                renderer = iOSPlatform.CreateRenderer(bindable);
                iOSPlatform.SetRenderer(bindable, renderer);
            }
            return renderer;
        }
    }
}

I have tried below code for UWP,

using System;
using MobileAssessment.Interface;
using MobileAssessment.UWP;
using MobileAssessment.Pages;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.UWP;
using uwpPlatform = Xamarin.Forms.Platform.UWP.Platform;

[assembly: Xamarin.Forms.Dependency(typeof(ILoadingPageServiceRenderer))]
namespace MobileAssessment.UWP
{
    public class ILoadingPageServiceRenderer : ILodingPageService
    {
        private View _nativeView;
        private bool _isInitialized;


        public void ShowLoadingPage()
        {
            // check if the user has set the page or not
            if (!_isInitialized)
                InitLoadingPage(new LoadingIndicatorPage());  // set the default page

            // showing the native loading page
            Application.SharedApplication.KeyWindow.AddSubview(_nativeView);
        }

        public void HideLoadingPage()
        {
            _nativeView.RemoveFromSuperview();
        }

        public void InitLoadingPage(ContentPage loadingIndicatorPage = null)
        {
            // check if the page parameter is available
            if (loadingIndicatorPage != null)
            {
                // build the loading page with native base
                loadingIndicatorPage.Parent = Xamarin.Forms.Application.Current.MainPage;

                loadingIndicatorPage.Layout(new Rectangle(0, 0,
                    Xamarin.Forms.Application.Current.MainPage.Width,
                    Xamarin.Forms.Application.Current.MainPage.Height));
                var renderer = loadingIndicatorPage.GetOrCreateRenderer();
                 _nativeView = renderer.NativeView;
                _nativeView.BackgroundColor = Color.Black;
                _nativeView.Alpha = (System.nfloat)0.7;
                _isInitialized = true;
            }
        }

    }


    internal static class PlatformExtension
    {
        public static IVisualElementRenderer GetOrCreateRenderer(this VisualElement bindable)
        {
            var renderer = uwpPlatform.GetRenderer(bindable);
            if (renderer == null)
            {
                renderer = iOSPlatform.CreateRenderer(bindable);
                uwpPlatform.SetRenderer(bindable, renderer);
            }
            return renderer;
        }
    }
}

The above code actually for activity indicator got from https://github.com/UdaraAlwis/Xamarin-Playground/tree/master/XFLoadingPageService

But forum not sharing same solution for UWP, so i create my code for windows.

2
xamarinxamarin.formsxamarin.iosxamarin.uwp

2 Answers

0
votes

If you are looking for a "FullScreen loading" style, you can also use a ControlTemplate and bind it to the specific pages.

you can do it like this:

<Color x:Key="AccentColor">#ABDEBE</Color>

<ControlTemplate x:Key="FullScreenLoadingTemplate">
    <AbsoluteLayout>

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

        <ContentView
            AbsoluteLayout.LayoutFlags="All"
            AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
            BackgroundColor="#80FFFFFF"
            IsVisible="{TemplateBinding BindingContext.IsBusy}">

            <ActivityIndicator
                HorizontalOptions="Center"
                IsRunning="{TemplateBinding BindingContext.IsBusy}"
                VerticalOptions="Center"
                Color="{StaticResource AccentColor}" />

        </ContentView>

    </AbsoluteLayout>
</ControlTemplate>

and the page binding:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:d="http://xamarin.com/schemas/2014/forms/design"

         ControlTemplate="{StaticResource FullScreenLoadingTemplate}"
         Title="{Binding Title}"
         IsBusy="{Binding IsBusy}"
         x:Class="TestApp.Mobile.Pages.TestPage">... </ContentPage>
0
votes

After all i failed to write same code for Window platform. So i made solution using Rg.Plugins.Popup.Pages plugin.

App global loader indicator xaml file,

<?xml version="1.0" encoding="UTF-8"?>
<pages:PopupPage  xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
                  xmlns="http://xamarin.com/schemas/2014/forms"
                  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                  xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
                  x:Class="MobileAssessment.Pages.AppGlobalLoader">
    <ContentPage.Content>
        <telerikPrimitives:RadBusyIndicator x:Name="BusyIndicator"
                                        VerticalOptions="FillAndExpand" 
                                       HorizontalOptions="FillAndExpand" 
                                       AnimationContentHeightRequest="100"
                                       AnimationContentWidthRequest="100"
                                       AnimationType="Animation8"
                                       AnimationContentColor="Teal"
                                       IsBusy="True"
                                       BackgroundColor="Black"
                                       Opacity="0.7">
        <telerikPrimitives:RadBusyIndicator.Content>
             <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Opacity="0.7">
             </StackLayout>
               </telerikPrimitives:RadBusyIndicator.Content>
            </telerikPrimitives:RadBusyIndicator>
    </ContentPage.Content>

</pages:PopupPage>

App global loader cs file

using System;
using System.Collections.Generic;
using Rg.Plugins.Popup.Pages;
using Xamarin.Forms;

namespace MyApp.Pages
{
    public partial class AppGlobalLoader : PopupPage
    {
        public AppGlobalLoader()
        {
            InitializeComponent();
        }
    }
}

I create two methods show and hide popup in base navigator class,

public async Task showLoader()
{
    isPopupOpen = true;
    AppGlobalLoader theAppGlobalLoader = new AppGlobalLoader();            
    await _Navigation?.PushPopupAsync(theAppGlobalLoader);
}

public async Task hideLoader()
{
    if (isPopupOpen)
    {
        await _Navigation?.PopPopupAsync(true);
    }
}

Now i using above methods in long running task,

async Task ExecuteAndSave()
    {
        if (ValidateFields())
        {
            await base.showLoader();

            //Your long ruuning task dealing with server and saving stuff in database
            await base.hideLoader();
            await App.Current.MainPage.DisplayAlert("Successful", "Created", "Ok");
            await ExecuteBackCommand();
        }
    }