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
Related
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.
I'm fairly new to Xamarin.Forms. I've been writing a cross-platform application for mobiles and Desktop (UWP and WPF) that shares the same UI, except for some native controls that are only rendered for the Desktop App.
In particular, I would like to include a MenuBar (UWP) or a Menu (WPF), for the desktop app to resemble more traditional application.
I've been trying to use a native view as in https://learn.microsoft.com/es-es/xamarin/xamarin-forms/platform/native-views/xaml, but so far with no success.
The code for my XAML file is something like this:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="SubclassedNativeControls.SubclassedNativeControlsPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:winControls="clr-namespace:Windows.UI.Xaml.Controls;assembly=Windows, Version=255.255.255.255, Culture=neutral, PublicKeyToken=null, ContentType=WindowsRuntime;targetPlatform=Windows">
<ContentView x:Name="MenuContent">
<winControls:MenuBar>
<winControls:MenuBarItem Title="File">
<winControls:MenuFlyoutItem Text="New" />
<winControls:MenuFlyoutItem Text="Open" />
<winControls:MenuFlyoutItem Text="Edit" />
</winControls:MenuBarItem>
</winControls:MenuBar>
</ContentView>
</ContentPage>
But then an exception is thrown:
Can not set the content of winControls:MenuBarItem as it doesn't have a ContentPropertyAttribute'
I've also tried to access the MenuBar using the codeview that contains the MenuBar, and populate it from the C# side, but then nothing is rendered in the UWP app:
#if WINDOWS_UWP
// MenuBarItem creation
MenuBarItem menuBarItem = new MenuBarItem{ Title = "File"};
menuBarItem.Items.Add(new MenuFlyoutItem(){ Text = "New"});
menuBarItem.Items.Add(new MenuFlyoutItem(){ Text = "Open"});
// Access to the menuBar
var menuContent = (Xamarin.Forms.Platform.UWP.NativeViewWrapper)MenuContent.Content;
var menubarControl = (Windows.UI.Xaml.Controls.MenuBar)menuContent.NativeElement;
menubarControl.Items.Add(menuBarItem);
#endif
I'm aware that it is possible to use menuBars as in Xamarin.Forms: Platform-indepenent application menu, but since I'm requiring a WPF application too (using Xamarin.Forms.WPF) a native view seems looks like the most interesting approach.
I think that problem is that as said in this post you cannot use Menubar directly. You should better create a platform specific renderer and bring it to the Shared project with Dependency Injection and use it like that. See the post for more details.
I am trying the Xamarin Forms for the first time so this may be a badly written question, pardon me please if so.
I have a image as a Embeded resource:
screenshot
Can i use that image as BackgroundImage in XAML, for the ContentPage? How
Thank you all in advance.
UPDATE, as proposed here:
https://developer.xamarin.com/guides/xamarin-forms/working-with/images/#Embedded_Images:
i added the custom xaml markup extension to main page cs:
[Xamarin.Forms.ContentProperty("Source")]
public class ImageResourceExtension : Xamarin.Forms.Xaml.IMarkupExtension
{
public string Source { get; set; }
public object ProvideValue(IServiceProvider serviceProvider)
{
if (Source == null)
{
return null;
}
// Do your translation lookup here, using whatever method you require
var imageSource = Xamarin.Forms.ImageSource.FromResource(Source);
return imageSource;
}
}
I can now use the image like this:
<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
<!-- use a custom Markup Extension -->
<Image Source="{local:ImageResource App2.images.back_01.png}" />
</StackLayout>
Still the original question i am unable to answer, how to make it background in
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:App2;assembly=App2"
x:Class="App2.MainPage"
BackgroundImage="">
It seems that making the image Embedded resource only in portable, works for all image usages except BackgroundImage.
To be used for BackgroundImage the image has to be also embedded in the per platform resources (correct per platform Build Action must be selected).
Then, for BackgroundImage, it can be refereed to like this: "folder_name/file_name.png"
So, it must be done several times instead once (as opposed to other image usages).
The above has worked for me as a solution.
If someone know how to do this without redundant actions, please do post.
Put images to folder:
for Android into Resources/drawable
for iOS into Resources
And then try
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:App2;assembly=App2"
x:Class="App2.MainPage"
BackgroundImage="back01.png">
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.
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.