CODEWITHSUNDEEP
xaml
Sara Mannings
Sara Mannings

Reputation: 121

Fit Image inside the frame XAML

I do have the following XAML code. And the output is as shown below in the picture. How can I achieve to fill the image within its grid in the frame? Thank you for your help.

<CollectionView.ItemTemplate>
    <DataTemplate>
        <Grid Padding="10,20,10,0">
            <Frame
                Margin="5"
                BackgroundColor="AntiqueWhite"
                CornerRadius="20"
                HasShadow="True"
                HeightRequest="200"
                HorizontalOptions="FillAndExpand">
                <Grid RowDefinitions="7*,3*">
                    <Image
                        Grid.Row="0"
                        x:DataType="products:PopularProduct"
                        Aspect="AspectFill"
                        HorizontalOptions="FillAndExpand"
                        Source="{Binding FullImageUrl}"
                        VerticalOptions="FillAndExpand" />
                </Grid>
            </Frame>
        </Grid>
    </DataTemplate>
</CollectionView.ItemTemplate>

enter image description here

Upvotes: 0

Views: 40

Answers (1)

Tuk Tuk
Tuk Tuk

Reputation: 362

I would make use of StackLayout with something like this

<CollectionView.ItemTemplate>
    <DataTemplate>
        <StackLayout
            HorizontalOptions="FillAndExpand"
            Orientation="Horizontal"
            VerticalOptions="FillAndExpand">
            <Frame
                Margin="10,20,10,20"
                Padding="0"
                BackgroundColor="AntiqueWhite"
                HasShadow="False"
                HeightRequest="200"
                HorizontalOptions="FillAndExpand">
                <StackLayout Orientation="Vertical">
                    <Frame
                        Padding="0"
                        CornerRadius="20"
                        HasShadow="True"
                        IsClippedToBounds="True">
                        <Grid RowDefinitions="7*,3*">
                            <Image
                                Grid.Row="0"
                                x:DataType="products:PopularProduct"
                                Aspect="AspectFill"
                                HorizontalOptions="FillAndExpand"
                                Source="{Binding FullImageUrl}"
                                VerticalOptions="FillAndExpand" />
                            <StackLayout
                                Grid.Row="1"
                                Margin="10"
                                Orientation="Vertical">
                                <Label Text="Any label if you want here" />
                            </StackLayout>
                        </Grid>
                    </Frame>
                </StackLayout>
            </Frame>
        </StackLayout>
    </DataTemplate>
</CollectionView.ItemTemplate>

Upvotes: 1

Related Questions