I want to display an Image in my Xamarin forms project using XAML but is is not displaying.
This is the code:
<Image x:Name="myimage" Source="logo.jpg"/>
I have set myimage's build action to embedded resource. I also tried this
<Image x:Name="myimage" Source="MyXamarinProject.logo.jpg"/>
Where MyXamarinProject is my namespace. But both not working. What is wrong here?
The recommended way to avoid decreasing application performance or problems displaying the images on different screen resolutions is adding each image on each platform specific folder:
Android: Project -> Resources -> Drawable (or each resolution drawable folder (-hdpi,-xhdpi...))
iOS: You can create an asset catalog for each image or use Project -> Resources folder.
And then, use the image name on XAML file. No code needed.
Upon inspecting the Microsoft Docs for this, it is not as easy as just specifying the path.
First, Create an IMarkupExtension
[ContentProperty (nameof(Source))]
public class ImageResourceExtension : 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 = ImageSource.FromResource(Source, typeof(ImageResourceExtension).GetTypeInfo().Assembly);
return imageSource;
}
}
Then consume it 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">
<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
<!-- use a custom Markup Extension -->
<Image Source="{local:ImageResource WorkingWithImages.beach.jpg}" />
</StackLayout>
</ContentPage>
Note that you have to add a custom namespace to your page, in this case: xmlns:local="clr-namespace:WorkingWithImages;assembly=WorkingWithImages"
So, I can not display an image using XAML only. I am pretty satisfied with both the answers. Although this is how I displayed the image without pasting into the android and iOS(to their respective folders) and without making IMarkupExtension.
I put one line of code into C# code behind and that worked:
myimage.Source = ImageSource.FromResource("MyXamarinProject.logo.jpg");
//logo.jpg must be Embedded Resource.
This could not be the right answer but it can be a choice. Thanks!
I had the same problem on Visual Studio Mac:
my XAML :
<Image x:Name="myimage" Source="logo.jpg"/>
my resources was : logo.jpg
But the file was saved in the file system as Logo.jpg (Capital L).
I just modified it to logo.jpg and rebuild all.
Related
I have these values on a xamarin.Form page. Both of them give me intellisense. What would be the scenarios to use either or both of them?
<ContentPage x:DataType="vm:AboutViewModel" >
<ContentPage.BindingContext>
<vm:AboutViewModel>
</vm:AboutViewModel>
</ContentPage.BindingContext>
</ContentPage>
BindingContext assigns an instance of the specified class at runtime.
x:DataContext is a design time helper that tells Intellisense what the type of the context for a given block of XAML is
I have a xamarin forms application and I want to add a footer to the flyout menu. After reading the official documentation it should be straightforward, just adding a few lines into the AppShell.xaml like so:
<Shell.FlyoutFooterTemplate>
<DataTemplate>
<Label HeightRequest="300" BackgroundColor="Red"/>
</DataTemplate>
</Shell.FlyoutFooterTemplate>
This works perfectly fine when I tried it in a new project, but for some reason, it doesn't work in my current application giving this error:
Error XLS0415 The attachable property 'FlyoutFooterTemplate' was not found in type 'Shell'.
I tried to find the definition of FlyoutHeaderTemplate and I found this in Shell [from metadata] file:
[1]: https://i.stack.imgur.com/xqZub.png
public Shell();
...
public DataTemplate FlyoutHeaderTemplate { get; set; }
public FlyoutHeaderBehavior FlyoutHeaderBehavior { get; set; }
public object FlyoutHeader { get; set; }
There should be a similar definition for both, Header and Footer, but there is only one for the Header. The file cannot be edited and I was not able to locate it either. Any ideas why the definition for Footer is missing, how can I add it, or workarounds?
PS: Adding the footer from C# code doesn't work either and I tried to clean/rebuild and resetting both, PC and VS.
First, Confirm that you can add a simple Header:
<Shell.FlyoutHeader>
<Label Text="This is the header." />
</Shell.FlyoutFooter>
If that doesn't work, then you are doing something fundamentally wrong - post the code for the <Shell> XAML, within which you added those lines. Make sure you include those lines, to show where in the XAML they are. Make sure they are between <Shell> and </Shell>, but not nested inside some deeper node. For example, they musn't be inside a <StackLayout> or <ContentView> or other container - they must be direct children of the <Shell>.
Unless you are doing something fancy, you don't need a Template.
Try simply:
<Shell.FlyoutFooter>
<Label HeightRequest="300" BackgroundColor="Red"/>
</Shell.FlyoutFooter>
If 1) above works, but not 2), then your project is referencing an out-of-date version of Shell. Fixes:
A. Check that project's Xamarin.Forms nuget doesn't need an Update. (Solution / Manage Nugets.)
B. OR delete bin and obj folders. Then Rebuild Solution.
C. Worst case, start with a new project, in which you are able to use that functionality, and add back in all your files.
I have this example in my application:
<?xml version="1.0" encoding="utf-8"?>
<Grid xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:J;assembly=J"
x:Class="J.Templates.HelpGrid"
Padding="15"
RowSpacing="10"
ColumnSpacing="10" />
and in c#
using System;
using System.Collections.Generic;
using Xamarin.Forms;
namespace J.Templates
{
public partial class HelpGrid : Grid
{
public HelpGrid()
{
InitializeComponent();
}
}
}
From what I see the code works and I can use that template without or without my coding a back end c#.
Is there any reason why the developer might have chosen to add the back end C# code?
The backing class (c# file) is needed by the compiler to work, at this time you cant avoid it.
In theory, it is possible to eliminate the need of the backing class, but it's not an easy thing to do.
They could add a new task in the compile pipeline but this will slow the build a lot (more xaml, more slow).
At the end there is very little benefits and a lot of works, its not worth.
You can read the full explanation, made by the Xamarin staff, here:
https://github.com/xamarin/Xamarin.Forms/issues/4327#issuecomment-436921856
I have been trying to change the text of the back button in Xamarin.Forms without luck.
I tried already this code with no luck:
NavigationPage.SetBackButtonTitle(this, "");
I'm using a MasterDetailPage.
I tried to add the code into the constructor of the XAML cs file.
Libraries used: PRISM 6.2.0, Xamarin Forms 2.3.1.114
Any suggestion or idea?
Thanks in advance
Due to the topic:
One of the things that is a little bit unintuitive about this API is that you are setting the title for the back button that shows up when this page is the one that you are going back to. For example, you are trying to set the title to "Home". That means you should be calling this method on the Page that represents the "home" page, not the page that is visible when the back button that says "Home" is showing.
So, if you are navigating from Page1 to Page2, you should set NavigationPage.SetBackButtonTitle(this, "") in constructor of Page1 and on Page2 you will see the empty title of back button.
You have to set the Backbutton title of your previous page as string.Empty. By default it's the title of the previous page on the navigation stack that is shown as the back button text.
Also Android does not support this property.
You can also do it from the Code Behind of the current xaml page
public TodoPage()
{
InitializeComponent();
NavigationPage.SetBackButtonTitle(this, "Back");
}
NB: It has to be done on the previous page you want to set.
e.g. Page A has to have the code if you want Page B to show "Back" title.
Belated answer but maybe someone will find this useful in the future… Anyhow, if you wish to get rid of the back button title from XAML, you can either add NavigationPage.BackButtonTitle="" for any ContentPage that should have the title removed or you can define new ContentPage style in your App.xaml file like this:
<Style x:Key="ContentPageStyle" TargetType="ContentPage">
<Setter Property="BackgroundColor" Value="White" /><!-- just an example of other things that can be in here -->
<Setter Property="NavigationPage.BackButtonTitle" Value="" />
</Style>
I was, however, unable to turn this into an implicit global style that would get applied automatically without the need to specify Style="{StaticResource ContentPageStyle}" for each ContentPage – I'm not sure why that one doesn't work.
You can set the attribute NavigationPage.BackButtonTitle on ContentPage
For example:
<?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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:T3R"
mc:Ignorable="d"
Title="Title of Page"
NavigationPage.BackButtonTitle="Cancel"
x:Class="T3R.MainPage">
Remember the following:
I understand this only works on iOS
For any given page, the back button title is set by the page that presents it. This way, the button label can vary with respect to the page that precedes it on the navigation stack (of which there can be many).
You can set your back button text in XAML as follows (before ContentPage.Content):
<NavigationPage.TitleView>
<Label Text="{Binding PageTitle}" HorizontalOptions="Center"/>
</NavigationPage.TitleView>
With Windows Phone 7, I'm attempting to dynamically add controls to and object in codebehind, and apply a StaticResource to the new control.
Xaml file sample:
<phone:PhoneApplicationPage.Resources>
<ControlTemplate x:Key="PushpinControlTemplateBlue" TargetType="my2:Pushpin">
...
</ControlTemplate>
</phone:PhoneApplicationPage.Resources>
Codebehind sample:
>Pushpin myPush = new Pushpin();
>myPush.Location = new GeoCoordinate(52.569593, -0.9261151403188705);
>myPush.Content = "";
>myPush.Template = (ControlTemplate)Application.Current.Resources["PushpinControlTemplateBlue"];
>mapMain.Children.Add(myPush);
When I debug, and look at "Application.Current.Resources", there are no items in the collection, so the item is added to the controls list, but doesn't show up because it has no content.
Is there something simple I'm doing wrong? How do I correctly access the resource?
If the resource is defined within the page you need to the resources in the page and any defined at applicaiton level.
You can do this simply by refering to the Resources object within the page:
this.Resources["PushpinControlTemplateBlue"];
Application.Current.Resources is define in App.xaml not on a page. Place your template in
<Application.Resources>
Example