locked
Refresh data in TabbedPage using MVVM RRS feed

  • Question

  • User365162 posted

    I have a TabbedPage where I add entries and in the other tabs I list data. How can I refresh the data after I've added an entry to database using MVVM?

    MainPage:

    <?xml version="1.0" encoding="utf-8" ?>
    <TabbedPage ....>
    
        <local:Register></local:Register>
        <local:Entries></local:Entries>
        <local:Statistics></local:Statistics>
        <local:Settings></local:Settings>
        <local:About></local:About>
    </TabbedPage>
    

    Entries:

    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage...
                 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>
    

    Entries viewmodel

    namespace myMood.ViewModels
    {
        public class EntriesViewModel : INotifyPropertyChanged
        {
            private ObservableCollection<MoodEntry> _moodEntries;
            public ObservableCollection<MoodEntry> MoodEntries
            {
                get { return _moodEntries; }
                set { _moodEntries = value; OnPropertyChanged(); }
            }
    
            public EntriesViewModel()
            {
                MoodEntries = new ObservableCollection<MoodEntry>(App.MoodDatabase.GetMoodEntries());
            }
    
            public event PropertyChangedEventHandler PropertyChanged;
    
            protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
            {
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
    

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

    What do I need to change for it to refresh entries after I edited/added one entry?

    Tuesday, February 6, 2018 4:43 PM

Answers

  • User180523 posted

    There shouldn't be a need to programmatically 'refresh'. Not with MVVM. That's sort of the point. When the data changes the binded UI updates automatically.

    If you're UI isn't updating, then it isn't aware of the update.

    after I've added an entry to database The database shouldn't matter in updating the UI. The ListView is binded to the MoodEntries collection. So start there. Are you updating that collection with your new data? <ListView ItemsSource="{Binding MoodEntries}"

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Tuesday, February 6, 2018 4:51 PM