How to show custom labels and status on custom appointment window using WPF DevExpress and MVVM

问题

I'm using a Scheduler Control in which I want to create a custom appointment window. My Scheduler Control looks like this:

<Grid>
   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="Auto"/>
   </Grid.ColumnDefinitions>
   <dxsch:SchedulerControl x:Name="scheduler" ActiveViewType="WeekView" FirstDayOfWeek="Monday" Grid.Column="0">
      <dxsch:SchedulerControl.OptionsWindows>
         <dxsch:OptionsWindows AppointmentWindowType="{x:Type local:CrearTareaWindow}"/>
      </dxsch:SchedulerControl.OptionsWindows>
      <dxmvvm:Interaction.Behaviors>
         <dxmvvm:EventToCommand EventName="AppointmentAdded" Command="{Binding SaveCommand}" />
         <dxmvvm:EventToCommand Command="{Binding DeleteCommand}" EventName="AppointmentRemoved"/>
         <dxmvvm:EventToCommand Command="{Binding EditCommand}" EventName="AppointmentEdited" />
      </dxmvvm:Interaction.Behaviors>
      <dxsch:SchedulerControl.DataSource>
         <dxsch:DataSource AppointmentsSource="{Binding Tareas}" AppointmentLabelsSource="{Binding Labels}" AppointmentStatusesSource="{Binding Status}">
            <dxsch:DataSource.AppointmentMappings>
               <dxsch:AppointmentMappings
                  Subject="nombre"
                  Description="descripcion"
                  Start="fechaInicio"
                  End="fechaFin">
                  <dxsch:CustomFieldMapping Mapping="custom" Name="custom" />
               </dxsch:AppointmentMappings>
            </dxsch:DataSource.AppointmentMappings>
         </dxsch:DataSource>
      </dxsch:SchedulerControl.DataSource>
   </dxsch:SchedulerControl>
   <dxe:DateNavigator Name="dateNavigator" Grid.Column="1" ShowTodayButton="False">
      <dxe:DateNavigator.StyleSettings>
         <dxsch:SchedulerDateNavigatorStyleSettings Scheduler="{Binding ElementName=scheduler}" />
      </dxe:DateNavigator.StyleSettings>
   </dxe:DateNavigator>
</Grid>

And my custom appointment window looks like this:

<StackPanel Margin="10">
   <TextBlock FontWeight="Bold" Text="Nombre:"/>
   <TextBox Text="{Binding Subject, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
   <TextBlock FontWeight="Bold" Text="Descripción:"/>
   <TextBox Text="{Binding Description, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Height="100"/>
   <TextBlock FontWeight="Bold" Text="Fecha de Inicio:"/>
   <DockPanel>
      <dxe:DateEdit
         x:Name="editorStartDate"
         Width="150"
         DockPanel.Dock="Left"
         Style="{DynamicResource {dxscht:AppointmentWindowThemeKey ResourceKey=Editor_StartDate}}" />
      <dxe:TextEdit
         x:Name="editorStartTime"
         Margin="4,0,0,0"
         DockPanel.Dock="Left"
         Style="{DynamicResource {dxscht:AppointmentWindowThemeKey ResourceKey=Editor_StartTime}}" />
   </DockPanel>
   <TextBlock FontWeight="Bold" Text="Fecha de fin:"/>
   <DockPanel>
      <dxe:DateEdit
         x:Name="editorEndDate"
         Width="150"
         DockPanel.Dock="Left"
         Style="{DynamicResource {dxscht:AppointmentWindowThemeKey ResourceKey=Editor_EndDate}}" />
      <dxe:TextEdit
         x:Name="editorEndTime"
         Margin="4,0,0,0"
         DockPanel.Dock="Left"
         Style="{DynamicResource {dxscht:AppointmentWindowThemeKey ResourceKey=Editor_EndTime}}" />
   </DockPanel>
   <TextBlock Text="Etiqueta:" FontWeight="Bold"/>
   <dxsch:AppointmentLabelEdit/>
   <TextBlock Text="Estatus:" FontWeight="Bold"/>
   <dxsch:AppointmentStatusEdit/>
   <TextBlock FontWeight="Bold" Text="Custom:"/>
   <TextBox Text="{Binding CustomFields.custom, Mode=TwoWay}"/>
   <Grid Margin="0 10">
      <Grid.Resources>
         <Style TargetType="{x:Type Button}">
            <Setter Property="Margin" Value="0 0 10 0"/>
         </Style>
      </Grid.Resources>
      <Grid.ColumnDefinitions>
         <ColumnDefinition/>
         <ColumnDefinition/>
         <ColumnDefinition/>
      </Grid.ColumnDefinitions>
      <Button Grid.Column="0" Content="GUARDAR" Command="{Binding SaveAndCloseAppointmentCommand}"/>
      <Button Grid.Column="1" 
         Content="BORRAR" 
         CommandParameter="{Binding SelectedAppointments[0], ElementName=scheduler}"
         Command="{Binding RemoveAppointmentCommand}"/>
      <Button Grid.Column="2" Content="CANCELAR" Command="{Binding CancelEditingCommand}"/>
   </Grid>
</StackPanel>

In the custom appointment window I'm creating a AppointmentLabelEdit and AppointmentStatusEdit control to show my custom labels and statuses, the problem is that they are not showing. I have binded the AppointmentLabelsSource and AppointmentStatusSource to the Scheduler Control DataSource as the documentation suggest, but I don't find a way to show my custom labels in the custom appointment window. The view model to which the SchedulerControl window is bindend looks like this:

public class ViewModel: ViewModelBase {
  public ObservableCollection < Tarea > Tareas {
    get;
    set;
  } = new ObservableCollection < Tarea > ();
  public ObservableCollection < CustomLabel > Labels {
    get;
    set;
  } = new ObservableCollection < CustomLabel > ();
  public ObservableCollection < CustomStatus > Status {
    get;
    set;
  } = new ObservableCollection < CustomStatus > ();

  public ViewModel() {
    Tareas.Add(new Tarea {
      nombre = "Cita con el doctor",
      descripcion = "Al PPL le duele la panza",
      fechaInicio = new DateTime(2020, 10, 1, 12, 0, 0),
      fechaFin = new DateTime(2020, 10, 1, 14, 0, 0),
      EtiquetaId = 2,
      EstatusId = 1
    });
    Labels.Add(new CustomLabel {
      Id = 1,
      Caption = "DOCTOR",
      Color = Color.Blue
    });
    Labels.Add(new CustomLabel {
      Id = 2,
      Caption = "GUARDIA",
      Color = Color.Green
    });
    Status.Add(new CustomStatus {
      Id = 1,
      Caption = "PENDIENTE",
      Brush = Brushes.AliceBlue
    });
    Status.Add(new CustomStatus {
      Id = 2,
      Caption = "TERMINADA",
      Brush = Brushes.OrangeRed
    });
  }
}

What is the way to show the custom labels and statuses in my custom window?

回答1:

You should use mapping.

<dxsch:DataSource.AppointmentLabelMappings>
    <dxsch:AppointmentLabelMappings Color="Color" Caption="Caption" Id="Id" />
</dxsch:DataSource.AppointmentLabelMappings>
<dxsch:DataSource.AppointmentStatusMappings>
    <dxsch:AppointmentStatusMappings Brush="Brush" Caption="Caption" Id="Id" />
</dxsch:DataSource.AppointmentStatusMappings>

Devexpress documentation (Labels, Statuses, Example).

来源：https://stackoverflow.com/questions/64250567/how-to-show-custom-labels-and-status-on-custom-appointment-window-using-wpf-deve