How to access fields of ObservableCollection<Object> in xaml file

55 Views Asked by At

I am trying to print title of my list on MAUI xaml file but title do not appear. I want to have access to Title field and other fields in it. I am using these to print a ToDo list.

here is my xaml file:

<CollectionView 
    ItemsSource="{Binding Items}">

    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="model:ToDoItem">

            <Grid Padding="10"
                  ColumnSpacing="10" 
                  RowSpacing="10"
                  ColumnDefinitions=".60*,.20*,.20*" >

                <Frame BorderColor="#EF7C8E" CornerRadius="5">
                    <Label 
                        Grid.Column="0"
                        TextColor="Black"
                        FontSize="10"
                        Text="{Binding Title}"/>
                </Frame>
                        
                <Button 
                    Grid.Column="1"
                    Text="Done" 
                    TextColor="Black"
                    FontSize="10"
                    Command="{Binding UpdateCommand}"
                    CommandParameter="{Binding Id}"/>
                <Button 
                    Grid.Column="2"
                    Text="Delete" 
                    TextColor="Black"
                    FontSize="10"
                    Command="{Binding DeleteCommand}"
                    CommandParameter="{Binding Id}"/>
                            
            </Grid>

        </DataTemplate>
    </CollectionView.ItemTemplate>

</CollectionView>

Also this is my MainPageViewModel:

public partial class MainPageViewModel : ObservableObject
{
    [ObservableProperty]
    private Guid id;

    [ObservableProperty]
    private bool isDone;

    [ObservableProperty]
    private string title = string.Empty;

    [ObservableProperty]
    private int? priority;

    [ObservableProperty]
    ObservableCollection<ToDoItem> items = [];
}

And my ToDoItem class has Guid id, string Title :

public class ToDoItem(string title, int priority)
{
    public Guid Id = Guid.NewGuid();
    public DateTime CreationTime = DateTime.Now;
    public bool IsDone = false;
    public string Title = title;
    public int Priority = priority;
}
1

There are 1 best solutions below

0
Julian On BEST ANSWER

You need to turn the fields in your ToDoItem class into properties, you cannot bind to fields.

public class ToDoItem(string title, int priority)
{
    // read-only properties
    public Guid Id { get; } = Guid.NewGuid();
    public DateTime CreationTime { get; } = DateTime.Now;

    // public properties with getters and setters
    public bool IsDone { get; set; }
    public string Title { get; set; } = title;
    public int Priority { get; set; } = priority;
}

If you need changes to be propagated (to update UI), you'll need to make them observable like in your ViewModel:

public class ToDoItem(string title, int priority) : ObservableObject
{
    // read-only properties
    public Guid Id { get; } = Guid.NewGuid();
    public DateTime CreationTime { get; } = DateTime.Now;

    // observable priorities will be auto-generated for these backing fields
    [ObservableProperty]
    private bool _isDone;

    [ObservableProperty]
    private string _title = title;

    [ObservableProperty]
    private int _priority = priority;
}