Display ListView in Full Screen [Xamarin.Forms]

2.4k views Asked by At

I am having problem with ListView, I need to show this list in Full Screen. There are 55 rows in my ItemSource.

Here is my code snippet.

<Grid Grid.Row="0" BackgroundColor="#5FB1E0">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto"></ColumnDefinition>
      <ColumnDefinition Width="*"></ColumnDefinition>
      <ColumnDefinition Width="Auto"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <StackLayout Grid.Column="0" Margin="10">
      <Image x:Name="ImageMenu" Source="{local:ImageResource HRiS.images.menu.png}" HeightRequest="40"></Image>
    </StackLayout>
    <Label Grid.Column="1" x:Name="LabelHome" FontSize="18" TextColor="White" VerticalTextAlignment="Center"></Label>
  </Grid>
  <ListView Grid.Row="1" x:Name="listEmployeeDirectory" HasUnevenRows="True" VerticalOptions="FillAndExpand"
            IsPullToRefreshEnabled="True" >
    <ListView.ItemTemplate>
      <DataTemplate>
        <ViewCell>
          <StackLayout Padding="5,10">
            <Grid>
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
              </Grid.ColumnDefinitions>
              <Image Grid.Column="0" HeightRequest="50">
                <Image.Source>
                  <UriImageSource Uri="{Binding ProfileImage}" CacheValidity="5" CachingEnabled="true" />
                </Image.Source>
              </Image>
              <Label Grid.Column="1" Text="{Binding FullName}" HorizontalOptions="StartAndExpand"
                     VerticalTextAlignment="Center" TextColor="Black" FontSize="18" FontFamily="Droid Sans Mono" />
            </Grid>
          </StackLayout>
        </ViewCell>
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>
</Grid>

Here is the Screenshot. enter image description here

2

There are 2 answers

2
Chandresh Khambhayata On BEST ANSWER

This issue is resolved, I had used the Grid layout and now I have changed it to StackLayout and it's working properly now.

Thank You :)

<StackLayout AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All" x:Name="HomeChildContainer">
            <Grid BackgroundColor="#297FB8">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50">
                    </ColumnDefinition>
                    <ColumnDefinition Width="*">
                    </ColumnDefinition>
                    <ColumnDefinition Width="Auto">
                    </ColumnDefinition>
                </Grid.ColumnDefinitions>
                <StackLayout Grid.Column="0" Margin="10" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
                    <Image x:Name="ImageMenu" Source="menu.png" HeightRequest="40" />
                </StackLayout>
                <Label Grid.Column="1" x:Name="LabelHome" FontSize="18" TextColor="White" VerticalTextAlignment="Center">
                </Label>
            </Grid>
            <Entry Grid.Row="1" x:Name="TextSerach" Keyboard="Chat" Placeholder="Search Employee" FontSize="13" FontFamily="Droid Sans Mono" />
            <ListView Grid.Row="2" x:Name="listEmployeeDirectory" HasUnevenRows="True" VerticalOptions="FillAndExpand" IsPullToRefreshEnabled="True" HorizontalOptions="FillAndExpand">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout Padding="5,10">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto">
                                        </ColumnDefinition>
                                        <ColumnDefinition Width="*">
                                        </ColumnDefinition>
                                    </Grid.ColumnDefinitions>
                                    <Image Grid.Column="0" Source="{Binding ProfileImage}" HeightRequest="50">
                                    </Image>
                                    <Label Grid.Column="1" Text="{Binding FullName}" HorizontalOptions="StartAndExpand" VerticalTextAlignment="Center" TextColor="Black" FontSize="16" FontFamily="Droid Sans Mono" />
                                </Grid>
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
2
sumeet On

Try this You just need to put your element

 <Grid VerticalOptions="StartAndExpand" HorizontalOptions="CenterAndExpand" >
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
     <StackLayout Grid.Row="0" Margin="10" HeightRequest="50" BackgroundColor="Gray" Orientation ="Horizontal">
       <Image  HeightRequest="10"/>
       <Label Text="Test" FontSize="18" TextColor="White" VerticalTextAlignment="Center"/>
    </StackLayout>
    <ListView Grid.Row="1" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" IsVisible="true" ItemTapped="ItemTapped" ItemsSource="{Binding Projects}">
        <ListView.ItemTemplate>
          <DataTemplate>
            <ViewCell>
              <StackLayout BackgroundColor="#eee" Orientation="Vertical">
                <StackLayout Orientation="Horizontal">
                  <Image Source="{Binding image}"/>
                  <Label Text="{Binding title}" TextColor="#f35e20" />
                </StackLayout>
              </StackLayout>
            </ViewCell>
          </DataTemplate>
        </ListView.ItemTemplate>
      </ListView>
    <StackLayout Grid.Row="2" Margin="10" HeightRequest="50" BackgroundColor="Gray" Orientation ="Horizontal">
      <Label Text="Test" FontSize="18" TextColor="White" VerticalTextAlignment="Center"></Label>
    </StackLayout>
  </Grid>

enter image description here