Showing Empty Panel on Android and No Canvas is showing to capture Signature

[RameshMajji]

Hi,

I have installed SignaturePad.Forms nuget on PCL/ Platform specific projects, and SignaturePad nuget on Android/ iOS projects. However, SignaturePad is working fine on iOS, but not on Android as its not showing the Canvas panel it self and showing empty panel. When I was going through the references added in Android project, SignaturePad assembly is pointing to the assembly which is installed in ..\packages\Xamarin.Controls.SignaturePad.2.1.0\lib\Xamarin.iOS and not the MonoDroid assmebly.

This problem happens only when you want to use/install SignaturePad control on both iOS and Android platforms. And its only working on one platform and on others its just showing empty panel.

Please let me know the exact issue to correct it or fix it if its a nuget package issue.

Thanks, Ramesh Majji

[MobileRez]

Ramesh,

Is this a Xamarin forms or Xamarin native project with a pcl? Also how are you causing the view to appear ( push or Modal)?

[RameshMajji]

Its a Xamarin.Forms application and defined the SignaturePad control in Xaml page itself.. Following is the code.

<signature:SignaturePadView x:Name="PadView" HeightRequest="120" WidthRequest="520" BackgroundColor="White" CaptionText="Please Sign here" CaptionTextColor="Black" ClearText="" ClearTextColor="White" PromptText="✍" PromptTextColor="Black" SignatureLineColor="Maroon" StrokeColor="Black" StrokeWidth="4" />

Its displaying the SignaturePad control in UWP and iOS fine, but on Android its displaying a white panel which doesn't have any Canvas/ Caption Text/ etc.. attributes.

[MobileRez]

Sorry how are you getting to that xaml page pushaync or pushmodalasync?

[RameshMajji]

I get to the xaml page using navigation module (custom navigation). Is there any restriction for that

[RameshMajji]

And I created a overlay popup for the Signature pad and added two buttons (Save, Clear) along the actual SignaturePad control. This pop-up will be displayed on top of my current Xaml page when I click the button which is on main Xaml page.

[MobileRez]

Ramesh, I am asking if it's push or pushmodal ( or which is it more similar to) as I also have had issues like yours and there is a bug in forms where one method the view does not render things properly. Its happening with the zxing barcode scanner plugin as well. Im also asking so I can compare to the code I have working to see if it's the same method or no ( I'm not at my PC or I'd just tell you which it is)

The reason it's not displaying may also be with how your doing your overlay so I am trying to rule those factors out

[mattleibow]

Another thing that you can check is to make sure that both the SignaturePad NuGets are installed in the Android app.

[RameshMajji]

MobileRez, Following is the Settings Page Xaml code which includes the SignaturePad overlay (content view). On Settings page I have other controls and also a button which triggers the flag for SignaturePad overlay.. SettingsPage is called from a Dashboard page using Navigation module. And I have installed both SignaturePad, SignaturePad.Forms nugets on Android project. Ideally, SignaturePad control should display the canvas and PromptText etc.. on Overlay irrespective of the how its being invoked.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:cont="clr-namespace:Kenny.MMS.Power.Xam.Controls" xmlns:conv="clr-namespace:Kenny.MMS.Power.Xam.Converters" xmlns:signature="clr-namespace:SignaturePad.Forms;assembly=SignaturePad.Forms" xmlns:ef="clr-namespace:Kenny.MMS.Power.Xam.Effects" x:Class="Kenny.MMS.Power.Xam.Views.SettingsPage" BackgroundImage="{Binding BackgroundImageSource}" Title="Material Management System">

