WebView video in xaml Does not play correctly - c#

When I open the Binding url in a web view the video plays just the audio not the visuals on the emulator and my phone.
When I open the Binding url on my pc and phone it works fine.
Any idea how to fix it?
<?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="WiscOnline.Mobile.ViewLearningItem"
Title="{Binding LearningItem.Name}">
<WebView x:Name="webView"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Source="{Binding CurrentSource}" />
<StackLayout>
<Label Text="{Binding LearningItem.ViewUrl}" FontSize="19"></Label>
</StackLayout>
<WebView Source="{Binding LearningItem.ViewUrl}" ></WebView>
</ContentPage>

This issue is with Android and it's WebView and not specifically with Xamarin. Different versions of Android will support different WebView features. Video playback is particularly bad in a WebView.
A better option would be to use the native video player for each platform or to at least use the native video player on Android.
You could either use a handy plugin/component for this like this one (I have not ever tried that one but saw it was recommended by others) or you could try and roll one yourself by using the native Android VideoView.
A Xamarin Forms thread about this very issue and using the VideoView can be found here.

Related

How to set size of Xamarin Community Toolkit Popup to wrap content dynamically in Xamarin Forms?

I have a Xamarin.CommunityToolkit - Popup. I don't want to predefine its size. I want it to size according to the content dynamically. Is there any way to achieve this?
Here is my XAML code:
<?xml version="1.0" encoding="UTF-8"?>
<xct:Popup xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
x:Class="SampleProject.Views.SamplePopup">
<StackLayout>
<Label Text="Hello Xamarin.Forms!" />
<Button Text="Close Popup" Clicked="ClosePopup" />
</StackLayout>
</xct:Popup>
The current implementation doesn't support such feature, as Amjad mentioned in his comment there was a similar feature request in the past but it was closed as things were migrating to the new repo .NET MAUI community toolkit.
If you are interested you can open a discussion explaining or pointing to the link of that feature request.

How to set background image of ContentPage in Xamarin

I am trying to set a background image on my Xamarin app.
I saw already Xamarin Forms ContentPage background image tiling article.
At that code, has set a background image from the URL.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="SuperForms.Samples.Page1">
<ContentView>
<Image Source="https://i.stack.imgur.com/ajyCo.png"
Aspect="AspectFill"/>
</ContentView>
</ContentPage>
I want to set from local Resources. So I have modified the XAML file like the following code. But It doesn't work. How to should I fix the following code.
I want to set the background image via only the XAML file. not via C# code.
MainPage.xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="SuperForms.Samples.Page1">
<ContentView>
<Image Source="Image/background.png"
Aspect="AspectFill"/>
</ContentView>
</ContentPage>
This is my Xamarin solution structure.
I want to build my app on Android, iOS, and Windows.
Please let me know in detail because I am a beginner at Xamarin.
Best regards.
According to xamarin document:
Image files can be added to each application project and referenced
from Xamarin.Forms shared code. This method of distributing images is
required when images are platform-specific, such as when using
different resolutions on different platforms, or slightly different
designs.
And on andriod.Place images in the Resources/drawable directory with Build Action: AndroidResource. High- and low-DPI versions of an image can also be supplied (in appropriately named Resources subdirectories such as drawable-ldpi, drawable-hdpi, and drawable-xhdpi).
see the link below:
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/images?tabs=windows

Why does my lottie animation doesn't show in Xamarin Forms?

