CODEWITHSUNDEEP
xamarinxamarin.forms
Ranga B.
Ranga B.

Reputation: 667

Image not scaling properly

I want a simple view with an image inside my CollectionView. The image is cut off to the left and to the right despite the fact that I have set it to AspectFill. What did I wrong?enter image description here

    <CollectionView ItemsSource="{Binding Items}" ItemsLayout="VerticalList">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid Padding="10" Margin="12">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="1*" />
                        <RowDefinition Height="3*" />
                    </Grid.RowDefinitions>

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>

                    <Image Grid.RowSpan="2" Source="{Binding ImageUrl}" Aspect="AspectFill" />

                    <Label Grid.Column="1" VerticalOptions="Center" Text="{Binding Text}" FontAttributes="Bold" />

                    <Label Grid.Row="1" Grid.Column="1" Text="{Binding Description}" VerticalOptions="Start" FontAttributes="Italic" />
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>

Upvotes: 0

Views: 57

Answers (1)

James Mallon
James Mallon

Reputation: 1127

If I was in your position I would also consider re-creating your xaml for this functionality. Really think about the image you are trying to position and how you would like it to be displayed to users consistently across multiple screen resolutions.

Here is a hint

<Grid.ColumnDefinitions>
     <ColumnDefinition Width="Auto" />
     <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
...
<Image Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Source="{Binding ImageUrl}" Aspect="AspectFill" />

Upvotes: 2

Related Questions