Image Binding to local resource

Question

Good Evening,

I have a menu which is created in a listview based on a model and NavMenuItems.
Setting the label by binding is no problem.
Now I want to add an .png picture to this menu in front of the title.
the XAML is:

<Grid>
          <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.2*"/>
                    <ColumnDefinition Width="0.8*"/>
          </Grid.ColumnDefinitions>
                    <Image Source="{Binding IconSource}" Grid.Column="0"/>
                    <Label Text="{Binding Title}" FontSize="Small" Grid.Column="1"/>
</Grid>

The Model looks like this:

public enum MenuItemType
    {
        Home,
        Offers,
        Assortment,
        Cart,
        Wishlists,
        Orders,
        Cases,
        UserProfile
    }

    public class NavMenuItem 
    {
        public MenuItemType Id { get; set; }
        public string Title { get; set; }
        public string IconSource { get; set; }
    }

I create the nav menu enter code here:

menuItems = new List<NavMenuItem>
            {
                new NavMenuItem {Id = MenuItemType.Home, Title="Home" },
                new NavMenuItem {Id = MenuItemType.Offers, Title="Offerings", IconSource = "{local:ImageResource EY365OCMobileApp.Images.offeringsIcon.png}" },
                new NavMenuItem {Id = MenuItemType.Assortment, Title="Assortment", IconSource = "EY365OCMobileApp.Images.assortmentIcon.png" },
                new NavMenuItem {Id = MenuItemType.Cart, Title="Your Cart", IconSource = "EY365OCMobileApp.Images.cartIcon.png" },
                new NavMenuItem {Id = MenuItemType.Orders, Title="Your Orders", IconSource = "EY365OCMobileApp.Images.yourOrderIcon.png"},
                new NavMenuItem {Id = MenuItemType.Wishlists, Title="Your Wishlists", IconSource = "EY365OCMobileApp.Images.wishlistIcon.png"},
                new NavMenuItem {Id = MenuItemType.Cases, Title="Your Questions / Problems", IconSource = "EY365OCMobileApp.Images.questionsProblemsIcon.png"},
                new NavMenuItem {Id = MenuItemType.UserProfile, Title="Your Profile" },
            };

I tried two ways:

1. IconSource = "{local:ImageResource EY365OCMobileApp.Images.offeringsIcon.png}"
2. IconSource = "EY365OCMobileApp.Images.assortmentIcon.png"

Both DON'T work. Debugger output shows NETWORK Error.
All images are inserted into the folder "Images" and are embedded.
When I put the image anywhere on a page with
Image Source="{local:ImageResource EY365OCMobileApp.Images.LogoDark100.png}"
it works fine.

Any idea what I do wrong?

Answer 1

Hello,

Welcome to our Microsoft Q&A platform!

You can try to add a property to the NavMenuItem class as follows:

public class NavMenuItem  
{  
    public MenuItemType Id { get; set; }  
    public string Title { get; set; }  
    public string IconSource { get; set; }  

   // add the new property  `Image` here , remember change the string.Format to yours.   
    public ImageSource Image  
    {  
        get  
        {  
            return ImageSource.FromResource(string.Format("WorkingWithImages.Images.{0}", IconSource));  

          // your code should be  
           //return ImageSource.FromResource(string.Format("EY365OCMobileApp.Images.{0}", IconSource));  
        }  
    }  
}  

And init menuItems like this(remove the prefix of your images), for example:

        menuItems = new List<NavMenuItem>  
         {  
             new NavMenuItem {Id = MenuItemType.Home, Title="Home",IconSource = "watermelon.png"},  
             new NavMenuItem {Id = MenuItemType.Offers, Title="Offerings", IconSource = "cabbage.png" },  
             new NavMenuItem {Id = MenuItemType.Assortment, Title="Assortment", IconSource = "cabbage.png" },  
             new NavMenuItem {Id = MenuItemType.Cart, Title="Your Cart", IconSource = "pepper.png" },  
             new NavMenuItem {Id = MenuItemType.Orders, Title="Your Orders", IconSource = "kiwifruit.png"},  
             new NavMenuItem {Id = MenuItemType.Wishlists, Title="Your Wishlists", IconSource = "cabbage.png"},  
             new NavMenuItem {Id = MenuItemType.Cases, Title="Your Questions / Problems", IconSource = "watermelon.png"},  
             new NavMenuItem {Id = MenuItemType.UserProfile, Title="Your Profile" },  
         };  

And bind the new property Image like this:

<Image Source="{Binding Image}"  />  

The whole usage:

          <ListView  x:Name="lstView" RowHeight="60">  
            <ListView.ItemTemplate>  
                <DataTemplate>  
                    <ViewCell>  
                        <StackLayout Orientation="Horizontal" HorizontalOptions="Fill" BackgroundColor="Olive">  
                            <StackLayout Orientation="Vertical">  
                                <Label Text = "{Binding Title}" FontSize="24" AbsoluteLayout.LayoutBounds="0.25, 0.25, 400, 40"/>  
                                <Label Text = "{Binding Id}" AbsoluteLayout.LayoutBounds="50, 35, 200, 25"/>  
                            </StackLayout>  
                            <Image Source="{Binding Image}" HorizontalOptions="End" AbsoluteLayout.LayoutBounds="250.25, 0.25, 50, 50 " WidthRequest="40" HeightRequest="40"/>  
                        </StackLayout>  
                    </ViewCell>  
                </DataTemplate>  
            </ListView.ItemTemplate>  
        </ListView>  

Best Regards,

Jessie Zhang

---
If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.