2

I need the items in my listView to have a height so it the list exactly fits the screen. Here's my code given below. I tried setting the Height of rows in my grid to a custom value, but that would work well, fitting the screen in some devices, while there would be an empty space in other devices due to a different screen size.

       <ListView  
              ItemsSource="{Binding PenStocks}"
              ItemSelected="Event_ItemSelected"
              ItemTapped="Event_ItemTapped"
              SeparatorVisibility="None"
              Margin="5,5,5,0"
              >
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid Padding="9" ColumnSpacing="0" RowSpacing="0" HorizontalOptions="FillAndExpand" >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0.408*"/>
                        <ColumnDefinition Width="0.051*"/>
                        <ColumnDefinition Width="0.252*"/>
                        <ColumnDefinition Width="0.033*"/>
                        <ColumnDefinition Width="0.153*"/>
                        <ColumnDefinition Width="0.102*"/>
                    </Grid.ColumnDefinitions>

What can I do for this? Please help me and thank you!

Kazi Mohammad Ali Nur Romel
  • 15,301
  • 2
  • 13
  • 26
Kalindu
  • 111
  • 2
  • 9

3 Answers3

1

EDIT: Rewrote this to use a bindablelayout.

View:

 <StackLayout x:Name="ParentFlexLayout" BindableLayout.ItemsSource="{Binding Colors}" HorizontalOptions="FillAndExpand" >
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <Frame BackgroundColor="{Binding .}" VerticalOptions="FillAndExpand"/>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

Here we use a bindablelayout - it's very flexible, so you could give it at go and see it it meets your needs

Codebehind:

  public ObservableCollection<Color> Colors { get; set; } = new ObservableCollection<Color>();
    public MainPage()
    {
        InitializeComponent();
        BindingContext = this;
        Colors.Add(Color.Blue);
        Colors.Add(Color.Red);
        Colors.Add(Color.Green);
        Colors.Add(Color.Yellow);
    }

Result: enter image description here

OneBigQuestion
  • 149
  • 6
  • 19
  • Hello mate, thank you for your response, but in your answer, the first element occupies the entire screen, whereas should it be with all 4 colors displayed on the screen, while the row height being of each color being the same and the collectionView spreading to occupy the screen. So, in my case, what I want is for the collectionView with all elements to fit the entire screen and not just a single element. Thank you! – Kalindu Feb 07 '22 at 13:05
  • Is the amount of rows dynamic? – OneBigQuestion Feb 07 '22 at 17:07
  • See updated answer. Now all elements have the excact size , youll just have to add a gesture for each one if you want them to be selectable. – OneBigQuestion Feb 07 '22 at 17:34
  • Thanks a lot man, this fixed my issue! This is a life saver! – Kalindu Feb 08 '22 at 06:22
  • Np - glad it helped. Don’t forget to accept answer so it can help others – OneBigQuestion Feb 08 '22 at 07:12
0

If you want to your listViewItem to stretch to the height of it's inner control you can use

<RowDefinition Height="Auto"/>

It would be better if you share some screen shots.

Or you can check out the below post:

RowDefinition Height not working when using bound property on Grid in ListView?

Kazi Mohammad Ali Nur Romel
  • 15,301
  • 2
  • 13
  • 26
0

I tried using an absolutelayout within the viewcell, but when I do, it doesn't work either.

                               <AbsoluteLayout AbsoluteLayout.LayoutBounds="0,0,1,0.167" AbsoluteLayout.LayoutFlags="All">
Kalindu
  • 111
  • 2
  • 9