xaml - 使用 MVVM 刷新 TabbedPage 中的数据

Question

我有一个 TabbedPage，我在其中添加条目，并在其他选项卡中列出数据。使用 MVVM 向数据库添加条目后如何刷新数据？

主页:

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:myMood.Views"
             x:Class="myMood.Views.MainPage"
            BackgroundImage="logo.png">

    <local:Register></local:Register>
    <local:Entries></local:Entries>
    <local:Statistics></local:Statistics>
    <local:Settings></local:Settings>
    <local:About></local:About>
</TabbedPage>

参赛作品:

<?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="myMood.Views.Entries"
             Icon="ic_view_headline_white_24dp.png"
             xmlns:viewModels="clr-namespace:myMood.ViewModels">
    <ContentPage.BindingContext>
        <viewModels:EntriesViewModel />
    </ContentPage.BindingContext>

    <ListView ItemsSource="{Binding MoodEntries}" 
              HasUnevenRows="True"
              Margin="20">
        <ListView.Header>
            <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="30*" />
                <ColumnDefinition Width="50*" />
                <ColumnDefinition Width="50*" />
                <ColumnDefinition Width="50*" />
            </Grid.ColumnDefinitions>

                <Image Source="ic_date_range_black_24dp.png" Grid.Column="0" Grid.Row="0" HorizontalOptions="Center"></Image>
                <Image Source="ic_local_hotel_black_24dp.png" Grid.Column="1" Grid.Row="0" HorizontalOptions="Center"></Image>
                <Image Source="ic_directions_run_black_24dp.png" Grid.Column="2" Grid.Row="0" HorizontalOptions="Center"></Image>
                <Image Source="ic_done_all_black_24dp.png" Grid.Column="3" Grid.Row="0" HorizontalOptions="Center"></Image>
            </Grid>
        </ListView.Header>
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="30*" />
                            <ColumnDefinition Width="50*" />
                            <ColumnDefinition Width="50*" />
                            <ColumnDefinition Width="50*" />
                        </Grid.ColumnDefinitions>
                        <Label Text="{Binding EntryDate, StringFormat='{0:d/M}'}" Grid.Column="0" Grid.Row="0" HorizontalOptions="Center"></Label>
                        <Label Text="{Binding Sleep, StringFormat='{0:0.0}'}" Grid.Column="1" Grid.Row="0" HorizontalOptions="Center"></Label>
                        <Label Text="{Binding Stress, StringFormat='{0:0.0}'}" Grid.Column="2" Grid.Row="0" HorizontalOptions="Center"></Label>
                        <Label Text="{Binding AchivedGoals, StringFormat='{0:0.0}'}" Grid.Column="3" Grid.Row="0" HorizontalOptions="Center"></Label>
                        <Label Text="{Binding Comment, StringFormat='{0:0.0}'}" Grid.Column="0" Grid.ColumnSpan="4" Grid.Row="1"></Label>
                    </Grid>                    
                </ViewCell>                
            </DataTemplate>            
        </ListView.ItemTemplate>
    </ListView>    
</ContentPage>

View 模型:

using myMood.Models;
using System;
using System.Collections.Generic;
using System.Text;

namespace myMood.ViewModels
{
    public class EntriesViewModel
    {
        public List<MoodEntry> MoodEntries { get; set; }

        public EntriesViewModel()
        {
            MoodEntries = App.MoodDatabase.GetMoodEntries();
        }
    }
}

注册 View 模型:

namespace myMood.ViewModels
{
    public class RegisterViewModel : INotifyPropertyChanged
    {
        public MoodEntry MoodEntry { get; set; }
        public DateTime LowerLimitDate { get; set; }
        public DateTime HighLimitDate { get; set; }

        public Command SaveEntry
        {
            get
            {
                return new Command(() =>
                    App.MoodDatabase.SaveMoodEntry(MoodEntry));
            }
        }

        public RegisterViewModel()
        {
            MoodEntry = App.MoodDatabase.GetMoodEntry(DateTime.Today);
            if (MoodEntry == null)
                MoodEntry = new MoodEntry();

            LowerLimitDate = new DateTime(2018, 1, 1);
            HighLimitDate = DateTime.Today;
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

Answer 1

您需要执行 INotifyPropertyChanged View 模型中的界面。因为目前 View 模型没有向 UI 发送数据已更改的信号。

所以你的 View 模型应该是这样的:

public class EntriesViewModel : INotifyPropertyChanged
{
    private List<MoodEntry> _moodEntries;
    public List<MoodEntry> MoodEntries
    {
        get { return _moodEntries; }
        set { _moodEntries = value; OnPropertyChanged(); }
    }

    public EntriesViewModel()
    {
        MoodEntries = App.MoodDatabase.GetMoodEntries();
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}