i have problem with listview in iOS devices

Question

I developed a with Xamarin form for the tow devices iPhone and Android, the problem is when I run the simulator on android the listview, they look good

but when I'm run the simulator on iPhone they look like this there is some UI problem here

the code is the same !!

XML code

        <?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:o="clr-namespace:Octane.Xamarin.Forms.VideoPlayer;assembly=Octane.Xamarin.Forms.VideoPlayer"
                 mc:Ignorable="d"
                 x:Class="rowad.View.VideoPage">
        <ContentPage.Content>
            <StackLayout Padding="20" Spacing="20">
                <Label Text="סרטונים" FontSize="20" HorizontalOptions="Center" TextColor="#19B5FE"/>
                <ListView x:Name="VideoList" ItemTapped="VideoList_ItemTapped">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ImageCell Text="{Binding VideoName}" ImageSource="{Binding Image}" TextColor="#19B5FE"/>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </StackLayout>
        </ContentPage.Content>
    </ContentPage>

C# code

 public partial class VideoPage : ContentPage
    {
        VideoView vvc;
        public VideoPage()
        {
            InitializeComponent();
            vvc = new VideoView();
            VideoList.ItemsSource = vvc.videoClasses;
        }

        public void VideoList_ItemTapped(object sender, ItemTappedEventArgs e)
        {
            var info = e.Item as VideoClass;

            WebView webView = new WebView
            {
                Source = new UrlWebViewSource
                {
                    Url = info.UrlName,
                },
                VerticalOptions = LayoutOptions.FillAndExpand
            };


            // Build the page.
            this.Content = new StackLayout
            {
                Children =
                {
                    webView
                }
            };
        }

    }

The list C#

 class VideoClass
    {
        public string VideoName { get; set; }
        public string UrlName { get; set; }
        public string Image { get; set; }
        public List<VideoClass> GetVideoClasses()
        {
            List<VideoClass> videoClasses = new List<VideoClass>()
            {   
                new VideoClass(){ VideoName="مين احنا",UrlName="https://youtu.be/7CLP9g3yhoQ",Image="Bird.png" },
                new VideoClass(){ VideoName="هندسة مواد",UrlName="https://youtu.be/FsBiKd9JN7o",Image="Bird.png" },
                new VideoClass(){ VideoName="بسيخولوجيا",UrlName="https://youtu.be/Bhsi4N_tnKU",Image="Bird.png" },
                new VideoClass(){ VideoName="هندسة زراعية",UrlName="https://youtu.be/_8zxliW1YDc",Image="Bird.png" },
                new VideoClass(){ VideoName="طب بيطري",UrlName="https://youtu.be/ubDAKzKAAF0",Image="Bird.png" },
                new VideoClass(){ VideoName="هندسة جينات",UrlName="https://youtu.be/BqIvzILC3MI",Image="Bird.png" },
                new VideoClass(){ VideoName="هندسة طيارات",UrlName="https://youtu.be/dWyLg7YATLA",Image="Bird.png" },
                new VideoClass(){ VideoName="معالج نطق وسمع",UrlName="https://youtu.be/fowF8vKpcok",Image="Bird.png" },
                new VideoClass(){ VideoName="تصميم صناعي",UrlName="https://youtu.be/YcHtH159Vvc",Image="Bird.png" },
                new VideoClass(){ VideoName="هندسة ماكنات",UrlName="https://youtu.be/kbC_3YbayWA",Image="Bird.png" },
                new VideoClass(){ VideoName="هندسة غذاء وبيوتكنولوجيا",UrlName="https://youtu.be/g4NqKwd1vAM",Image="Bird.png" },
                new VideoClass(){ VideoName="علم الدماغ",UrlName="https://youtu.be/NI-b6OK-9Uc",Image="Bird.png" },
                new VideoClass(){ VideoName="علم الحاسوب",UrlName="https://youtu.be/ljgYHdycRE0",Image="Bird.png" },
                new VideoClass(){ VideoName="هندسة برمجة",UrlName="https://youtu.be/eFMW7wXEuik",Image="Bird.png" },
                new VideoClass(){ VideoName="العلاج الوظيفي",UrlName="https://youtu.be/iQPmCPeRMvI",Image="Bird.png" }
            };
            return videoClasses;
        }
    }

the list is not for the same image but all the list is the same

Answer 1

If you use imageCell, there is no option that you can change the size of image. You can have a look at the sample screenshot in the doc and it has the same result with yours.

ImageCells are customizable, allowing you to set:

• Text – the text that is shown on the first line, in large font
• Detail – the text that is shown underneath the first line, in a smaller font
• TextColor – the color of the text
• DetailColor – the color of the detail text
• ImageSource – the image to display next to the text

Solution:

You need to write a custom-cell to meet your requirement:

    <ListView x:Name="VideoList" ItemTapped="VideoList_ItemTapped">
        <ListView.ItemTemplate>
            <DataTemplate>
                <!--<ImageCell Text="{Binding VideoName}" ImageSource="{Binding Image}" TextColor="#19B5FE"/>-->

                <ViewCell>
                    <StackLayout HeightRequest="60" Orientation="Horizontal">

                        <Image Aspect="Fill" Source="{Binding Image}" HeightRequest="40" WidthRequest="40" HorizontalOptions="Start" VerticalOptions="CenterAndExpand"/>
                        <Label TextColor="#19B5FE" Text="{Binding VideoName}" HorizontalOptions="EndAndExpand" VerticalOptions="CenterAndExpand"/>
                    </StackLayout>

                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

Here is the result: