[BEGINNER] TableView doesn't fit its content, ListView neither, why ?

DavidCASBONNEDavidCASBONNE USMember ✭✭
edited April 2016 in Xamarin.Forms

Hi all !

I'm very new to Xamarin but I've some experience in C# / WPF due to my daily work.
I started with the MasterDetailPageNavigation example and I'm trying to make a page that presents every components that I want to use in my real project. It's also a try to be more familiar with Xamarin.Forms :)

But I've 2 problems...

  1. Even if my ListView had only 4 items, it shows something like 8 lines... I try to specify various options but no one helps...
    (see screenshots attached #1 - Android and #2 - iOS)

  2. More problematic, my TableView seems to have its own scroll. On iOS it seems to be OK but if I put my finger on the first cell I'm able to scroll the tableview and not the whole page. On Android the tableview is cut in the middle of the 6th cell (but if I use the mouse scroll in Genymotion instead of the click to simulate the finger I'm able to scroll the tableview...). If I comment all components before the tableview it seems to work great but I think there is also the same problem but not visible.
    I've found some problems here on the forums concerning tableview and scrollview (https://forums.xamarin.com/discussion/30412/tableview-inside-scrollview) and try it but without success...
    (see screenshot attached #3 - Android scrolled to the max)

Here is the XAML code :

<?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="MasterDetailPageNavigation.ReminderPage" Title="Rappels">
    <ContentPage.Content>
        <ScrollView VerticalOptions="FillAndExpand">
            <StackLayout VerticalOptions="FillAndExpand">
                <Label Text="Reminder data goes here" />
                <DatePicker />
                <TimePicker />
                <Editor />
                <ListView x:Name="xListView"/>
                <Picker Title="Picker" x:Name="xPicker" />
                <Button Text="Bouton" x:Name="xButton" />
                <ProgressBar x:Name="xProgress" />
                <SearchBar />
                <Slider />
                <Stepper />
                <Switch />
                <TableView Intent="Form" VerticalOptions="FillAndExpand" HasUnevenRows="true">
                    <TableRoot>
                        <TableSection Title="Les EntryCell">
                            <EntryCell Label="entry1" Placeholder="chat" Keyboard="Chat" HorizontalTextAlignment="Start" />
                            <EntryCell Label="entry2" Placeholder="default" Keyboard="Default" HorizontalTextAlignment="Center" />
                            <EntryCell Label="entry3" Placeholder="email" Keyboard="Email" HorizontalTextAlignment="End" />
                            <EntryCell Label="entry4" Placeholder="numeric" Keyboard="Numeric" HorizontalTextAlignment="End" />
                            <EntryCell Label="entry5" Placeholder="tel" Keyboard="Telephone" HorizontalTextAlignment="End" />
                            <EntryCell Label="entry6" Placeholder="text" Keyboard="Text" HorizontalTextAlignment="End" />
                            <EntryCell Label="entry7" Placeholder="url" Keyboard="Url" HorizontalTextAlignment="End" />
                        </TableSection>
                        <TableSection Title="Les autres Cell">
                            <SwitchCell Text="switch" />
                            <TextCell Text="text" Detail="detail" />
                            <ImageCell ImageSource="reminders.png" Text="coucou toi !" />
                            <ViewCell>
                                <StackLayout Orientation="Horizontal">
                                    <Image Source="reminders.png" />
                                    <Label Text="left" TextColor="#f35e20" />
                                    <Label Text="right" HorizontalOptions="EndAndExpand" TextColor="#503026" />
                                </StackLayout>
                            </ViewCell>
                            <ViewCell Height="200">
                                <StackLayout Orientation="Vertical">
                                    <Image Source="reminders.png" />
                                    <Label Text="left2" TextColor="#f35e20" />
                                    <Label Text="right2" HorizontalOptions="EndAndExpand" TextColor="#503026" />
                                </StackLayout>
                            </ViewCell>
                        </TableSection>
                        <TableSection Title="Dernière EntryCell">
                            <EntryCell Label="last entry" Placeholder="last!" />
                        </TableSection>
                    </TableRoot>
                </TableView>
            </StackLayout>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>

Here is the xaml.cs code :

using Xamarin.Forms;
using System;
using System.Collections.Generic;

namespace MasterDetailPageNavigation
{
    public partial class ReminderPage : ContentPage
    {
        public ReminderPage()
        {
            InitializeComponent();

            xPicker.Items.Add("red");
            xPicker.Items.Add("green");
            xPicker.Items.Add("blue");
            xPicker.Items.Add("black");
            xPicker.Items.Add("yellow");
            xPicker.Items.Add("white");
            xPicker.Items.Add("gray");
            xPicker.Items.Add("red");
            xPicker.Items.Add("green");
            xPicker.Items.Add("blue");
            xPicker.Items.Add("black");
            xPicker.Items.Add("yellow");
            xPicker.Items.Add("white");
            xPicker.Items.Add("gray");

            xButton.Clicked += (object sender, System.EventArgs e) =>
            {
                xProgress.Progress = 0;
                xProgress.ProgressTo(1, 1000, Easing.CubicIn);
            };

            List<Person> people = new List<Person>
            {
                new Person("Abigail", new DateTime(1975, 1, 15), Color.Aqua),
                new Person("Bob", new DateTime(1976, 2, 20), Color.Black),
                new Person("Yvonne", new DateTime(1987, 1, 10), Color.Purple),
                new Person("Zachary", new DateTime(1988, 2, 5), Color.Red)
            };

            xListView.ItemsSource = people;
            // Define template for displaying each item.
            // (Argument of DataTemplate constructor is called for 
            //      each item; it must return a Cell derivative.)
            xListView.ItemTemplate = new DataTemplate(() =>
                {
                    // Create views with bindings for displaying each property.
                    Label nameLabel = new Label();
                    nameLabel.SetBinding(Label.TextProperty, "Name");

                    Label birthdayLabel = new Label();
                    birthdayLabel.SetBinding(Label.TextProperty,
                        new Binding("Birthday", BindingMode.OneWay, 
                            null, null, "Born {0:d}"));

                    BoxView boxView = new BoxView();
                    boxView.SetBinding(BoxView.ColorProperty, "FavoriteColor");

                    // Return an assembled ViewCell.
                    return new ViewCell
                    {
                        View = new StackLayout
                        {
                            Padding = new Thickness(0, 5),
                            Orientation = StackOrientation.Horizontal,
                            Children =
                            {
                                boxView,
                                new StackLayout
                                {
                                    VerticalOptions = LayoutOptions.Center,
                                    Spacing = 0,
                                    Children =
                                    {
                                        nameLabel,
                                        birthdayLabel
                                    }
                                }
                            }
                        }
                    };
                });
        }
    }

    public class Person
    {
        public Person(string name, DateTime birthday, Color favoriteColor)
        {
            this.Name = name;
            this.Birthday = birthday;
            this.FavoriteColor = favoriteColor;
        }

        public string Name { private set; get; }

        public DateTime Birthday { private set; get; }

        public Color FavoriteColor { private set; get; }
    };
}

Sorry for the length of these code blocks, if there is any "good practice" here let me know and I will edit if necessary !
(I insist that this is a test code with a lot of copy/paste from the web, it explain why it's ugly and not MVVM ^^ ).

Can you help me please ?

Best Answer

Answers

  • MaxMengMaxMeng NZMember ✭✭✭

    For your first question:
    https://forums.xamarin.com/discussion/39200/how-to-hide-the-empty-rows-of-a-list-view-in-xamrin-forms-in-ios

    In Android, there no empty rows, it's because you set ListView's VerticalOptions to FillAndExpand, so it tries to take up all place as it can.

  • GeraldVersluisGeraldVersluis NLUniversity ✭✭✭✭

    Hi @DavidCASBONNE and welcome to the wonderful world of Xamarin!

    Your first question; in means of technical terms @MaxMeng is right, but there is another side to this story; in iOS it is normal to show empty lines when there isn't enough content. Apple probably has some reason to do this in regard to UX, I reckon it has something to do with giving the user the sense that there could be more content, or content will grow over time.

    However, what you should take from this - in my opinion - is that you should familiarise yourself with the UX customs of each platform and do not implement solutions like the link @MaxMeng provides. You are using Xamarin to achieve a native look and feel, so don't go wasting that advantage.

    Furthermore the scroll problem; the TableView and ListView both have a ScrollView themselves, so you don't wrap them in another ScrollView, because that will behave strangely.

    Happy coding!

  • DavidCASBONNEDavidCASBONNE USMember ✭✭

    Thank you @MaxMeng , I haven't realize that these are empty rows so I don't even think to search this here :) But you say that in Android my problem is FillAndExpand, what should I write ? Nothing ? I've tried other options but they don't work at all.

    Thanks @GeraldVersluis ! You're right, I'm using Xamarin to achieve a native look "but" also to be able to build iOS and Android apps at the same time. I'm not a company, just a single developer that want a good looking app that respects most of platform specific UI / UX and it's not a real problem for me to implement some things like @MaxMeng linked.
    I'm also OK with you that if Apple want to show empty lines there is a reason so I think I would go with other component to achieve want I want if it become a real "problem" in my app.

    For the scrolling problem I'm sorry I don't really understand. In fact in understand that ListView and TableView have a built-in scrollview but how can I do to have the desired UI ? Some lonely components, then a ListView, then a TableView and finally some lonely components and make them scroll in the entire page and not just in the ListView or the TableView ? Is it possible to disable the Scroll in these components ?

    So much questions, but I'm sure you're able to answer all :)
    Again thank you very much for helping me !

  • MaxMengMaxMeng NZMember ✭✭✭

    @DavidCASBONNE so you want dynamic height of listview based on items? Have a look of this:
    blog.lovelyhq.com/setting-listview-height-depending-on-the-items/ (write in Java)

    Once your items source adapter have data, you can call this; and as you can see, it requires extra work for displaying

    ps: I don't think it is a good option for listview (height rely on its children), what if it has images load async?

  • DavidCASBONNEDavidCASBONNE USMember ✭✭
    edited April 2016

    PS : how could I unmark a post as answered ?
    (problem is the post from @MaxMeng is not a solution in fact for me...)

    I find a workaround by copying the "no" hyperlink on another post and modifying to specify the comment id needed ! A little overkill I think :smiley:

  • cfokscfoks USMember

    try to that

      <TableSection Title="Dernière EntryCell">
        <ViewCell>
              <Image Source="reminders.png" />
          </ViewCell>
        <ViewCell>
                 <Label Text="left2" TextColor="#f35e20" />
          </ViewCell>
        <ViewCell>
               <Label Text="right2" HorizontalOptions="EndAndExpand" TextColor="#503026" />
          </ViewCell>
        </TableSection>
    
Sign In or Register to comment.