I've a Xamarin Forms project - with the 3 projects for UWP, iOS and Android.
Now I want to use images in my Xamarin Pages. As intended by Xamarin I want to use the same code for all three targets ... e.g.:
<Image Source="Assets/appIcon-256.png"/>
This works for iOS and UWP - both have a folder "Assets" where I placed the image. Ok, I've to maintain the image twice, but I've the same XAML code for both project.
But for Android, that doesn't seems to work. The image is not displayed in Android, if I put the png in the Assets folder of the Anroid project.
What can I do to use the same location for all images for all the three projects?
It's very easy.
IOS => You need put the images on "Resources" (note: no more routes) , for ANDROID => you need put the images on "Resources/drawable" .for UWP => put the images on root project UWP.
On Diferents platforms the images have diferents routes.
Then on the xaml files you can put <Image Source="imageName.jpg" />
Send feedback please.
UPDATE
You can put the images on UWP/Assets and then :
<ToolbarItem
Text="Search">
<ToolbarItem.Icon>
<OnPlatform x:TypeArguments="FileImageSource">
<On Platform="Android, iOS" Value="movies-search.png"/>
<On Platform="UWP" Value="Assets/movies-search.png"/>
</OnPlatform>
</ToolbarItem.Icon>
</ToolbarItem>
Why the path starting with "Assets/"? For Android Place your image to MyProject.Android/Resources/drawable. For iOS myProject.iOS/Resources/
and in xaml
<Image Source="appIcon-256.png"/>
It will work.
In addition for iOS if you have same picture with different sizes, you should rename them like "appIcon-256.png" "appIcon-256#2x.png" "appIcon-256#3x.png"
Replace your dashes with underscores. Example, ic_launcher_calendar.png
Try also to remove the digits at the end of the name.
Lastly, you can check out the naming conventions of drawable. http://petrnohejl.github.io/Android-Cheatsheet-For-Graphic-Designers/
Let me know if it works.
Related
I put crypto.png image into drawable folder under Resources in Android Project.
After I right click on the image -> Build Action -> Embedded Resource.
In MainPage.xaml on the main project I try to load the image like that:
<Image x:Name="HeadImage"
WidthRequest="100"
HeightRequest="100"
MinimumHeightRequest="100"
MinimumWidthRequest="100"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"
Aspect="AspectFit"
Source="crypto.png"/>
But the image not load.
I try a second method like this in the c# code:
var HeadImage = new Image { Aspect = Aspect.AspectFit };
HeadImage.Source = ImageSource.FromFile("crypto.png");
And this method not worked again..
You need to let your image in drawable folder as Android Resource instead of Embedded Resource, and to use it, you need to:
HeadImage.Source = "crypto.png";
Also, before set the image, is a good practice to remove MinimumWidthRequest and MinimumHeightRequest. This is safe ONLY if you are sure the image have this minimum size. Otherwise, your image will not appear.
To know more about image in Xamarin, see here.
And to understand the difference between the ways of set an ImageSource see here.
I'm working on an app for the UWP and Android platforms. I want to set an icon for a button in the navigation toolbar. This is my code in XAML:
<ContentPage.ToolbarItems>
<ToolbarItem x:Name="btnAbout" Text="ABOUT" Order="Primary" Clicked="OnNextPageButtonClicked"/>
</ContentPage.ToolbarItems>
and this is the code in the associated .cs file:
protected override void OnAppearing()
{
base.OnAppearing();
btnAbout.IconImageSource = ImageSource.FromResource("Monk.about.ico");
}
Everything works just fine on Android, but in UWP, even though I can click the button, I can't see the icon.
Where did I go wrong?
I found the solution, I write it for those who need it:
it was necessary to define the path of the icons according to the type of OS destination for compilation.
For Android I had to copy the image to all the "drawable ..." folders and set its compilation property as "AndroidResource".
For UWP I had to copy the png file to the Assets folder and then set its compilation property as "Content".
Finally, you must indicate in the XAML file which paths to use depending on the type of compilation. The code is as follows:
<ContentPage.ToolbarItems>
<ToolbarItem Text="ABOUT" Clicked="OnNextPageButtonClicked" Priority="0">
<ToolbarItem.IconImageSource>
<OnPlatform x:TypeArguments="FileImageSource">
<On Platform="Android">info</On>
<On Platform="UWP">Assets/info.png</On>
</OnPlatform>
</ToolbarItem.IconImageSource>
</ToolbarItem>
</ContentPage.ToolbarItems>
I can confirm that while UWP can display an .ico file in a Image element, it does not work with the BitmapIcon, which Xamarin.Forms uses underneath for ToolbarItem. Therefore you will unfortunately not be able to use this very file on UWP. However, you can convert your icon to a .png image and that will display on all platforms without problems.
Do the change of the code below and set the .ico file Properties> Build Action to Content.
Change:
btnAbout.IconImageSource = ImageSource.FromResource("Monk.about.ico");
To:
btnAbout.IconImageSource = ImageSource.FromFile("Monk.about.ico");
Or you could set the IconImageSource in XAML.
<ContentPage.ToolbarItems>
<ToolbarItem Order="Primary"
Text="Icon Item"
Priority="0"
IconImageSource="Monk.about.ico"
Clicked="OnItemClicked" />
My .ico file:
My result:
I've got a AnimationView defined in AirBnb's Lottie Framework which should load a file placed inside my Resource folder inside my Xamarin.Forms Project (the portable one)
<forms:AnimationView
x:Name="AnimationView"
Animation="SharpLibrary.Forms.Assets.Images.WineGlass.json"
Loop="True"
AutoPlay="True"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand" />
But it seems it cannot resolve the string in Animation property, so it will not display the animation. If I place the file into the Resource folder and say Animation="WineGlass.json" it works.
Is there a way to load it from EmbeddedResource, or is this not possible?
It worked with me at
first you can put the json file at folder if you would or at the shared one
I put at folder renamed Image
Animation="Images.loading.json"
at the c# code put that
animationView.AnimationSource = AnimationSource.EmbeddedResource;
I can't display an image on WPF window during runtime. However, it is shown during design mode. The image is located in Images folder and Build action is set to Content as well is Copy to output to Copy Always. The output Any suggestions?
===EDIT====
The output type of a project is : Class Libray, if I change it to Window Application the bellow are workign fine. However I still need to build it is Class library.
2nd try
<Image Source="pack://siteoforigin:,,,/Images/Logo2.png" Grid.Row="0"/>
3rd try
<Image Source="pack://application:,,,/Images/Logo2.png" Grid.Row="0"/>
Also,
If I put a full path to the image location it is working, apparently this is not ideal situation:
<Image Source="C:/.../Images/Logo2.png" Grid.Row="0"/>
Rebuild your entire solution and try again. It probably didn't do a build with images in it when you tried it again.
Also use your 3rd try again then build action to content, no need to make a copy always.
After several trials the answer was quite simple:
For Class Library Project set your images Build Action to Resource and get a reference in Xaml as:
<Image Source="/YOURNAMESPACE;component/Images/Logo.png"/>
It won't work with png, but convert to jpg and write:
<Image Source="/YOURNAMESPACE;component/Images/Logo.jpg"/>
That works for me :)
I am building a Windows Store (WinRT) application, and I have added in buttons to manipulate items in a list, I am using images for these buttons. I have followed numerous sets of information but can't get these images to show up, I have tried the following:
<Button>
<Image Source="/Images/add.png"/>
</Button>
<Button>
<Image Source="mx-app://Images/add.png"/>
</Button>
I have tried the above with the image set to copy local, and then with different build actions, the image just never shows when I run the application.
If you're including the images in the application package, they should be marked as Content (which they would by default when pulling adding them to the project).
Your first invocation should work, assuming you have a top level folder in your project called Images.
Your second invocation should be (it's just a more explicit version of the first):
<Button>
<Image Source="ms-appx:///Images/add.png"/>
</Button>
Try setting the build action on each image to Resource.
Then you should be able to write
<Button>
<Image Source="/Images/add.png"/>
</Button>
Right click on the image. Properties -> Build Action. Ensure That "Build Action" is Content