CODEWITHSUNDEEP
c#xamllistviewxamarinxamarin.forms
AgentRed
AgentRed

Reputation: 72

How do you stretch image in listview in xaml?

i'm creating a category where it displays the different kind of dishes but i'm kinda confused on how to use xaml i tried my best to replicate my design here's the picture image link: https://i.sstatic.net/3dET3.jpg

and this is what i have now. present xaml link:https://i.sstatic.net/f8VSu.jpg

MenuCategories.xaml

  <ListView x:Name="MyCategory" ItemSelected="MyCategory_ItemSelected" >
        <ListView.ItemTemplate>
      <DataTemplate>
                <ViewCell >


                    <Grid x:Name="Categ" ColumnSpacing="0" RowSpacing="0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />

                        </Grid.RowDefinitions>

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

                        <StackLayout Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" HorizontalOptions="Fill" >
                            <Image Source="{Binding cat_image ,StringFormat='https://i.imgur.com/{0:F0}.png'}" Scale="1" />
                        </StackLayout>


                        <StackLayout  Grid.Row="0" Grid.Column="0"  Orientation="Vertical" Grid.ColumnSpan="2" VerticalOptions="Center">
                            <Label Font="30" HorizontalTextAlignment="Center" x:Name="categoryname" Text="{Binding cat_code}" 
                   Style="{DynamicResource ListItemTextStyle}" />
                        </StackLayout>

                    </Grid>


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

  </ListView>

my problem is on how you expand the the width of list in Listview just like in the first image, please help thank you in advance .

Upvotes: 1

Views: 613

Answers (1)

Nick Peppers
Nick Peppers

Reputation: 3251

Unless you have other views you plan on adding into those Row/Columns your ListView contains several unnecessary views in your layout. All you should have to do is set RowHeight on your ListView and have a Grid with an Image with Aspect="AspectFill". Keep in mind depending on the images aspect ratio it may crop some of the images to get it to fill the entire grid.

<ListView RowHeight="200">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid>
                    <Image Source="" Aspect="AspectFill"/>
                    <Label VerticalOptions="Center" HorizontalOptions="Center"/>
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Upvotes: 3

Related Questions