Xamarin Forms Signature Pad - xamarin

Can someone please guide me on how to use a signature pad on xamarin FORMS.
I have tried resources available online, but the dont work in my project.
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:acr="clr-namespace:Acr.XamForms.SignaturePad;assembly=Acr.XamForms.SignaturePad" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Checkin.Signature">
<ContentPage.Content>
<ScrollView>
<StackLayout>
<acr:SignaturePadView
x:Name="padView"
HeightRequest="320"
WidthRequest="240"
BackgroundColor="White"
CaptionText="Caption This"
CaptionTextColor="Black"
ClearText="Clear Me!"
ClearTextColor="Red"
PromptText="Prompt Here"
PromptTextColor="Red"
SignatureLineColor="Aqua"
StrokeColor="Black"
StrokeWidth="2"
/>
</StackLayout>
</ScrollView>
</ContentPage.Content>
Above is one of the codes I have used. A signature pad appears but doesent display anything when I draw on top of it.
This is how the Red Signature pad appears

try to install it on droid project too. that works for me

In the AppDelegate, paste the following code:
public static Type dummyt = typeof(SignaturePad.Forms.iOS.SignaturePadRenderer);
As shown below:
public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
{
public static Type dummyt = typeof(SignaturePad.Forms.iOS.SignaturePadRenderer);
public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
The problem apparently is that some DLLs are not

Related

How to add the ripple effect in Xamarin label or image?

I am looking at implementing a ripple effect on label text or in image.So how to add the ripple effect on any label or in image?
You can use the package TouchView from nuget
Add nuget package to your Xamarin.Forms .netStandard/PCL project and to your platform-specific projects (iOS and Android)
iOS: add TouchViewRenderer.Initialize() line to your AppDelegate
(preserve from linker)
using TouchEffect.iOS;
namespace YourApp.iOS
{
public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
{
public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
global::Xamarin.Forms.Forms.Init();
TouchViewRenderer.Initialize();
LoadApplication(new App());
return base.FinishedLaunching(app, options);
}
}
}
in 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:YourApp"
xmlns:touch="clr-namespace:TouchEffect;assembly=TouchEffect"
x:Class="App11.MainPage">
<StackLayout>
<touch:TouchView
RegularBackgroundColor="LightGray"
PressedBackgroundColor="Gray"
PressedOpacity="1"
PressedAnimationDuration="100"
RegularAnimationDuration="100"
Padding="10, 5"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"
Completed="Handle_TouchCompleted"
>
<Label Text="Click Me"
TextColor="Black"
FontSize="30"/>
</touch:TouchView>
</StackLayout>
</ContentPage>
in code behind
private void Handle_TouchCompleted(TouchEffect.TouchView sender, TouchEffect.EventArgs.TouchCompletedEventArgs args)
{
// do something you want
}
Use XamarinCommunityToolkit Documentation YouTube Resources
In your xaml
xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
Use exactly NativeAnimation
<Frame xct:TouchEffect.NativeAnimation="True"> </Frame>
You can provide ripple and other effects using TouchEffect Library from AndreiMisiukevich.For more info: https://github.com/AndreiMisiukevich/TouchEffect
And another library is also available. https://github.com/mrxten/XamEffects
Both are well documented.

Why I can't find a ResourceDictionary template in my visual studio?

I am a beginner in Xamarin. Now I want to add a ResourceDictionary for making a Theme.
In https://learn.microsoft.com/en-us/dotnet/api/xamarin.forms.resourcedictionary?view=xamarin-forms:
The Namespace of ResourceDictionary is Xamarin.Forms.
Whereas, there is not any ResourceDictionary template.
I tried to search it again:
There is nothing about this. I am using the Visual Studio Community 2019 Version 16.5.4. Why it turns out to be this and how can I solve it?
Thank you.
I think that you are mixing the terms here. Namespaces and assemblies are totally different things than the New item templates inside Visual studio. ResourceDictionary class is inside the Xamarin.Forms, indeed, and in the same time inside the Xamarin.Forms.Core.dll. This doesn't mean that it should be inside the new item template. There are a lot of other classes inside this namespace.
Having said that, you can create ResourceDictionary class in 2 ways:
If you want to write in it entirely in c#, what you will need is a .cs file. The file can be either ContentPage (C#) from the templates above (the second item from your screenshot), or a simple .cs calss file will do the work also. After that, inherit from ResourceDictionary class like so:
public class MyResourceDictionary : Xamarin.Forms.ResourceDictionary
{
}
If you want to write in it in xaml, then simply create a new ContentPage (the first item from your screenshot). Any other type of the combo .xaml together with a .xaml.cs code-behind file will work too. After the files have been created, change their structure from:
MyResoruceDictionary.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="LEUA.Services.MyResourceDictionary">
<ContentPage.Content>
<StackLayout>
<Label Text="Hello, world!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
MyResourceDictionary.xaml.cs
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class MyResourceDictionary : ContentPage
{
public MyResourceDictionary()
{
InitializeComponent();
}
}
to this
MyResoruceDictionary.xaml
<?xml version="1.0" encoding="utf-8"?>
<ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="LEUA.Services.MyResourceDictionary">
</ResourceDictionary>
MyResourceDictionary.xaml.cs
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class MyResourceDictionary : Xamarin.Forms.ResourceDictionary
{
public MyResourceDictionary()
{
InitializeComponent();
}
}

Xamarin Form Animation

