Início / coding / Perguntas / 78286381
Accepted
Brett Simonds
Asked: 2024-04-07 09:38:46 +0800 CST

ListView não exibe vinculação ObservableProperty do ViewModel

  • 772

Eu sou novo em .NET MAUI/MVVM/SQLite e em C#. Estou tentando utilizar meu ViewModel para vincular dados da minha classe de modelo. Posso usar o namespace do modelo como minha propriedade de ligação perfeitamente e ele mostra os dados em meu listview. Assim que tento usar meu ViewModel, ele não é mais exibido.

CRUDView XAML funcionando

        <Frame Grid.Row="6" Grid.Column="1" Grid.ColumnSpan="3" BackgroundColor="#B1C0C9" BorderColor="#7989A3">
            <ScrollView Orientation="Vertical">
                <ListView x:Name="listView" 
                          BackgroundColor="Gray" 
                          HasUnevenRows="True"
                          SeparatorVisibility="Default"
                          ItemTapped="listView_ItemTapped"
                          FlexLayout.Grow="1"
                          >
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <VerticalStackLayout Padding="5">
                                    <Label Text="{Binding Question}"
                                           FontSize="17" 
                                           FontFamily="OCRA" 
                                           TextColor="Black"/>
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="50"/>
                                            <ColumnDefinition Width="*"/>
                                            <ColumnDefinition Width="*"/>
                                            <ColumnDefinition Width="Auto"/>
                                        </Grid.ColumnDefinitions>
                                        <Label Text="{Binding Id}"
                                               FontSize="10" 
                                               FontFamily="OCRA" 
                                               TextColor="Black"
                                               Grid.Column="0"
                                               />
                                        <Label Text="{Binding Answer}"
                                               FontSize="15" 
                                               FontFamily="OCRA" 
                                               TextColor="White"
                                               Grid.Column="1"
                                               Padding="10"/>
                                        <Label Text="{Binding Difficulty}"
                                               FontSize="15" 
                                               FontFamily="OCRA" 
                                               TextColor="Black"
                                               Grid.Column="3"
                                               Padding="10"/>
                                    </Grid>
                                    
                                </VerticalStackLayout>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </ScrollView>

        </Frame>

Mostrando dados em ListView

Quando volto a usar o ViewModel para vinculação de dados:

CRUDViewXAML

<Frame Grid.Row="6" Grid.Column="1" Grid.ColumnSpan="3" BackgroundColor="#B1C0C9" BorderColor="#7989A3">
    <ScrollView Orientation="Vertical">
        <ListView x:Name="listView" 
                  BackgroundColor="Gray" 
                  HasUnevenRows="True"
                  SeparatorVisibility="Default"
                  ItemTapped="listView_ItemTapped"
                  FlexLayout.Grow="1"
                  ItemsSource="{Binding Flashcards}">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="vm:CRUDViewModel">
                    <ViewCell>
                        <VerticalStackLayout Padding="5">
                            <Label Text="{Binding Flashcard.Question}"
                                   FontSize="17" 
                                   FontFamily="OCRA" 
                                   TextColor="Black"/>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="50"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <Label Text="{Binding Flashcard.Id}"
                                       FontSize="10" 
                                       FontFamily="OCRA" 
                                       TextColor="Black"
                                       Grid.Column="0"
                                       />
                                <Label Text="{Binding Flashcard.Answer}"
                                       FontSize="15" 
                                       FontFamily="OCRA" 
                                       TextColor="White"
                                       Grid.Column="1"
                                       Padding="10"/>
                                <Label Text="{Binding Flashcard.Difficulty}"
                                       FontSize="15" 
                                       FontFamily="OCRA" 
                                       TextColor="Black"
                                       Grid.Column="3"
                                       Padding="10"/>
                            </Grid>
                            
                        </VerticalStackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ScrollView>

</Frame>

Modelo de visualização

namespace cadflash.ViewModels
{
    public partial class CRUDViewModel : ObservableObject
    {
        [ObservableProperty]
        public ObservableCollection<Flashcard> flashcards = new();

        [ObservableProperty]
        public Flashcard flashcard = new();
        
        public CRUDViewModel()
        {
            Flashcard = new Flashcard();
            Flashcards = [];
        }

Programa Maui

MauiProgram

    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .UseMauiCommunityToolkit()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                    fonts.AddFont("OCRAEXT.ttf", "OCRA");
                });

            builder.Services.AddSingleton<LocalDbService>();
            builder.Services.AddTransient<HomeView>();
            builder.Services.AddTransient<DifficultyView>();
            builder.Services.AddTransient<CRUDView>();
            builder.Services.AddTransient<CRUDViewModel>();
            builder.Services.AddTransient<DifficultyViewModel>();
            builder.Services.AddTransient<HomeViewModel>();


#if DEBUG
            builder.Logging.AddDebug();
#endif

            return builder.Build();
        }
    }
}

CRUDView.cs

CRUDView.xaml.cs

