Binding the AppointmentBackground

[Jakkie Esschert van den]

Hi,

I'm trying to Dynamically bind the background color of an Appointment, so it changes based on data in my model. However, I can't get it to update properly when the data in my model changes. Changing the AppointmentContentTemplate doesn't allow me to set the set the entire background, so I guess it has to be done through a Style. I have a working style which set the background correctly, however in Silverlight it seems I can't bind to a Setter. Therefore I cant use a Style binds to my Model, I wrote a custom style selector which selects a style based on the Model data. This works correctly, but doesn't update instantly when the Appointment changes. When I change the Appointment, the background isn't changed until I switch between views. 

Does anyone know how I can make the background color react to changes in my model instantly?

[Dani]

Hello Jakkie,

Generally you would use a StyleSelector to apply different styling to appointments based on some custom logic that you wish to have. However, the style selector sets the style once, and from this point on it is not aware that an appointment changes until you switch between views (appointments get recreated then).

So I would suggest that you use a custom  AppointmentContentTemplate that has an additional element  - a Border for example, and the background property of this element will be data bound to a property from your view model (most likely through a Converter).

Consider the following template:

<DataTemplate x:Key="MyAppointmentContentTemplate">
           <Grid>
               <Border Background="{Binding MyProperty, Converter={StaticResource MyPropertyToBackgroundConverter}}"/>
               <TextBlock Text="{Binding}" />
           </Grid>
 </DataTemplate>

Let me know if this solution works well for you.

Kind regards,
Dani
the Telerik team

[Forest]

Hi,
 
I've tried this solution. It works.
But there is still a small problem.

How can we also change the color of the "Time-markers" place ?  (on the left side of the appointment)

This place has still a white color.

Thank you

[Dani]

Hello Forest,

The solution uses a ContentTemplate for the appointment item, but the white space gap is rather part of the ControlTemplate of the appointment. And the content of the appointment stretches exactly where the light blue color from your screenshot appears.

One option is to use negative margins and try to overlap the gap on the left. However, if you ever use time markers on these appointments, they will be overlapped by your new background. Unless you use semitransparent color.

Another thing you can do is to modify the control template of the appointment so that the content stretches across the entire rectangle and then your content template will take care of the background change.

I hope this will be helpful.

Best wishes,
Dani
the Telerik team