Data binding image source is not working on iOS, but is working on android.

jabsaidijabsaidi Member ✭✭
edited March 5 in Xamarin.iOS

Hey guys, I have a cross-platform application which has images. Whenever I added an image to the shared code, I also added it in my .android/ressources/drawable with build action as "AndroidRessource". When I try adding these same images in my .iOS project, its not working. I added them to my "ressources" folder as shown in documentation. It's not working. It's not working with any available build action.

I have a page that contains a listview that binds with my code behind to give it a set of 2 images and text. The text works just fine, but the images dont.

Here is my XAML code:

<ListView x:Name="AboutView" ItemsSource="{Binding Pages}" CachingStrategy="RecycleElement" ItemSelected="OnItemSelected">
                <ListView.Behaviors>
                    <b:EventToCommandBehavior EventName="ItemTapped" Command="{Binding Navigate}" CommandParameter="{Binding .}" EventArgsConverter="{StaticResource ItemTappedConverter}" />
                </ListView.Behaviors>
                <ListView.Header>
                    <StackLayout BackgroundColor="#E2E2E2" HeightRequest="35">
                    </StackLayout>
                </ListView.Header>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <ViewCell.View>
                                <StackLayout Orientation="Horizontal" Margin="15,0,0,0">
                                    <Image Source="{Binding ImageUrl}" HorizontalOptions="Start" />
                                    <Label Text="{Binding PageName}" HorizontalOptions="StartAndExpand" VerticalOptions="Center" TextColor="#202020"/>
                                    <Image Source="Icons/IconArrow.png" HorizontalOptions="End"/>
                                </StackLayout>
                            </ViewCell.View>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
                <ListView.Footer>
                    <StackLayout BackgroundColor="#E2E2E2">
                    </StackLayout>
                </ListView.Footer>
            </ListView>

I am binding the first image to the image link in each object I am creating in my following constructor.

This is my ViewModel:

public class AboutViewModel : BaseViewModel, INotifyPropertyChanged
    {

        private ObservableCollection<PagesModel> _pages;

        public event PropertyChangedEventHandler PropertyChanged;

        public ObservableCollection<PagesModel> Pages
        {
            get { return _pages; }
            set
            {
                _pages = value;
                OnPropertyChanged("Pages");
            }
        }

        IConfiguration config = Locator.Current.GetService<IConfiguration>();

        public Command Navigate { get; }

        public AboutViewModel()
        {
            Navigate = new Command(NavigateToNextPage);

            Pages = new ObservableCollection<PagesModel>();
            Pages.Add(new PagesModel("Quote History", "Icons/iconHistory.png", new QuoteHistory(), new QuoteHistoryViewModel()));
            Pages.Add(new PagesModel("Support", "Icons/iconChat.png", new SupportPage(), new SupportViewModel()));
            Pages.Add(new PagesModel("Company Information", "Icons/iconOrganization.png", new CompanyInformationPage(), new CompanyInformationViewModel()));
            Pages.Add(new PagesModel("Terms of Use", "Icons/iconDocument.png", new TermsOfUsePage(), new TermsOfUseViewModel()));
            Pages.Add(new PagesModel("Privacy and PIPEDA", "Icons/iconDocument.png", new PrivacyPage(), new PrivacyViewModel()));
            Pages.Add(new PagesModel("Frequently Asked Questions", "Icons/iconDocument.png", new FrequentlyAskedQuestionsPage(), new FrequentlyAskedViewModel()));
            Pages.Add(new PagesModel("Feedback", "Icons/iconChat.png"));
            Pages.Add(new PagesModel("Available Markets", "Icons/iconDocument.png", new AvailableMarketsPage(), new AvailableMarketsViewModel()));
        }

        async private void NavigateToNextPage(object sender)
        {
            PagesModel selected = sender as PagesModel;
            Page page = selected.PageNavigation;
            var ViewModel = selected.PageViewModel;

            if (selected.PageName == "Feedback")
            {
                Device.OpenUri(new Uri($"mailto:{config.BrokerInformation.BrokerEmail}"));
            }
            else if (page != null)
            {
                await Navigation.PushAsync(PageHelper.GetPage(page, ViewModel));
            }
        }

        private void OnPropertyChanged(string name)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
        }
    }

This works just fine on android, but on apple it doesnt.

This is what it looks like:

Anybody knows what I might be missing?

Thanks!

Tagged:

Best Answer

  • LandLuLandLu Xamurai
    Accepted Answer

    I noticed that you set the image's Source to the name like: Icons/IconArrow.png. If you placed your images in the drawable folder, you can't create a subfolder. Why did your image source have an Icon prefix?
    For iOS, if you placed your images directly in the Resources folder, you should use the image's name directly like IconArrow.png. Otherwise, the image can't be displayed correctly.

    You also mentioned that you had added the images to your Forms project. If so, the image source can't be set using the simple code above. Refer to this documentation: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/images?tabs=windows#using-xaml to learn how to use Embedded Images with shared code.

    I think you'd better share your sample to help us find out the real issues. It could be the issues of images' positions.

Answers

  • LandLuLandLu Member, Xamarin Team Xamurai
    Accepted Answer

    I noticed that you set the image's Source to the name like: Icons/IconArrow.png. If you placed your images in the drawable folder, you can't create a subfolder. Why did your image source have an Icon prefix?
    For iOS, if you placed your images directly in the Resources folder, you should use the image's name directly like IconArrow.png. Otherwise, the image can't be displayed correctly.

    You also mentioned that you had added the images to your Forms project. If so, the image source can't be set using the simple code above. Refer to this documentation: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/images?tabs=windows#using-xaml to learn how to use Embedded Images with shared code.

    I think you'd better share your sample to help us find out the real issues. It could be the issues of images' positions.

  • jabsaidijabsaidi Member ✭✭

    For iOS, if you placed your images directly in the Resources folder, you should use the image's name directly like IconArrow.png. Otherwise, the image can't be displayed correctly.

    @LandLu I added the Icon prefix as my images are located in the folder in my shared project. In android it works just fine the way I did it.

  • jabsaidijabsaidi Member ✭✭

    @LandLu You are right. I can't use the prefix for the images to work on iOS... Thank you!

Sign In or Register to comment.