I'm trying to build a very simple Xamarin Forms app. Essentially, it just displays an image of a form. The image is part of the project (in the Assets folder). However, I'm struggling to work out exactly what I need to do to get it to display the image.
Here's the Xaml:
<Image Grid.Column="2" Grid.Row="0" Grid.RowSpan="3"
BackgroundColor="Aqua" Aspect="Fill" Source="../Assets/tmp.png"/>
I've tried various combinations of path (./Assets/tmp.png for example), I've even tried copying the image to the Assets folder in the UWP app that I'm trying to run, but I can't get the image to display.
Related
I have a Xamarin Forms Webview that is successfully displaying a local "hard-coded" file on Android and UWP, but I can't get it to work on iOS. I have done the usual searches: there is help out there for Web URL's and for HTML embedded in the C# code, but I cannot find anything that solves my problem: exactly how do I specify the filename and where do I put the HTML files?
I have pasted the XAML below. I have the GettingStartedWizardWebPage folder both (temporarily, until I figure out what works) in the main iOS project folder and also under iOS Resources. I have tried specifying the file name both with and without a preceding ///. Is there some other prefix I should be using, like file: for Android or ms-appx-web: for UWP? I have the HTML files with BuildAction BundleResource and I have tried all of the Copy variations (but there are a lot of combinations of name prefix, Copy options and file location and I have probably not tried every combination).
Specifically, I have read https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/webview?tabs=windows#local-html-content and followed the directions there to the best of my ability. For Android I coded Value="file:///folder/page" and it works. For UWP I coded Value="ms-appx-web:///folder/page" and it works. What do I code for Value= for iOS? What is the "base URL"? Is the tutorial trying to say that I need code to determine the Base URL?
It doesn't crash or give any errors; it just displays a blank window. The second row of the grid shows up and displays where I would expect it to be.
I have read the discussions of UIWebView and WKWebView but I don't get what exactly I should be doing. AFAIK I would be willing to use either.
VS 2022 Community 17.4.0 Preview on Windows 64 Pro, with both Cloud iPhone 13 Simulator and real iPhone 5.
<Grid RowDefinitions="*,AUTO" Margin="6, 6, 6, 6" x:Name="MainContent">
<WebView WidthRequest="1000" HeightRequest="1000" Grid.Row="0" >
<WebView.Source>
<OnPlatform x:TypeArguments="WebViewSource">
<OnPlatform.Platforms>
<On Platform="Android" Value="file:///android_asset/GettingStartedWizardWebPage/WebPage.html" />
<On Platform="UWP" Value="ms-appx-web:///GettingStartedWizardWebPage/WebPage.html" />
<On Platform="iOS" Value="///GettingStartedWizardWebPage/WebPage.html" />
</OnPlatform.Platforms>
</OnPlatform>
</WebView.Source>
</WebView>
...
Okay. I solved this. The linked tutorial is less than forthcoming on one point, and wrong on the details of others.
I. You just cannot do this for iOS in XAML. For UWP and Android there is a fixed, short "prefix" (base URL) that goes on the front of the filename as discussed in the article and as shown in my XAML above. For iOS it is a 100-or-so character string that is very application and device dependent, so you can't hard-code it in the XAML. You have to use C# code with a dependency routine -- as shown in the tutorial, but not emphasized as explicitly as I just did.
II. The prefixes shown in the tutorial are wrong, or at least won't work correctly in device-independent code. NSBundle.MainBundle.BundlePath on iOS returns a pathname without a terminating slash, so (a.) you want a leading slash on the hard-coded "low-order" part of your filename; and (b.) therefore the Android routine wants to return "file:///android_asset" (without the trailing slash shown in the tutorial) and the UWP routine wants to return "ms-appx-web://" with two trailing slashes, not the three shown in the tutorial -- which seems odd, but your hard-coded slash will make for three total.
III. Contrary to what the tutorial says, you do NOT have to read the file yourself and then deal with special considerations so that the HTML page can access linked objects. Just put BaseUrl + "Your hard-coded filename starting with a slash" into WebView.Source and WebView will read the file (on all three platforms) including any linked images and so forth.
IV. Put the HTML pages in the main iOS application folder, not under Resources. That is the path that NSBundle.MainBundle.BundlePath returns.
I have a question. I need to have few toolbar items related to different styles. I have created Theme Resources and with the help of settings plugin I am saving different themes. However I would also like to have different toolbar items dedicated for each theme. I have tried to add my image in Resource dictionary like this
<ResourceDictionary>
<Image x:Key="logo" Source="IconSettings.png"></Image>
</ResourceDictionary>
and then in Xaml use it like this
<ToolbarItem IconImageSource="{DynamicResource logo}"/>
But nothing is displayed. Do you maybe have any suggestions even different approach?
Also have tried to follow this solution https://forums.xamarin.com/discussion/152758/setting-icon-file-names-as-resources
As you can see in the link you provided, why don't you try something like this
<ResourceDictionary>
<x:String x:Key="logo">IconSettings.png</x:String>
</ResourceDictionary>
And use it in your XAML.
You were trying to add image at the place of string input, that's the reason it showed you nothing
Let me know if its working fine or not
This question already has answers here:
WPF - Import image as resource
(3 answers)
Closed 4 years ago.
I am creating a Visual Studio extension with a Custom Tool Window (wpf window).
I have a menu:
<MenuItem Header="_Function" Name="mn" >
<MenuItem Name="menuSearch" Click="MenuSearch_Click" Header="Search">
<MenuItem.Icon>
<Image Source="Resources/search.jpg" />
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="Edit" Name="menuSave" Click="MenuSave_Click" >
<MenuItem.Icon>
<Image Source="Resources/pen.jpg" />
</MenuItem.Icon>
</MenuItem>
</MenuItem>
Both of the icons are good in design mode:
But when I run the project only the first one is working:
I have read this post: Image not visible in WPF 2015
and both of the images are Build Action: Resource. And the last thing i must say is that the second image works if I set a static url:
<MenuItem.Icon>
<Image Source="J:\My_Programs\1397\MyKeywords\MyKeywords\Resources\pen.jpg" />
</MenuItem.Icon>
Do you know the solution? Thanks.
Update
And this post:
WPF - Import image as resource
will not help because one image is working and another not, in a same condition.
It seems that in a VSIX project, Some of the changes do not affect until the visual studio restart. I restarted the visual studio and now every things are OK with:
Build Action: Resource
Copy To Output Directory: Do Not Copy
I am not able to display the image on my Xamarin UWP app
I have an Image in Assets folder:
<Image x:Name="myBookImage1" Source="/Assets/Agile Coaching.jpeg"></Image>
Is there any specific reason you want the image in the Assets folder?
To use then 'normally' you should put them in the root and set the build action to Content. You are then able to simply do this: <Image x:Name="myBookImage1" Source="Agile Coaching.jpeg"></Image>
Although I would try to prevent spaces in your filenames.
Also see: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/images?tabs=vswin#local-images
There are several posts here on stackoverflow that cover this, but none are the cause. I've tried several sources including the documentation and I can not get this to work.
I'm following a tutorial by mosh on Udemy and he's showing how to use an embedded resource file.
I am working with Visual Studio 2017.
I've added a folder in the HelloWorld folder called images and placed an image called background.jpg in it.
When you right click the image and set the Build Action to EmbeddedReesource you're supposed to get a Resource Id. None is there, not even the box shows up. I'm thinking that's a new feature that was removed.
I found out the resource path is HelloWorld.images.background.jpg.
My xaml is 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"
x:Class="HelloWorld.ImagePage"
BackgroundColor="Black">
<ContentPage.Content>
<Image x:Name="image" Aspect="AspectFill" />
</ContentPage.Content>
</ContentPage>
Next, my c# code is like this:
public ImagePage ()
{
InitializeComponent ();
image.Source = ImageSource.FromResource("HelloWorld.images.background.jpg");
}
And I've tried placing the image in the android project under Resources/Drawable, but doesn't that defeat the purpose?
Any help would be great. Thanks ahead of time.
Here is my VS Solution Explorer:
This way of embedding images is still supported. Check out this page in the documentation on how to do it. These are the basic steps:
Set Build Action of the file to EmbeddedResource, you can do this in the properties of the file
Refer to the image from your PCL with a dot delimited identifier. The filename is build up like this: AssemblyName.Folder.ImageName.ext
If your image is not in a folder, you can leave is out, if it is in multiple folders, add each one separated with a dot. An example could look like this:
var embeddedImage = new Image { Aspect = Aspect.AspectFit };
embeddedImage.Source = ImageSource.FromResource("WorkingWithImages.beach.jpg");
Here the assembly (probably your project name for your PCL) is named 'WorkingWithImages' and the file is not in a folder, the file is named 'beach.jpg'. In the case of Android I think you should also mind that you do not put in hyphens or any other characters than numeric, alphabetic and underscores.
That being said, you also say:
And I've tried placing the image in the android project under
Resources/Drawable, but doesn't that defeat the purpose?
I'm not entirely sure what you mean here, but I took it that you think it defeats the purpose of a multi-platform app from a single code-base. I must disagree with you there. Although I see how you could think that, working with images is something that is very platform specific. All platforms have a very different way of showing and scaling images and it would be nearly impossible to reconcile all that for Xamarin. Having the images in the PCL like you want to do now, will completely disable the whole scaling mechanism in place and suddenly you are responsible for making it look good on all kinds of devices, resolutions and form factors. That is why I always have the images resources per platform project.