Xamarin表单-重绘视图

Question

I am writing an app using Xamarin Forms XAML, and I need a way to redraw the view.

I have a layout containing multiple Labels and a ListView. I also have a button that when pressed calls an API to download a new set of data which needs to update the controls on the page.

All of my controls are bound correctly so when the data updates in the background, the data does update on the view but the controls are not redrawn and therefore messes up the look of the layout.

Sometimes the data in my ListView can be only 1 or 2 rows but usually will be a lot more. The 1st time the page is drawn, everything looks fine but my problem is when updating the view with data that has a different number of rows in the ListView as the controls do not resize.

Example:

When 1st entering the screen I download data and the ListView has 10 items and so draws 10 rows on the screen

When I press the "Reload Data" button, the data downloaded might now only contain 2 items. The data is updated correctly but the spacing on the screen is still the same size as when 1st drawn (with the 10 items), so I now have a large blank space.

If the opposite of this example is done (1st entry is 2 items, 2nd entry is 10 items), then the space for the ListView is still only 2 items high and therefore you can only see 2 of the 10 items.

What I want to be able to do, is to refresh the controls somehow when downloading new data so that the size of the ListView is redrawn and is always the correct size for the amount of items being displayed.

Answer 1

Had the same issue. I think you are approaching it wrong. ListView doesn't work the way you think it does. It's not designed to always fit just perfectly for it's content. If you want that, you need to calculate the height by yourself and set it to the ListView .

One approach is to change the height of your ListView . You can achieve that by binding a property to HeightRequest :

<ListView
  HeightRequest="{Binding ListViewHeight}">
</ListView>

This is my calculation for ListViewHeight . RowHeight is 72 for Android and 75 for iOS. It's a dirty solution because of hard coded values for height, but it's the best solution I found for the problem. Keep in mind that you need to adjust these values to fit your needs, otherwise your ListView might be too small/tall.

public double ListViewHeight
{
    get
    {
        if (MyItemsList!= null)
        {
            double listViewHeight = MyItemsList.Count * RowHeight;
            if (CanLoadMoreNotifications)
            {
                listViewHeight += RowHeight;
            }
            return listViewHeight;
        }
        return 0;
    }
}

Now every time you're making changes to you list, call RaisePropertyChanged("ListViewHeight"); . This way, your ListView height is calculated and your UI updates.