使用MVVM刷新TabbedPage中的数据

时间:2018-02-06 11:49:16

标签: xaml mvvm xamarin.forms

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

的MainPage:

<?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>

视图模型:

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();
        }
    }
}

注册Viewmodel:

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));
        }
    }
}

1 个答案:

答案 0 :(得分:2)

您需要在viewmodel中实现INotifyPropertyChanged接口。因为当前视图模型不向UI发送数据已更改的信号。

所以你的viewmodel应该是这样的:

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));
    }
}