question

RicardoEnricoJahn-0829 avatar image
0 Votes"
RicardoEnricoJahn-0829 asked JessieZhang-2116 commented

Image Binding to local resource

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?



dotnet-xamarin
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

JessieZhang-2116 avatar image
0 Votes"
JessieZhang-2116 answered JessieZhang-2116 commented

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.



· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@JessieZhang-2116 Thank you very much. This works great! I spent hours to find a solution and read about converters and a lot of other stuff. Your solution works like a charm and was easy to understand. Thanks a lot!

0 Votes 0 ·

It's my pleasure to help you. Thanks for your support for xamarin.

0 Votes 0 ·