[FlowListView] Trying to use it coming from ListView

[guiu23]

Hi,

My problem is that I was using ListView but it didn't accomplish my goals and I seen that the most useful thing would be to use FlowListView. I addapted my code and the GUI don't show me any kind of data in the implied page. Before that change ListView was showing all data in "factors" and now I can't see anything.

What I had was:

C# HomeViewModel.cs

using System;
using System.ComponentModel;
using System.Collections.ObjectModel;
using HotelSaver.Models;

namespace HotelSaver.ViewModel
{
    public static class HomeViewModel
    {
        public static ObservableCollection<Factor> factors {
            get;
            set;
        }
        static HomeViewModel()
        {
            HomeViewModel.factors = DataSource.getFactors();
        }
    }
}

XAML HomePage.xaml

<?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="HotelSaver.HomePage"
             Title="Inici"
             xmlns:local="clr-namespace:HotelSaver.ViewModel;assembly=HotelSaver">
    <ContentPage.Content>
            <ListView x:Name="FactorsListView" SeparatorVisibility="None" ItemsSource="{x:Static local:HomeViewModel.factors}" ItemSelected="listSelection">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout Orientation="Horizontal">
                                <Label Text="{Binding name}" HorizontalOptions="CenterAndExpand" FontSize="18" />
                                <Label Text="100%" TextColor="Green" HorizontalOptions="End" />
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
    </ContentPage.Content>
</ContentPage>

And know I changed the XAML to:

XAML HomePage.xaml

<?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="HotelSaver.HomePage"
             Title="Inici"
             xmlns:local="clr-namespace:HotelSaver.ViewModel;assembly=HotelSaver"
             xmlns:flv="clr-namespace:DLToolkit.Forms.Controls;assembly=DLToolkit.Forms.Controls.FlowListView">
    <ContentPage.Content>
            <flv:FlowListView x:Name="FactorsView" FlowColumnCount="3" SeparatorVisibility="None" HasUnevenRows="False" FlowItemsSource="{x:Static local:HomeViewModel.factors}" FlowItemTappedCommand="listSelection">
                <flv:FlowListView.FlowColumnTemplate>
                    <DataTemplate>
                        <Label Text="{Binding name}" HorizontalOptions="CenterAndExpand" XAlign="Center" YAlign="Center" FontSize="18" />
                        <Label Text="100%" TextColor="Green" XAlign="Center" YAlign="Center" HorizontalOptions="CenterAndExpand" />
                    </DataTemplate>
                </flv:FlowListView.FlowColumnTemplate>
    </ContentPage.Content>
</ContentPage>

I don't know what I'm doing bad. I inserted FlowListView.Init(); in App.xaml.cs and everything needed...

Thank you for your time.

[vlkam]

<DataTemplate> <Label Text="{Binding name}" HorizontalOptions="CenterAndExpand" XAlign="Center" YAlign="Center" FontSize="18" /> <Label Text="100%" TextColor="Green" XAlign="Center" YAlign="Center" HorizontalOptions="CenterAndExpand" /> </DataTemplate>

Labels have to be inside a Layout. Grid or Stack as example You missed StackLayout

[guiu23]

Thanks for your quick reply!

But this is not the issue. I have tried a lot of things inside <DataTemplate> and now I have it like this:

<flv:FlowListView x:Name="FactorsView" FlowColumnCount="3" SeparatorVisibility="None" HasUnevenRows="False" FlowItemsSource="{x:Static local:HomeViewModel.factors}" FlowItemTappedCommand="listSelection">
                <flv:FlowListView.FlowColumnTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout Orientation="Horizontal">
                                <Label Text="{Binding name}" HorizontalOptions="CenterAndExpand" XAlign="Center" YAlign="Center" FontSize="18" />
                                <Label Text="100%" TextColor="Green" XAlign="Center" YAlign="Center" HorizontalOptions="CenterAndExpand" />
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </flv:FlowListView.FlowColumnTemplate>
</flv:FlowListView>

And It didn't work... I don't know what could be happening.

[vlkam]

Do you try to remove ViewCell section ? It's not necessary for FlowList

[guiu23]

Yes, I've tried it...

[vlkam]

Try to add this line var a = HomeViewModel.factors; in code behind file before InitializeComponent();

Pay attention on property "factors" It's static property in static class. If it will be changed HomePage can't see that changes

[guiu23]

Where I'm supposed to add this and what would be the purpose? In HomePage.xaml.cs?

"factors" must have been filled because when I use ListView catch all "factors" inner data...

[vlkam]

Yes, in HomePage.xaml.cs right before InitializeComponent();

The ViewModel which doesn't implement INotifyPropertyChanged, static fields, the View without bindings... it's very unusual schema. I think problem in that

[guiu23]

I don't know what is happening...

When I add this line, it catch the four items how is supposed, so this is not the problem:

[vlkam]

Hmmm... I'd recommend remove all attributes except FlowItemsSource

Especially FlowItemTappedCommand="listSelection" Does it work with List ? I dont understand this

[guiu23]

I think I've missunderstood FlowItemTappedCommand but this is not the case... I've tried it with all attributes, without... It have to be something I can't see... How I could make dumb test to insert in FlowItemsSource ?

You could suggest me anything, I mean, I made with static attributes because it's how I saw one example... but if it would be better to do it in some other way, I listen you.

[vlkam]

Here is the minimal project with FlowList

FlowListTest.zip

[angelru]

I have the same issue... <flv:FlowListView.ItemTemplate> it does not work?

<flv:FlowListView.FlowColumnTemplate> it works...

any idea?

[guiu23]

I solved it not using static classes. If you have it may be the problem.

I'll let this thread open because of the doubts of @angelru. Good luck.

[angelru]

@guiu23 but does it work with <flv:FlowListView.ItemTemplate> ?

loadingcommand not work...