<AbsoluteLayout>
    <!-- Normal Page Content -->
    <StackLayout AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
             AbsoluteLayout.LayoutFlags="All">
        <Grid Margin="0" RowSpacing="0">
            <!-- Main Page coding -->
    <!-- Here, I have a button to display the following Signature overlay popup -->
        </Grid>
    </StackLayout>

    <!-- SignatureControlOverlay -->
    <ContentView x:Name="SignatureControlOverlay"
             AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
             AbsoluteLayout.LayoutFlags="All"
             IsVisible="False"
             BackgroundColor="#C0808080"
             Margin="0">
        <ContentView.Triggers>
            <DataTrigger TargetType="ContentView"
                Binding="{Binding ShowSignatureOverlay}" Value ="True">
                <Setter Property="IsVisible" Value="True" />
            </DataTrigger>
        </ContentView.Triggers>
        <StackLayout Style="{StaticResource ContentStackLayoutStyle}"
               Orientation="Vertical"
               BackgroundColor="White"
               WidthRequest="520"
               HorizontalOptions="Center"
               VerticalOptions="Center"
               Margin="15" Padding="0">
            <StackLayout Margin="15" Orientation="Vertical" WidthRequest="520" VerticalOptions="StartAndExpand" HorizontalOptions="CenterAndExpand">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="150" />
                        <RowDefinition Height="50" />
                    </Grid.RowDefinitions>
                    <Frame Grid.Row="0" OutlineColor="{StaticResource Kenny.MediumGray}" HasShadow="False" HorizontalOptions="FillAndExpand" BackgroundColor="{StaticResource Kenny.White}">
                        <signature:SignaturePadView x:Name="PadView"
                            HeightRequest="120" WidthRequest="520"
                            BackgroundColor="White"
                            CaptionText="Please Sign here" CaptionTextColor="Black"
                            ClearText="" ClearTextColor="White"
                            PromptText="✍" PromptTextColor="Black"
                            SignatureLineColor="Maroon" StrokeColor="Black" StrokeWidth="4" />
                    </Frame>
                    <Grid Grid.Row="1">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <!-- Left Side -->
                        <StackLayout Grid.Column="0" Orientation="Horizontal" HorizontalOptions="StartAndExpand">
                            <Button WidthRequest="120" Text="Save" Clicked="OnSave" />
                        </StackLayout>

                        <!-- Right Side -->
                        <StackLayout Grid.Column="1" Orientation="Horizontal" HorizontalOptions="EndAndExpand">
                            <Button WidthRequest="120" Text="Clear" Clicked="OnClear" />
                        </StackLayout>
                    </Grid>
                </Grid>
            </StackLayout>
        </StackLayout>
    </ContentView>
</AbsoluteLayout>

[RameshMajji]

mattelibow,

Yes, I have included both SignaturePad & SignaturePad.Forms nugets on Android/ iOS projects. The things is its perfectly working fine on iOS, but giving trouble on Android.

[MobileRez]

Ramesh,

thanks for sending this page, but it still does not answer my question. the navigation modal you are using eventually has to do either pushmodalasync to display the page or pushasync to display the page. it looks like in the code behind your just setting the signature page on top of the existing layout via the absolute layout settings. am I correct in this?

[RameshMajji]

MobileRez,

I got your question now, and am using PushAsync to show the view in NavService. Let me know if it causes a problem.

await XamarinFormsNav.PushAsync(view, true);

[MobileRez]

@RameshMajji so the signature page that i am using is a ContentPage not a content view, and I am pushing the page from a list view cell with PushAsync.

can you change it from a content view to a content page and see if that changes anything? though given the way your doing it, can you try displaying it not in a content view?

@mattleibow is there any reason with how the content view or in my case what I had tried earlier in my project psushmodalasync not cause the canvas to render? My first though is its something within the content views that forms is having trouble rendering but I cant nail down why that would be (and create a bugzilla report based on said findings)

[RameshMajji]

@MobileRez I even tried on a normal page (Content Page) and its giving the same problem on Android. SignaturePad control is not showing the Canvas and other elements (CaptionText, ClearText at all) and ended up seeing a blank white panel.

[mattleibow]

@RameshMajji I had a look at this, and even using your XAML, I could get the popup to show and the pad visible. There should be no difference between the native renderers and SignaturePad renderers other than the fact that they come from another assembly. Usually when nothing loads at all, it is the case that the renderers were never registered.

You mentioned this:

pointing to the assembly which is installed in ..\packages\Xamarin.Controls.SignaturePad.2.1.0\lib\Xamarin.iOS and not the MonoDroid assembly

I would suggest uninstalling both SignaturePad packages from the Android project - and then make sure that there is no reference to the SignaturePad dlls in the references section. If there are, just remove them. Once the packages are removed, go ahead and re-install them from NuGet.

Here is one of my samples that uses a signature and navigation: https://github.com/mattleibow/SignaturePadWizardDemo.

What I can have a look at is your project files. I don't need the source, but if you can gist the csproj files, I can have a look and see if something pops out.

[RameshMajji]

@mattleibow I uninstalled the nugets in all projects and installed correctly. Again I am getting the same problem with Android. But, I don't see issues on UWP and iOS and the SignaturePad overlay popup is working fine, but not on Android.

I have attached the .cs proj files for PCL, iOS, and Droid in a zip file.. Please have a look at them and see if you find any issues..

Thanks for your help!

cs proj files.zip

[RameshMajji]

@mattleibow @MobileRez I figured out the issue. This issue is happening if we use 2015 Visual Studio. Currently I am using 2015 Visual Studio and got the renderer issues.. But after I upgrade the Visual Studio to 2017, I am not getting the renderer issues for SignaturePad on Android machines.

[mattleibow]

Good to hear that you managed to get it working. It is a bit strange since I did most of my dev in VS2015, and only for the last few commits use VS2017.

Maybe you could try again in VS2015 now that things are working. If it doesn't work still, then there is something else the matter as the IDE shouldn't matter this much. In the case of it not working, you could attach the verbose/diagnostic build log (private email if it sensitive) and I can get to the bottom of this.

[mattleibow]

Closing this issue as it is working. Will re-open if more info indicates a bug.