I have a simple code that uses ScaleTo method to build a simple animation and the code was working fine up to last Friday and all of the sudden it's not working any more.
Here is my XAML file:
<?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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="TestAnim.MainPage">
<StackLayout Orientation="Vertical">
<Image Source="discount.png" x:Name="img" Scale="0.1"/>
<Button Text="Do" Clicked="doIt"/>
</StackLayout>
</ContentPage>
And here is my C# code:
using System;
using System.ComponentModel;
using Xamarin.Forms;
namespace TestAnim
{
[DesignTimeVisible(false)]
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}
async void doIt (object sender , EventArgs ev)
{
await img.ScaleTo(1, 2000, Easing.BounceOut);
await img.ScaleTo(0.1, 3000, Easing.BounceIn);
}
}
}
When I run the code, I see no effects at all, if I comment the 2nd ScaleTo call I see my image scales to 1 but this happens immediately instead of within 2 seconds! As result when I have the 2nd scale really the end result is no see no animation at all.
This was working fine before as I mentioned but for some reason the duration seems to be ignored and the scaling seems to happen instantly which is the issue here.
Any one else see the same problem?
If you are using Xamarin.Forms version 4.2+ there is currently a bug about Animations, you can track it here.
I've reproduced your code in Xamarin.Forms 4.1.0.581479 and it is working just fine.

how to remove multiple back button from navigation in xamarin?

please help me to sort out following issue.
this is my issue.if push without animation(false)then issue.if animation true then working fine.
// await Navigation.PushAsync<DeleteDealsAndOffersViewModel>(); --> **working fine**
// await Navigation.PushAsync(new DeleteDealsAndOffersViewModel());**working fine**
vm = new DeleteDealsAndOffersViewModel
{
DealsAndOffersList = dealLists,
//CategoryColor = CategoryColor,
IsDelete = true
};
//await Navigation.PushAsync(vm,false); **issue with back button**
I have used following code for back button.this is my base class.
<?xml version="1.0" encoding="UTF-8"?>
<v:ExtendedContentPage
xmlns:v="clr-namespace:Core.Views;assembly=Core"
xmlns="http://xamarin.com/schemas/2014/forms"
LeftBarButtonTitle="< Back"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Vi.Views.BasicV">
<ContentPage.Content>
</ContentPage.Content>
</v:ExtendedContentPage>
now I create another page and set base class on that page
DeleteDealsAndOffersListPage.xaml
<?xml version="1.0" encoding="UTF-8"?>
<view:BasicV
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:view="clr-namespace:Vi.Views;assembly=FlagSpree"
xmlns:sty="clr-namespace:VillageVesl.Styles;assembly=FlagSpree"
xmlns:v="clr-namespace:Core.Views;assembly=Core"
xmlns:comp="clr-namespace:VillageVesl.Views.Components;assembly=FlagSpree"
x:Name="main" Title="{Binding Title}"
LeftBarButtonTitle="Cancel"
BackgroundColor="{x:Static sty:Colors.BGColor}"
x:Class="Vi.Views.DeleteDealsAndOffersListPage">
<ContentPage.ToolbarItems>
<ToolbarItem IsDestructive="true" Text="Delete" Command="{Binding DeleteAllSelectedDealsCommand}" />
</ContentPage.ToolbarItems>
<ContentPage.Content>
</ContentPage.Content>
</view:BasicV>
"DeleteDealsAndOffersListPage.xaml.cs".
namespace Vi.Views
{
public partial class DeleteDealsAndOffersListPage : BasicV
{
public DeleteDealsAndOffersListPage()
{
InitializeComponent();
}
}
}
Now problem is that when I push on DeleteDealsAndOffersListPage then display two back button.
It looks like you are creating your own Back Button. Xamarin will add it's own back button to any page that you push onto a Navigation stack, is that the extra back button you are seeing? If so, before you do the push, add:
NavigationPage.SetHasBackButton(vm, false);

Wrapping an MPVolumeView inside 2 Stack Layouts (Xamarin.IOS)

I am creating a control based on a generic View that works with a custom renderer based on an iOS MPVolumeView, which is the simple control that allows you to select an alternate output route for audio in your app (i.e. Bluetooth Speaker). The code works just fine if I wrap inside a single stack layout, but not if it's inside two stack layouts. My XAML looks like this... very basic:
<?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="DABApp.DabTestPage" xmlns:local="clr-namespace:DABApp;assembly=DABApp">
<ContentPage.Content>
<StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="Red">
<StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" VerticalOptions="FillAndExpand">
<local:AudioOutputView />
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
And here's the guts of my custom renderer:
[assembly: ExportRenderer(typeof(AudioOutputView), typeof(iosAudioOutputViewRenderer))]
namespace DABApp.iOS
{
public class iosAudioOutputViewRenderer: ViewRenderer<AudioOutputView, UIView>
{
MPVolumeView view;
protected override void OnElementChanged(ElementChangedEventArgs<AudioOutputView> e)
{
base.OnElementChanged(e);
if (Control == null)
{
view = new MPVolumeView()
{
ShowsRouteButton = true,
ShowsVolumeSlider = false,
};
SetNativeControl(view);
}
}
}
}
With this XAML and code, when I push the page onto the nav stack async, the page won't even show. If I remove one of the StackLayouts, it works fine.
I changed my IOS control in the CustomRenderer to a simple UILabel and this works fine... so it looks like it has something to do with putting the MPVolumeView inside 2 StackLayouts. I need to be able to do this because of the layout requirements of my app, and it doesn't make any sense why 1 StackLayout is fine, but 2 isn't, and only for this native control.
Any ideas?

Resources