V4.3/4.4 - Adding ListView distorts Grid width and height.

dimash

So, I made a big leap from v3.4 to 4.3, and now I'm having weird problems with listview

I have a grid with grids inside, and one of the grids has to contain a listview which will span for all its columns and rest of the height

(The cyan colored space represents the area where I need the listview to be.)

For this image, I just used a StackLayout in the grid.

BUT, what happens if I replace the StackLayout with ListView, is this:

For some reason, I cannot change the width nor the height of the listview, no matter what I try to do.

Here is the XAML code for this page:

<ContentPage.Content>

    <StackLayout Orientation="Vertical" Padding="{StaticResource PagePadding}">

        <Frame Style="{StaticResource COTPageFrame}"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="CenterAndExpand"
                >

            <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" RowSpacing="5">
                <Grid.RowDefinitions>
                    <!--Frame Title-->
                    <RowDefinition Height="70" />
                    <!--Frame SubTitle-->
                    <RowDefinition Height="auto" />
                    <!--Frame Content-->
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>


                <!--Frame Title-->
                <Grid Grid.Row="0" Padding="{StaticResource FrameTitlePadding}" BackgroundColor="{StaticResource COTFrameTitleBarBackgroundGreen}">
                    <StackLayout Orientation="Horizontal" HorizontalOptions="StartAndExpand" VerticalOptions="Center">
                        <Image Margin="0,0,5,0" Source="user" />

                        <Label Style="{StaticResource COTLabelWhiteExtraLarge}" 
                               Text="My Account"
                               HorizontalTextAlignment="Start"
                               />
                    </StackLayout>
                </Grid>

                <!--Frame Subtitle-->
                <Grid Grid.Row="1" Padding="{StaticResource FrameTitlePadding}">
                    <Label Style="{StaticResource COTLabelBlackLarge}" 
                           Text="Meters"
                           />
                </Grid>

                <!--Frame Content-->
                <Grid Grid.Row="2" Padding="{StaticResource FrameContentPadding}">

                    <!--List Grid-->
                    <Grid RowSpacing="5" ColumnSpacing="0">
                        <Grid.RowDefinitions>
                            <!--List Header-->
                            <RowDefinition Height="50" />
                            <!--List-->
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>

                        <Grid.ColumnDefinitions>
                            <!--Icon-->
                            <ColumnDefinition Width="48" />
                            <!--Info-->
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <!--List Yellow Header-->
                        <Grid Grid.Row="0" Grid.Column="0" BackgroundColor="{StaticResource COTTableTitleBarYellow}">
                            <Label Style="{StaticResource COTLabelBlackMedium}"
                                   HorizontalOptions="Center"
                                   VerticalOptions="Center"
                                   Text="Type"
                                   />
                        </Grid>

                        <Grid Grid.Row="0" Grid.Column="1" BackgroundColor="{StaticResource COTTableTitleBarYellow}" Padding="5,0,0,0">
                            <Label Style="{StaticResource COTLabelBlackMedium}"
                                   HorizontalOptions="StartAndExpand"                                       
                                   VerticalOptions="Center"
                                   Text="Info"
                                   />
                        </Grid>

                        <!--ListView-->
                        <Grid Grid.Row="1" Grid.Column="0" BackgroundColor="Aqua" Grid.ColumnSpan="2">
                            <ListView></ListView> <------ THE TROUBLE MAKER
                        </Grid>
                    </Grid>

                </Grid>

            </Grid>

        </Frame>

        <BoxView HeightRequest="3" 
                 HorizontalOptions="FillAndExpand"
                 BackgroundColor="{StaticResource COTBottomHorizontalLineYellow}"
                 />

        <ImageButton Source="home"
                     HeightRequest="45"
                     WidthRequest="45"
                     BackgroundColor="Transparent"
                     HorizontalOptions="Center"
                     VerticalOptions="Center"
                     Aspect="AspectFit"
                     />

    </StackLayout>

</ContentPage.Content>

UPD: this issue seems to persist in Xamarin.Forms 4.4 also

dimash

Found the issue... Frame HorizontalOptions property should be set to "FillAndExpand"

dimash

Found the issue... Frame HorizontalOptions property should be set to "FillAndExpand"