I'm trying to use the Windows.Media.Playback MediaPlayer. I am attempting to follow the information here Play audio and video with MediaPlayer. I am able to hear the audio of a video by calling it from C#.
public MainPage()
{
InitializeComponent();
var mediaPlayer = new MediaPlayer();
mediaPlayer.Source = MediaSource.CreateFromUri(new Uri("https://sec.ch9.ms/ch9/5d93/a1eab4bf-3288-4faf-81c4-294402a85d93/XamarinShow_mid.mp4"));
mediaPlayer.Play();
}
However, when I attempt to add a MediaPlayerElement in XAML I get an 'MediaPlayerElement' cannot be added to a collection or dictionary of type 'IList'1'. error
<?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:controls="clr-namespace:Windows.UI.Xaml.Controls;assembly=Windows.Foundation.UniversalApiContract"
x:Class="XamarinTest.MainPage">
<StackLayout>
<controls:MediaPlayerElement x:Name="_mediaPlayerElement" AreTransportControlsEnabled="False" HorizontalAlignment="Stretch" Grid.Row="0"/>
</StackLayout>
</ContentPage>
If I remove the StackLayout and have the MediaPlayerElement directly in the Content I get a 'Content' does not support values of type 'MediaPlayerElement'.
I saw this question so I assume I'm missing some kind of DLL or reference but I am unable to locate what reference would be needed.
You are trying to apply UWP controls to a cross platform Xamarin Forms project
Windows.Media.Playback is only for Windows, and would not work on Android or iOS. There are techniques you can use to include platform specific controls in a Xamarin project, or you can use a cross-platform control like MediaElement
Related
i have a Xamarin ListView with images from internet. I would to show a default image (from embedded resource), and, when present, the image from an url.
I've tryied with this code but works only with UriImageSource, not for the embedded resource:
<ListView ItemsSource="{Binding Data}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Image>
<Image.Source>
<!-- does not works
<ImageSource>
{utils:ImageResource Namespace.Assets.img-placeholder.png}
</ImageSource>
-->
<UriImageSource Uri="{Binding ImageUri}"></UriImageSource>
</Image.Source>
</Image>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
if i use
<Image Source="{utils:ImageResource Namespace.Assets.img-placeholder.png}" />
this works showing the embedded resource default image
The model:
public Uri ImageUri => Image != null ?
new Uri($"http://www.example.com/{Image}")
: null;
Any help? Thanks
You can use FFImageLoading library.
According to its documentation:
LoadingPlaceholder
ImageSource property. If set, a loading placeholder is shown while
loading. It supports UriImageSource, FileImageSource and
StreamImageSource.
ErrorPlaceholder
ImageSource property. If set, if error occurs while loading image, an
error placeholder is shown. It supports UriImageSource,
FileImageSource and StreamImageSource.
You don't have to make it that complicated. From your viewmodel you simply provide a string ImageUri and bind it to Image.Source
<Image Source="{Binding ImageUri}" />
this works for images from the web as well as resources, but they have to live in your platform projects. For Android you'll have to put them to Resources\drawable (or the respective folders for other resolutions) and set the build action to AndroidResource, for iOS to Resources (in different sizes with the #2x, #3x suffices, e.g. img-placeholder#2x.png) and set the build action to bundle resource. You can now set the placeholder from your viewmodel:
if(!HasRemoteImage(response))
{
ImageUri = "img-placeholder.png";
}
Xamarin.Forms will create the ImageSource automatically for you.
One main advantage over resources you load directly is, that you don't have to care which image is the right one for the current resolution. Xamarin/Xamarin.Forms does that automatically for you.
I'm using the nugget package SVG.Forms.Plugin.Abstractions, I have copied the XAML below from a simple example but cannot get the SVG to show.
The image is in an 'images' folder within the 'TestApp' application and it's build action is 'Embedded Resource'. SvgAssebly is bound to the public assembly below in the viewModel.
All I get is a blank screen with the title text at the top.
Can anyone see anything obviously wrong?
public Assembly SvgAssembly
{
get { return typeof(App).GetTypeInfo().Assembly; }
}
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="TestApp.MainPage"
xmlns:artina="clr-namespace:UXDivers.Artina.Shared;assembly=UXDivers.Artina.Shared"
xmlns:local="clr-namespace:TestApp;assembly=TestApp" Title="{ artina:Translate PageTitle}" BackgroundColor="{DynamicResource BasePageColor}"
xmlns:abstractions="clr-namespace:SVG.Forms.Plugin.Abstractions;assembly=SVG.Forms.Plugin.Abstractions">
<ContentPage.Content>
<StackLayout>
<abstractions:SvgImage
SvgAssembly="{Binding SvgAssembly }"
SvgPath="TestApp.images.brand.svg"
Width="200"
Height="200" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
Just a note :
remove the spacing from your binding :
SvgAssembly="{Binding SvgAssembly }"
You should be referencing the image like this :
SvgPath="brand.SVG"
You need to make sure you are referencing the image correctly :
my answer from another question here.
Try using FFImageLoading as it has an option to use SVG images. It also has the option to cache images on the user's device. Find the documentation below:
https://github.com/luberda-molinet/FFImageLoading/wiki/Xamarin.Forms-API
I'm currently learning Xamarin and I get figure out why the ResourceId isn't returning the image in my project. I just get a blank page. App.xaml.cs has MainPage set to the ImagePage.XAML below so that's not the issue. I made the resource ID set to the path of folders, but nothing.
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:HelloWorld.MarkupExtensions;assembly=HelloWorld.Android"
x:Class="HelloWorld.ImagePage">
<!--
<ActivityIndicator IsRunning ="{Binding Source={x:Reference Image}, Path=IsLoading}" AbsoluteLayout.LayoutBounds="0.5, 0.5, 100, 100" AbsoluteLayout.LayoutFlags="PositionProportional" Color="#428bca" />
-->
<Image x:Name="Image" Aspect="AspectFill"/>
</ContentPage>
XAML.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace HelloWorld
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class ImagePage : ContentPage
{
public ImagePage ()
{
InitializeComponent ();
Image.Source = ImageSource.FromResource("HelloWorld.Images.background.jpg");
}
}
}
Local Images
Image files can be added to each application project and referenced from Xamarin.Forms shared code. To use a single image across all apps, the same filename must be used on every platform, and it should be a valid Android resource name (ie. only lowercase letters, numerals, the underscore, and the period are allowed).
Here you have the official documentation explaining how to use local Images in Xamarin Forms.
Edit
Did you forgot the dot between Images and Background. HelloWorld.Images.background.jpg instead of HelloWorld.Imagesbackground.jpg ?
I created app with Xamarin Forms for Windows Phone 8.1(RT). I updated XF to last version 2.3.4.231. My app in run to:
-windows phone 8.1 device
-windows phone 8.1 emulator
-mobile emulator 10.0.14393(x86)
It work is ok.
But when I running app to Windows 10 device(arm) I have many exception. I try different start pages and get mane exceptions(from xaml):
-Cannot assign property \"ColumnDefinitions\": Property does not exists, or is not assignable, or mismatching type between value and property"
-StaticResource not found for key ...
-An item with the same key has already been added
All these errors are related to xaml.
I do not use XamlCompilationOptions.Compile.
Last working version XF for my app 2.3.2.127
This small example:
I changed start page. I have exception:
-StaticResource not found for key StandardPadding
This is part of my page:
<StackLayout Padding="{StaticResource StandardPadding}">
My resource in App.xaml:
<Application.Resources>
<ResourceDictionary>
<Thickness x:Key="StandardPadding">16</Thickness>
</ResourceDictionary>
</Application.Resources>
I solved this problem. The error was in my xaml code. Xamarin Forms 2.3 not supported Windows OnPlatform in xaml. So I used this extension:
public class XOnPlatform<T> : OnPlatform<T>
{
public T Windows { get; set; }
public static implicit operator T(XOnPlatform<T> onPlatform)
{
if (Device.OS == TargetPlatform.Windows)
{
return onPlatform.Windows;
}
return (OnPlatform<T>)onPlatform;
}
}
I used this class in my xaml code. But in XF 2.3.4 Device.OS is obsolete. I removed XOnPlatform from my xaml code. I use OnPlatform in my xaml code.This is work. Bingo :)
I just started a Xamarin.Forms application and I want to add a background image to my XAML.
I added the attribute but it does not appear when I run it!!
Here is the images.
APP
public class App : Application
{
public App()
{
// The root page of your application
MainPage = new Page();
}
XAML:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="App1.Page"
BackgroundImage="bg.png">
SO, how do I fix it?
Add your bg.png file in each of your native projects, since you are currently using a Android emulator start with your Xamarin.Android project:
Android - Place images in the Resources/drawable directory with Build Action: AndroidResource
ref: https://developer.xamarin.com/guides/xamarin-forms/working-with/images/
Example: In your Xamarin.Android project, add bg.png as shown:
Check the Build Action of that image and ensure that it is assigned AndroidResource. Rebuild and re-test.
In Xamarin.forms
The images should be placed in the following folders
iOS, Android - Resources folder
Windows/UWP, Windows Phone - Assets folder
Then the build action(rt click img->properties) of the images should be changed as follows
iOS - BundleResource Windows Phone - Content
Android - AndroidResource Windows/UWP - Content
If Still the image is not displayed, try changing the Copy to Output Directory to Copy if newer in image Properties
If you want to add background image in XAML file for the entire page in Xamarin project, then use the BackgroundImage property and add your image to the Android project under Resources -> drawable folder and for iOS Resources folder.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:PhoneDailerDemo"
x:Class="PhoneDailerDemo.MainPage"
BackgroundImage="image3.jpg">
<Label Text="Welcome to Xamarin Forms!"
VerticalOptions="Center"
HorizontalOptions="Center" />
<StackLayout Padding="100">
//..........
</StackLayout>
</ContentPage>
Reducing the size of the image worked for me.
Another way (source) you can achieve this, is by setting the image's build action (in file properties) as Embedded Resource.
Then, using a converter markup-extension you will be able to use it directly in XAML and won't have to copy or link the files in each platform specific project.
Here's the converter you should add to you portable project:
[ContentProperty(nameof(Source))]
public class ImageResourceExtension : IMarkupExtension
{
static readonly Assembly CurrentAssembly =
typeof(ImageResourceExtension).GetType().Assembly;
public const string Assets = nameof(Assets);
public string Source { get; set; }
public object ProvideValue(IServiceProvider serviceProvider)
{
if (string.IsNullOrWhiteSpace(Source))
return null;
// Do your translation lookup here, using whatever method you require
var source = $"{CurrentAssembly.GetName().Name}.{Assets}.{Source}";
var imageSource = ImageSource.FromResource(source, CurrentAssembly);
return imageSource;
}
}
Then in your 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:WorkingWithImages;assembly=WorkingWithImages"
x:Class="WorkingWithImages.EmbeddedImagesXaml">
<Image Source="{local:ImageResource Background.jpg}"}
</ContentPage>
Image files can be added to each application project and referenced from Xamarin.Forms shared code. To use a single image across all apps, the same filename must be used on every platform, and it should be a valid Android resource name (ie. only lowercase letters, numerals, the underscore, and the period are allowed).
iOS - Place images in the Resources folder with Build Action: BundleResource . Retina versions of the image should also be supplied - two and three times the resolution with a #2x or #3x suffixes on the filename before the file extension (eg. myimage#2x.png).
Android - 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 ).
Windows Phone - Place images in the application's root directory with Build Action: Content .
Windows/UWP - Place images in the application's root directory with Build Action: Content .
You can read more at Working with Images
Loading and displaying images in Xamarin.Forms