I'm developing a cross pltform app with Xamarin.Forms. I want to make a button with an image but I dont know how to specify the path of the imge. When I use this annotation it works:
<Button Text="Naviga tra i Piani del Museo" Image="foo.png"/>
but when my image is inside some folders (folder1/folder2) the following code doesn't work:
<Button Text="Naviga tra i Piani del Museo" Image="folder1/folder2/foo.png"/>
So how can I correctly specify the path of my image?
You can't nest the images in folders. iOS and Android expect them to be resources, and WP expects them to be in the App's root folder.
The Xamarin Forms docs has a section on working with images.
Keeping the image common using PCL is a difficult task.
So do it separately.
Keep in mind that you have to copy the images to Resources>drawable in case of android project.
For using folders for Xamarin.Forms project this is what worked for me.
You need to put your resources (image file in this case), to folder inside Xamarin.Form project (for this example folder is called "Assets") and set Build Action "Content".
Secondly for resources to work with Android you need to put files to Resources>drawable folder inside Android project (here you cannot use any folders), Set Build Action "AndroidResource".
<ContentPage.Resources>
<ResourceDictionary>
<OnPlatform x:Key="StartButtonImage"
x:TypeArguments="FileImageSource"
Android="button_image.png"
WinPhone="Assets\button_image.png"
iOS="Assets/button_image.png"/>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<Grid>
<Button Image="{StaticResource StartButtonImage}" BackgroundColor="Transparent"/>
</Grid>
</ContentPage.Content>
Pay attention that for iOs you need to make path using "/" and for WinPhone/UWP using "\".
You should specify Image property of button in OnPlatform tag to give different path for each platform. This is the example of Box View, you can try the same for Button Image property.
<BoxView HorizontalOptions="Center">
<BoxView.Color>
<OnPlatform x:TypeArguments="Color"
iOS="Green"
Android="#738182"
WinPhone="Accent" />
</BoxView.Color>
<BoxView.WidthRequest>
<OnPlatform x:TypeArguments="x:Double"
iOS="30"
Android="40"
WinPhone="50" />
</BoxView.WidthRequest>
</BoxView>
Related
I have the following xaml which includes the font family serif
It shows as sans serif
<Label Text="{Binding Name}" FontFamily="serif" Style="{StaticResource largeLabel}" HorizontalOptions="FillAndExpand" />
In fact whatever I put on it doesn't seem to have any effect I have tried custom fonts, font names like arial, font families like serif and it never changes.
I have tried in android and uwp on pc
Thanks for your help
In fact whatever I put on it doesn't seem to have any effect I have tried custom fonts, font names like arial, font families like serif and it never changes.
Like Jason said.Using a font other than the built-in typefaces requires some platform-specific coding.
<Label Text="Hello Forms with XAML">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="Lobster-Regular" />
<On Platform="Android" Value="Lobster-Regular.ttf#Lobster-Regular" />
<On Platform="UWP" Value="Assets/Fonts/Lobster-Regular.ttf#Lobster" />
</OnPlatform>
</Label.FontFamily>
</Label>
iOS
Add the font file with Build Action: BundleResource,
Update the Info.plist file (Fonts provided by application, or
UIAppFonts, key), then
Refer to it by name wherever you define a font in Xamarin.Forms!
Android
Add the font file to the Assets folder in the application
project and set Build Action: AndroidAsset.
Use the full path and Font Name separated by a hash (#) as the
font name in Xamarin.Forms
UWP
Add the font file to the /Assets/Fonts/ folder in the
application project and set the Build Action:Content.
Use the full path and font filename, followed by a hash (#) and
the Font Name
Here is the official document.Use a custom font
I deleted each attributte one by one until only the next was left and it started working:
<Label Text="Test" FontFamily="serif" />
The I re-added each attributte one by one and it still worked, I changed a few other things and it still worked.
I have no idea what was the problem
I'm not able to view any local image in my pages. Using android as a reference, the images are correctly placed in the Resources/Drawable subfolders, but even using the default "icon.png" nothing shows up.
Here is my page:
<?xml version="1.0" encoding="utf-8" ?>
<mvx:MvxContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MyApp"
xmlns:mvx="clr-namespace:MvvmCross.Forms.Views;assembly=MvvmCross.Forms"
x:Class="MyApp.MainPage"
BackgroundImage="icon.png">
<StackLayout Orientation="Vertical">
<Image Source="icon.png"></Image>
</StackLayout>
</mvx:MvxContentPage>
Here are the files:
In the build output I get the following messages:
[0:] Could not load image named: {0}: icon.png
[0:] FileImageSourceHandler: Could not find image or image file was invalid: File: icon.png
I suspect the problem is related to the use of mvxContentPage, because changing to a simple ContentPage and using Gorilla player for previewing the page the image shows up as intended.
Thanks in advance!
Just delete everything under your (...).Android\bin folder. VS will recreate everything and this time will include new images.
It seems like a really easy thing to do, and in theory it looks very straight forward:
create the Asset Catalog
add an Image Set and name it "imageName" (without .png)
add the images
done
or at least that's what i read pretty much everywhere, but I still can't get it to work.
My XAML looks like this:
<?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:CrossBaiscs"
x:Class="CrossBaiscs.MainPage">
<ContentPage.Content>
<StackLayout BackgroundColor="Orange">
<Label Text="Welcome to Xamarin.Forms!"
TextColor="White"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
<Image VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"
Source="logo1.png"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
And I added the images on the Asset Catalog:
I'm testing with Xamarin Live Player on an Iphone 6, and I can't see any image under the Label.
So... What am I missing?
EDIT
It works for this guy: Is it possible to use Image Set in a Xamarin Forms
But not for me, i did try removing the .png extension and leaving the xaml like this:
<?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:CrossBaiscs"
x:Class="CrossBaiscs.MainPage">
<ContentPage.Content>
<StackLayout BackgroundColor="Orange">
<Label Text="Welcome to Xamarin.Forms!"
TextColor="White"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
<Image VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"
Source="logo1"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Still doesn't work.
Tried cleaning build folders and deleting bin/obj folders, still nothing.
Tried adding the resources to the Resources folder and deleting the Image Set from the Asset Catalog:
Still didn't work.
Ideas?
EDIT 2
I left those 3 images on Resources folder and added the extension .png on XAML and it worked, still would be nice to know how its supposed to be done using the Asset Catalog.
Just to point out something that's probably obvious but caused me issues for ages - you can't use the LaunchImages set that comes with the asset catalog as it is not eligible to list in the Image dropdown. You have to create a new Image Set.
After I did this, the following answers suddenly worked (where they hadn't before):
Including the Asset Catalog folder in the project
Creating a storyboard that comes with a code-behind
don't use the .png extension in the XAML
<Image VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"
Source="logo1"/>
In Xamarin Documentation they have clearly mentioned that- On iOS, the Page.Icon property can't be populated from an image in an asset catalog image set. Instead, load icon images for the Page.Icon property from the Resources folder in the iOS project.
We were testing on Xamarin Live Player on an IPhone, turns out Asset Catalogs are not yet supported. (https://twitter.com/praeclarum/status/941775333753217025?s=08)
Thanks for the replies!
So, i've saved my image in
StorageFile picture = await KnownFolders.PicturesLibrary.CreateFileAsync(filename, CreationCollisionOption.ReplaceExisting);
and i want to display it in XAML :
<Image Grid.Row="1"
Grid.Column="0"
x:Name="Photo"
Source="ms-appx:///Pictures/test.png"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Stretch="Fill"
Width="1024"
Height="768">
</Image>
and it's not working :(
Thank you very much for you help :)
There aren't any uri schemes that work with a pictures library.
You wouldn't typically hard-code a URI to a pictures library file in your XAML anyway since you can't rely on that file being there.
If you store a list of files by paths somewhere you'd still have to load them using some code - perhaps using future access list, opening streams to the files etc.
You could probably create an IValueConverter or an attached behavior/DependencyProperty to convert a string to an ImageSource, but you could just as well do that in your view model.
I've Been working with WP7 for a while, am using listPicker/DatePicker Heavily. i hate its design though.i use liskPicker's property ExpansionMode="FullScreenOnly". i tried to make those controls to look prettier by
// Setting A source to the FullModeItemTemplate
FullModeItemTemplate="{StaticResource lpkFullItemTemplate}"
//the definition for this Resource is as follows:
<DataTemplate x:Name="lpkFullItemTemplate">
<StackPanel Orientation="Horizontal" Margin="5 5 5 5" Background="#FFA3A3A3"
Width="475" Height="45" >
<TextBlock Text="{Binding}" Foreground="Black" Margin="5 5 15 5" />
</StackPanel>
</DataTemplate>
I need real changes, changing the background of that popup and such changes, is that possible? or i need to build my own popup from scratch?
In order to do that you will have to create a copy of the ListPickerPage.xaml file from the Silverlight for Windows Phone Toolkit in your application, change it to meet your requirements, and then on your ListPicker control set the PickerPageUri proprety to the new ListPickerPage.xaml
I would like to improve Pedro's answer, but I still can't comment. You can see there's some people making questions up there.
In order to copy the ListPickerPage you'll need both the ListPickerPage.xaml and ListPickerPage.xaml.cs files. If you want those files to compile, you need some extension methods defined on Extensions.cs, ItemsControlExtensions.cs and VisualTreeExtensions.cs. You can either copy those three files or cherry pick the methods you need and add them to your own file.