public partial class CRUDView : ContentPage
{
    CRUDViewModel viewModel;
    private readonly LocalDbService localDbService; // This is the service that is used to interact with the local database
    private int _editFlashcardId; // This is the ID of the flashcard that is being edited
    public CRUDView(LocalDbService localDbService)
    {
        InitializeComponent();
        BindingContext = new CRUDViewModel();
        this.localDbService = localDbService;
        Task.Run(async () => await localDbService.GetFlashcardsAsync());
    }

    protected override async void OnAppearing()
    {
        base.OnAppearing();
        listView.ItemsSource = await localDbService.GetFlashcardsAsync();
    }

Nenhum dado no ListView

Foi uma semana de dor agonizante tentando exibir os dados no listview. Hoje descobri como vincular os dados diretamente da classe do modelo. Idealmente, eu gostaria de usar a ligação ViewModel...

mvvm

1 respostas

  1. Best Answer

    Existem alguns problemas com os usos no seu código.

    Primeiro, como você tentou usar o MVVM, você precisa adicionar o código relativo localDbServiceao seu modelo MVVM. Por exemplo, você pode adicionar o localDbServicemétodo de carregamento de dados ao modelo MVVM.

        //private readonly LocalDbService localDbService; // This is the service that is used to interact with the local database

    public CRUDViewModel()
    {
        //initialize localDbService and load data
        //this.localDbService = localDbService;
    }

    Em segundo lugar, como você definiu ItemsSource="{Binding Flashcards}"para o seu ListView, o tipo de dados do ListView não DataTemplatedeve ser .Flashcard<DataTemplate x:DataType="vm:CRUDViewModel">

    Terceiro, remova o prefixo Flashcarddurante a ligação (por exemplo <Label Text="{Binding Flashcard.Id}").

    Consegui esta função com alguns dados falsos.

    Você pode consultar o seguinte código:

    CRUDViewModel.cs

    public partial class CRUDViewModel:ObservableObject
{
    [ObservableProperty]
    public ObservableCollection<Flashcard> flashcards = new();

    [ObservableProperty]
    public Flashcard flashcard = new();


    //private readonly LocalDbService localDbService; // This is the service that is used to interact with the local database


    public CRUDViewModel()
    {
        Flashcard = new Flashcard();
        Flashcards = [];

        //initialize localDbService and load data
        //this.localDbService = localDbService;
       
        GetData();
    }

    public async void GetData() {

        //List<Flashcard>  datas = await localDbService.GetFlashcardsAsync());

        // add the data to Flashcards
        //foreach (Flashcard flashcard in datas) {
        //    Flashcards.Add(flashcard);
        //}

        //add some fake data to variable Flashcards
        Flashcards.Add(new Flashcard { Id = 01, Question = "1+ 1 = ", Answer = "2", Difficulty = "easy" });
        Flashcards.Add(new Flashcard { Id = 02, Question = "1+ 3 = ", Answer = "4", Difficulty = "easy" });
        Flashcards.Add(new Flashcard { Id = 03, Question = "123+163 = ", Answer = "286", Difficulty = "difficult" });

    }
}

    MainPage.xaml

    <?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"
             
             xmlns:models="clr-namespace:MauiMvvmListApp0407.Models"
             x:Class="MauiMvvmListApp0407.MainPage">

    <Frame Grid.Row="6"  Grid.Column="1" Grid.ColumnSpan="3" BackgroundColor="#B1C0C9" BorderColor="#7989A3">
            <ListView x:Name="listView"
                  BackgroundColor="Gray"
                  HasUnevenRows="True"
                  SeparatorVisibility="Default"
                  ItemsSource="{Binding Flashcards}">
                <ListView.ItemTemplate>
                <DataTemplate x:DataType="models:Flashcard">
                        <ViewCell>
                            <VerticalStackLayout Padding="5">
                                <Label Text="{Binding Question}"
                                   FontSize="17"
                                   FontFamily="OCRA"
                                   TextColor="Black"/>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="50"/>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>
                                    <Label Text="{Binding Id}"
                                       FontSize="10"
                                       FontFamily="OCRA"
                                       TextColor="Black"
                                       Grid.Column="0"
                                       />
                                    <Label Text="{Binding Answer}"
                                       FontSize="15"
                                       FontFamily="OCRA"
                                       TextColor="White"
                                       Grid.Column="1"
                                       Padding="10"/>
                                    <Label Text="{Binding Difficulty}"
                                       FontSize="15"
                                       FontFamily="OCRA"
                                       TextColor="Black"
                                       Grid.Column="3"
                                       Padding="10"/>
                                </Grid>

                            </VerticalStackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
    </Frame>
</ContentPage>

    MainPage.xaml.cs

    public partial class MainPage : ContentPage
{
    CRUDViewModel viewModel;
    public MainPage()
    {
        InitializeComponent();

        viewModel = new CRUDViewModel();
        this.BindingContext = viewModel;
    }
}
    • 0

relate perguntas