I followed a tutorial and for some reason my lottie animation is not being shown when I test on Android device.
Package Com.Airbnb.Lottie.Forms was added to all app projects (it's crossplatform)
Then added Com.Airbnb.Android.Lottie to the Android app (first I tried without it, didn't work either)
This is the code
<?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:lottie="clr-namespace:Lottie.Forms;assembly=Lottie.Forms"
x:Class="AppWasher.MainPage">
<StackLayout>
<lottie:AnimationView
x:Name="animationView"
Animation="26617-ogad.json"
RepeatMode="Restart"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
WidthRequest="300"
HeightRequest="300"/>
</StackLayout>
</ContentPage>
This is the guide lottie provides
<forms:AnimationView
x:Name="animationView"
Animation="LottieLogo1.json"
AnimationSource="AssetOrBundle"
Command="{Binding ClickCommand}"
RepeatCount="3"
RepeatMode="Restart"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand" />
I tried using all those properties too, same result.
I'm testing on Android 9.0 version
Also json files were added to the assets folder in the android project and build action is set to AndroidAsset
It works for me after i change the android Target Framework version to Android 10.0.
And i found the latest Lottie nuget depends on AndroidX.

How to display a popup window on Xamarin

I am very new to Xamarin, so please excuse me for my simple questions.
Like the alert window on the screen, I want to open a second window that can be resized and positioned. Despite all my calls, I couldn't get it.
An absolute style div for those who know html.
Thanks in advance to friends who can give me an idea of how I can do it.
I think what you're looking for is a "Popup". It can be done by hand, but I recommend using a library like this one. It lets you customize your Popups however you want by creating custom pages for them, like this:
<?xml version="1.0" encoding="utf-8" ?>
<pages:PopupPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
x:Class="MyProject.MyPopupPage">
<!--You can set an animation in the xaml file or in the csharp code behind-->
<pages:PopupPage.Animation>
<animations:ScaleAnimation
PositionIn="Center"
PositionOut="Center"
ScaleIn="1.2"
ScaleOut="0.8"
DurationIn="400"
DurationOut="300"
EasingIn="SinOut"
EasingOut="SinIn"
HasBackgroundAnimation="True"/>
</pages:PopupPage.Animation>
<!--You can use any elements here which are extended from Xamarin.Forms.View-->
<StackLayout
VerticalOptions="Center"
HorizontalOptions="Center"
Padding="20, 20, 20, 20">
<Label
Text="Test"/>
</StackLayout>
</pages:PopupPage>
If you want Popups that cover the whole screen, you can use modal pages, which are built into Xamarin. Check it here.

where to put images for xamarin forms application

I am developing an application for Android, iOS and Visual Studio using Xamarin
I added the following lines in xaml to use images:
<Image Source="header.png" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" />
<Button x:Name="Object_Detection" Image="header.png" />
The first is for displaying an image in the header and the second is for displaying a button icon. They link for the same image "header.png"
I put the image under:
- Mobile.Droid\Resources\drawable
- Mobile.iOS\Resources
-Mobile.Windows\Assets
But the image is not shown at all in the Windows 8.1 app.
the image size is 690*79.
how to resolve the problem?
You have to place images in the root Project directory for Windows Phone 8, Windows Phone 8.1 and UWP applications.
This guide will help you
http://developer.xamarin.com/guides/xamarin-forms/working-with/images
Try something like this :
<ContentPage.Resources>
<ResourceDictionary>
<OnPlatform x:Key="ImageHeaders"
x:TypeArguments="ImageSource"
iOS="header.png"
Android="header.png"
WinPhone="Assets/header.png" />
</ResourceDictionary>
</ContentPage.Resources>
<Image Source="{StaticResource ImageHeaders}" />
OR
<Image.Source>
<OnPlatform x:TypeArguments="ImageSource">
<OnPlatform.iOS><FileImageSource File="header.png"/></OnPlatform.iOS>
<OnPlatform.Android><FileImageSource File="header.png"/></OnPlatform.Android>
<OnPlatform.WinPhone><FileImageSource File="Assets/header.png"/></OnPlatform.WinPhone>
</OnPlatform>
</Image.Source>
Not tested, but it seems to work well.
Thanks for all your posts,
the solution was to add the image resource to the windows sub-project directly under the root.
The addition should be made using visual studio so that the image will be taken in consideration by the compiler.

Categories