Listview - footer at the bottom right corner

MikilllMikilll ✭✭✭Member ✭✭✭

I want to have a footer below Listview which is placed at the bottom right corner when there is not too much items in the listview. Here is my code:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Todo"
             x:Class="Todo.Views.TodoItems"
             xmlns:viewModels="clr-namespace:Todo.ViewModels"
             xmlns:controls="clr-namespace:Todo.Controls;"
             xmlns:suaveControls="clr-namespace:SuaveControls.Views;assembly=SuaveControls.FloatingActionButton"
             Title="Things to do!">
    <ContentPage.BindingContext>
        <viewModels:TodoItemsViewModel />
    </ContentPage.BindingContext>
    <StackLayout VerticalOptions="FillAndExpand">
        <ListView VerticalOptions="FillAndExpand" x:Name="listView" Margin="20,20,20,0" ItemsSource="{Binding TodoItems}" HasUnevenRows="True" SeparatorVisibility="None">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Frame Padding="5" Margin="7" HasShadow="True" MinimumHeightRequest="80">
                            <Grid VerticalOptions="Center" HorizontalOptions="Center">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="2.5*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="1.5*"/>
                                </Grid.ColumnDefinitions>
                                <Label Grid.Column="0" Text="{Binding Name}" VerticalTextAlignment="Center" HorizontalTextAlignment="Start" Margin="25,0,0,0" />
                                <Switch Grid.Column="1" IsToggled="{Binding Done}" HorizontalOptions="Start"/>
                            </Grid>
                        </Frame>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
            <ListView.Footer>
                <Label Text="lalalala" VerticalOptions="EndAndExpand" HorizontalOptions="End"/>
            </ListView.Footer>
        </ListView>
    </StackLayout>
</ContentPage>

It is not working even if I use FillAndExpand. I was searching on the Internet looking for the solution. Is there any way to achieve that footer at the bottom right corner when there is not too much items in the listview?

Answers

  • seanydaseanyda ✭✭✭✭✭ GBMember ✭✭✭✭✭
    edited June 2018

    Take the ListView out of the StackLayout. That will be restricting the height I think. Replace the StackLayout with a Grid, and place the ListView in a RowDefinition with GridUnitType.Star. Should probably do the trick...

  • MikilllMikilll ✭✭✭ Member ✭✭✭

    Unfortunately, this does not work. @seanyda Below is the example of your solution:

    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="Test.Views.ItemsPage"
                  Title="{Binding Title}"
                 x:Name="BrowseItemsPage">
        <ContentPage.Content>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <ListView Grid.Row="0" x:Name="ItemsListView" 
                    ItemsSource="{Binding Items}"
                    VerticalOptions="FillAndExpand"
                     HasUnevenRows="true">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <StackLayout Padding="10">
                                    <Label Text="{Binding Text}" 
                           LineBreakMode="NoWrap" 
                           Style="{DynamicResource ListItemTextStyle}" 
                           FontSize="16" />
                                    <Label Text="{Binding Description}" 
                           LineBreakMode="NoWrap"
                           Style="{DynamicResource ListItemDetailTextStyle}"
                           FontSize="13" />
                                </StackLayout>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                    <ListView.Footer>
                        <Label Text="lalalal" VerticalOptions="End" HorizontalOptions="End"/>
                    </ListView.Footer>
                </ListView>
            </Grid>
        </ContentPage.Content>
    </ContentPage>
    

    And it looks like this:

    So as you can see putting listview inside Grid does not change anything.

    Any other solutions?

  • NagarunaReddyNagarunaReddy ✭✭ USMember ✭✭

    @mikill
    As you have only one control in the layout, remove stacklayout from the code and try

Sign In or Register to comment.