Search code examples
androidlistviewxamarin.formsfullscreenscreen-size

Display ListView in Full Screen [Xamarin.Forms]


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


Solution

  • 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>