如何使用WPF DevExpress和MVVM在自定义约会窗口上显示自定义标签和状态

问题描述

我使用的调度程序控件中要创建自定义约会窗口。我的调度程序控件如下所示：

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

我的自定义约会窗口如下：

<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,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"
         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"
         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>

在自定义约会窗口中，我正在创建一个AppointmentLabelEdit和AppointmentStatusEdit控件来显示我的自定义标签和状态，问题是它们没有显示。正如文档建议的那样，我已将AppointmentLabelsSource和AppointmentStatusSource绑定到Scheduler Control DataSource，但是我找不到在自定义约会窗口中显示自定义标签的方法。 SchedulerControl窗口绑定到的视图模型如下所示：

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),fechaFin = new DateTime(2020,14,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
    });
  }
}

在自定义窗口中显示自定义标签和状态的方法是什么？

解决方法

您应该使用映射。

<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文档（Labels，Statuses，Example）。