Search code examples
c#xml.net-maui

.net Maui ViewList Binding with an ObservableCollection


I have a ObservableCollection: tags

and for that the Property: Tags

They should be the ItemsSource for my List View: tagList

Until now I got a List from another method and iterated them into tags the whole time but now that takes too long.

But now I found a simpler way to fill the list without iterating it from one to another but the problem is that. But it doesn't display the tags in the Listview so I tried it to bind it per the xml code but it doesn't seem to work.

Here is the XML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TagEditor.TagPage"
             Title="TagPage">
    <VerticalStackLayout
        Spacing="5"
        HorizontalOptions="Center">

        <RefreshView
            x:Name="RefreshScroll">
            <ScrollView
                    HeightRequest="500"
                    WidthRequest="500"
                    VerticalOptions="StartAndExpand"    
                    VerticalScrollBarVisibility="Always"
                >
                <VerticalStackLayout>
                    <ListView
                        x:Name="tagList"
                        ItemsSource="{Binding Tags}"
                        BackgroundColor="LightGray"
                    >
                    </ListView>
                </VerticalStackLayout>
            </ScrollView>
        </RefreshView>


    </VerticalStackLayout>
</ContentPage>

and here is the c# code

    private ObservableCollection<Tag> tags = new();

    public ObservableCollection<Tag> Tags { get { return tags; }  set { tags = value; } }

    public TagPage(TagFinder tagFinder)
    {
        MessagingCenter.Subscribe<MainPage>(this, "DISCONNECT", (sender) =>
        {
            MainThread.BeginInvokeOnMainThread(() =>
            {
                Application.Current?.CloseWindow(this.Window);
            });
        });
        InitializeComponent();
        tagList.ItemsSource = Tags;
        try
        {
            UpdateSearchresults();
        }
        catch (FileNotFoundException e)
        {
            DisplayAlert("Error", e.Message, "Ok");
        }
    }

What would I have to do so the Tags are beeing used as the ItemsSource?


Solution

  • Based on your code, I did a test ,and it works on my side.

    You can add Cell label to display each item of ListView.

    Please refer to the following code:

      <ListView x:Name="tagList"
                ItemsSource="{Binding Tags}"
                BackgroundColor="LightGray">
            <ListView.ItemTemplate>
                      <DataTemplate>
                           <TextCell Text="{Binding Name}"
                                     Detail="{Binding MyProperty}"/>
                       </DataTemplate>
             </ListView.ItemTemplate>
      </ListView>
    

    note: Name and MyProperty bound to TextCell are all my own definitions.