如何在 MAUI 應用程序中刷新視圖 model 中的數據

Question

我在 XAML 文件中有一個輪播視圖：

     <CarouselView x:Name="AttView" ItemsSource="{Binding Attendances}" IndicatorView="indicatorView">
        <CarouselView.ItemTemplate>
            <DataTemplate x:DataType="model:AttendanceItem">
                <Grid Margin="0, 20, 0, 0" 
                          ColumnDefinitions="*, *" 
                          RowDefinitions="Auto, Auto, Auto, Auto, Auto">
                    <Label Margin="0, 5, 0, 5" Grid.Row="0" Grid.Column="0" Text="Turno actual" />
                    <Label Margin="0, 5, 0, 5" Grid.Row="0" Grid.Column="1" Text="{Binding TurnoActual}" />
                    <Label Margin="0, 5, 0, 5" Grid.Row="1" Grid.Column="0" Text="Hora de llegada" />
                    <Label Margin="0, 5, 0, 5" Grid.Row="1" Grid.Column="1" Text="{Binding HoraLlegada, StringFormat='{0:HH:mm}'}" />
                    <Label Margin="0, 5, 0, 5" Grid.Row="2" Grid.Column="0" Text="Hora de salida" />
                    <Label Margin="0, 5, 0, 5" Grid.Row="2" Grid.Column="1" Text="{Binding HoraSalida, StringFormat='{0:HH:mm}'}" />
                    <Label Margin="0, 5, 0, 5" Grid.Row="3" Grid.Column="0" Text="Horas trabajadas" />
                    <Label Margin="0, 5, 0, 5" Grid.Row="3" Grid.Column="1" Text="{Binding HorasTrabajadas, StringFormat='{0:hh} h {0:mm} m'}" />
                </Grid>
            </DataTemplate>
        </CarouselView.ItemTemplate>
    </CarouselView>
    <IndicatorView x:Name="indicatorView"
               IndicatorColor="Gray"
               SelectedIndicatorColor="Black"
               HorizontalOptions="Center" />

另一方面，視圖模型是這樣定義的：

public ObservableCollection<AttendanceItem> Attendances { get; set; }

public MainViewModel()
{
    Attendances = new ObservableCollection<AttendanceItem>
    {
        new AttendanceItem
        {
            TurnoActual = new TurnoItem
            {
                Inicio = DateTime.Today.AddHours(8),
                Fin = DateTime.Today.AddHours(18),
                Tipo = Enums.TipoTurnoEnum.Fijo
            },
            HoraLlegada = DateTime.Today.AddHours(7).AddMinutes(50)
        }
    };
}

最后，這是該系列的項目：

public class AttendanceItem
{
    public TurnoItem TurnoActual { get; set; }
    public DateTime? HoraLlegada { get; set; }
    public DateTime? HoraSalida { get; set; }
    public TimeSpan HorasTrabajadas { 
        get { 
            if (HoraLlegada is null && HoraSalida is null)
                return TimeSpan.Zero;

            DateTime llegada = HoraLlegada ?? DateTime.Today.Add(TurnoActual.Inicio.TimeOfDay);
            DateTime salida = HoraSalida ?? DateTime.Now;

            return salida - llegada;
        } 
    }
}

注意HorasTrabajadas屬性。 如果HoraSalida是 null，則應顯示當前時間。

所以問題是，如何刷新視圖，以便我可以看到HorasTrabajadas屬性如何每 1 分鍾遞增一次值？

我嘗試在后面的視圖代碼中使用計時器，代碼如下：

    private void Timer_Elapsed(object sender, System.Timers.ElapsedEventArgs e)
    {
        OnPropertyChanged(nameof(MainViewModel.Attendances));
    } 

但它沒有用。

Answer 1

正如 Jason 所指出的，Mode AttendanceItem 必須實現INotifyPropertyChanged接口，.NET 中的數據綁定機制 MAUI 將一個處理程序附加到此PropertyChanged事件，以便在屬性更改時通知它並使用新值更新目標。

您可以參考下面的示例代碼：

public class AttendanceItem: INotifyPropertyChanged 
{
    private DateTime horaLlegada;
    public DateTime HoraLlegada
    {
         get => horaLlegada;
         set
         {
             if (horaLlegada != value)
             {
                    horaLlegada = value;
                    OnPropertyChanged("HoraLlegada");
              }
         }

    }

        public event PropertyChangedEventHandler PropertyChanged;

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

更多信息可以參考數據綁定和MVVM 。