Click here to Skip to main content
15,881,248 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
Hi, working on simple list view with images inside but images have random height. right now list view not showing whole image, each image has width of 720px and heights are random. any help will be deeply appreciated.
regards

What I have tried:

XAML
<pre><StackLayout>
        <ListView ItemsSource="{Binding Names}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell >
                        <HorizontalStackLayout Padding="10">
                            <Image Source="{Binding ImageUrl}"
                               Aspect="AspectFit"
                               SemanticProperties.Description="{Binding ImageUrl}"/>
                        </HorizontalStackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
Posted
Updated 26-Jun-23 22:59pm
v3

1 solution

You can remove the 'Grid.Column' property from the Image and Labels, as it is not needed. Rather use 'HorizontalStackLayout' for the image and labels inside your 'ViewCell' to display your images with their original sizes. See the properties for 'HorizontalStackLayout' at HorizontalStackLayout[^]. Your XAML code will be -
<DataTemplate>
    <ViewCell>
        <HorizontalStackLayout Padding="10">
            <Image Source="{Binding ImageUrl}"
                   SemanticProperties.Description="{Binding ImageUrl}" />
            <StackLayout>
                <Label Text="{Binding FirstName}"
                       SemanticProperties.Description="{Binding FirstName}" />
                <Label Text="{Binding LastName}"
                       SemanticProperties.Description="{Binding LastName}"
                       Padding="10,0" />
            </StackLayout>
        </HorizontalStackLayout>
    </ViewCell>
</DataTemplate>


By using the 'Aspect' and the 'VerticalOptions', your image height will be loaded as is -
<DataTemplate>
    <ViewCell>
        <HorizontalStackLayout Padding="10">
            <Image Source="{Binding ImageUrl}"
                   SemanticProperties.Description="{Binding ImageUrl}"
                   Aspect="AspectFit"
                   VerticalOptions="Start" />
            <StackLayout>
                <Label Text="{Binding FirstName}"
                       SemanticProperties.Description="{Binding FirstName}" />
                <Label Text="{Binding LastName}"
                       SemanticProperties.Description="{Binding LastName}"
                       Padding="10,0" />
            </StackLayout>
        </HorizontalStackLayout>
    </ViewCell>
</DataTemplate>
 
Share this answer
 
v2
Comments
suhail malik 2023 27-Jun-23 2:25am    
its not working yet, i have updated the question please hava look.
Andre Oosthuizen 27-Jun-23 3:18am    
Please be more specific, what is not working?? In your question, does your images have different heights? Is the width the same? How must this all fit together?
suhail malik 2023 27-Jun-23 3:35am    
yes widths are same of 720px and heights are different, i have tried many combinations but nothing is working
Andre Oosthuizen 27-Jun-23 4:26am    
So, do you want the heights to be the same?
suhail malik 2023 27-Jun-23 4:31am    
no i want to fit the images on screen as it is, this is my second day have not ye succeeded

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900