Forum Xamarin.Forms

Announcement:

The Xamarin Forums have officially moved to the new Microsoft Q&A experience. Microsoft Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

To create new threads and ask questions head over to Microsoft Q&A for .NET and get involved today.

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

dimashdimash Member ✭✭
edited December 2019 in Xamarin.Forms

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

Best Answer

  • dimashdimash Member ✭✭
    Accepted Answer

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

Answers

  • dimashdimash Member ✭✭
    Accepted Answer

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

Sign In or Register to comment.