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.
Related
I'm trying to load street map using Xamarin.Forms.Map plugin in my project for UWP app. For that I have also get the token from MSDN. Here is what I have done:
MapePage.xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:vm="clr-namespace:Map_POC.ViewModels"
xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
xmlns:local="clr-namespace:Map_POC.CustomControls"
x:Class="Map_POC.Views.MapePage">
<ContentPage.BindingContext>
<vm:MapePageViewModel />
</ContentPage.BindingContext>
<ContentPage.Content>
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<maps:Map
x:Name="MyMap"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
MapType="Street" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
MapePage.xaml.cs
public MapePage()
{
InitializeComponent();
Position position = new Position(-37.8141, 144.9633);
var pin = new Pin
{
Type = PinType.Place,
Position = position,
Label = "I'm a Pin",
};
MyMap.Pins.Add(pin);
MyMap.MoveToRegion(
MapSpan.FromCenterAndRadius(
position, Distance.FromMiles(1)));
}
MainPage.xaml.cs (In UWP Solution)
public sealed partial class MainPage
{
public MainPage()
{
this.InitializeComponent();
Xamarin.FormsMaps.Init(Keys.UWPMapToken);
Windows.Services.Maps.MapService.ServiceToken = Keys.UWPMapToken;
LoadApplication(new Map_POC.App());
}
}
Output: With hybrid map it shows map but not showing pin and locations properly.
Other thing apart from this it not works in offline mode, can we cache map for offline mode?
Can we draw a polygon and coordinates covered inside the polygon can be clicked individually or not?
Any help on this will be highly appreciated.
I am trying to create Xamarin form which has an Android rating bar and iOS slider.
Below is the XAML file I am using.
I can see the Label but not able to see the rating bar when I try to run in Android device.
Please help.
<?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"
xmlns:ios="clr-namespace:UIKit;assembly=Xamarin.iOS;targetPlatform=iOS"
xmlns:android="clr-namespace:Android.Widget;assembly=Mono.Android;targetPlatform=Android"
xmlns:androidForms="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.Platform.Android;targetPlatform=Android"
mc:Ignorable="d"
x:Class="XamrineTest.Page1">
<StackLayout BackgroundColor="Green" >
<Label Text="Welcome to Page1!" BackgroundColor="Gray"/>
<ios:UIDatePicker />
<ios:UISlider MaxValue="10" Value="{Binding SlideValue}" />
<ios:UIStepper />
<ios:UISwitch />
<android:RatingBar BackgroundColor="Lavender" HorizontalOptions="Center"
Scale="0.4"
StarCount="5" Step="0.5" Margin="0" SelectedColor="Orange"
HeightRequest="40" UnSelectedColor="LightGray" Rate="{Binding Rating,Mode=TwoWay}">
</android:RatingBar>
</StackLayout>
</ContentPage>
I think there are several problem in your code:
1.the namespace you used is not right, just change to this:
<androidWidget:RatingBar x:Arguments="{x:Static androidLocal:MainActivity.Instance}" >
</androidWidget:RatingBar>
And using following namespacing:
xmlns:androidWidget="clr-namespace:Android.Widget;assembly=Mono.Android;targetPlatform=Android"
2.we also need the following code to init androidWidget:RatingBar
x:Arguments="{x:Static androidLocal:MainActivity.Instance}"
define the Instance in MainActivity of android code:
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
{
internal static MainActivity Instance { get; private set; } // define Instance
protected override void OnCreate(Bundle bundle)
{
TabLayoutResource = Resource.Layout.Tabbar;
ToolbarResource = Resource.Layout.Toolbar;
base.OnCreate(bundle);
Instance = this;// init Instance
global::Xamarin.Forms.Forms.Init(this, bundle);
LoadApplication(new App());
}
}
For more details, you can check:https://learn.microsoft.com/en-us/xamarin/xamarin-forms/platform/native-views/xaml
And this link also includes some useful samples, you can refer to it.
Update:
Yes, you can also use x:Arguments="{x:Static androidForms:Forms.Context}",
and the following code works properly.
<android:RatingBar x:Arguments="{x:Static androidForms:Forms.Context}" NumStars="5" StepSize="1.0" Rating="{Binding Rating,Mode=TwoWay}" />
Note:
The properties as follows you used in RatingBar does not exist.
BackgroundColor="Lavender" HorizontalOptions="Center"
Scale="0.4"
StarCount="5" Step="0.5" Margin="0" SelectedColor="Orange"
HeightRequest="40" UnSelectedColor="LightGray" Rate="{Binding Rating,Mode=TwoWay}"
I try to develop android apps using Xamarin Forms.
There is an input in a webview.When clicked the input , keyboard is displayed.But i can not see what i write.Input is not scrolled up.
XAML and WebViewRenderer contents as below.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:deneme"
">
<ContentPage.Content>
<ScrollView>
<Grid>
<Grid.ColumnDefinitions>.ColumnDefinitions>
<Grid.RowDefinitions>.RowDefinitions>
<local:HybridWebView x:Name="webView" Grid.Row="0" Grid.ColumnSpan="2">
</local:HybridWebView>
<Button Text="Button1" Grid.Column="0" Grid.Row="1"/>
<Button Text="Button2"/>
<Label Text="Hidden"/>
</Grid>
</ScrollView>
</ContentPage.Content>
public class HybridWebViewRenderer : ViewRenderer<HybridWebView, Android.Webkit.WebView>
{
Context _context;
public HybridWebViewRenderer(Context context) : base(context)
{
_context = context;
}
protected override void OnElementChanged(ElementChangedEventArgs<HybridWebView> e)
{
base.OnElementChanged(e);
if (Control == null)
{
var webView = new Android.Webkit.WebView(_context);
webView.ScrollBarFadeDuration = 0;
webView.Settings.JavaScriptEnabled = true;
webView.SetWebViewClient(new JavascriptWebViewClient($"javascript: {JavascriptFunction}"));
SetNativeControl(webView);
}
}
}
In order to set html input position prior keyboard,what should i do ?
You can use Soft Keyboard Input Mode on Android described in the document.
In xaml:
<Application ...
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
android:Application.WindowSoftInputModeAdjust="Resize">
...
</Application>
Or in code behind:
using Xamarin.Forms.PlatformConfiguration;
using Xamarin.Forms.PlatformConfiguration.AndroidSpecific;
...
App.Current.On<Android>().UseWindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Resize);
Refer: keyboard-hides-textarea-inside-a-hybrd-webview-in-xamarin-forms
Take a look here in the Android docs and especially the android:windowSoftInputMode (docs) attribute of activity.
Just add this line to your code
Window.SetSoftInputMode(SoftInput.AdjustPan);
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?
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