Binding color of timeline item to Brush Color

[Pavel]

I am having a lot of trouble trying to bind a color of a timeline item to a specific color chosen by the user. I had thought I had the appropriate color to brush converter, and such, but whenever I run the application, the item color doesn't show up and appears transparent, but when I select a specific color in the XAML code, it works without a problem. However, the selection_changed event doesn't get fired at all.

Here is an example template I am using for the timeline item control

<DataTemplate x:Key="ItemStandardTemplate">
   <Border Height="10" BorderBrush="Gray">
       <Rectangle Height="7" VerticalAlignment="Center">
           <Rectangle.Fill>
               <SolidColorBrush Color="{Binding Color}"/>
           </Rectangle.Fill>
       </Rectangle>
    </Border>
</DataTemplate>

I then apply this template to the timeline control using the normal static reference, but nothing shows up. The DataContext is set correctly as other properties from the same class show up in other controls without a problem.

A couple of notes, we do have the ExpressionDark theme applied via the StyleManager reference.

If there is another way to maintain the selection_changed event and still be able to update the color when a user changes it, then I am all ears.

I am fresh out of idea's and the examples don't seem to help.

Paul

[Pavel]

and if I use following code as reference in an example:

<Style TargetType="telerik:TimelineItemGroupControl" BasedOn="{StaticResource TimelineItemGroupControlStyle}">
            <Setter Property="IsExpanded" Value="True" />
            <Setter Property="ExpandMode" Value="{Binding GroupExpandMode, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=telerik:RadTimeline}}" />
        </Style>

I am unable to find the "TimelineItemGroupControlStyle". It fails to find the reference in Visual Studio....

Paul

[Tsvetie]

Hello Paul,

Straight to your questions:

1. In order to extract the color from the DataItem, you should use the following binding: 

   <DataTemplate x:Key="ItemStandardTemplate">
       <Border Height="10" BorderBrush="Gray">
           <Rectangle Height="7" VerticalAlignment="Center">
               <Rectangle.Fill>
                   <SolidColorBrush Color="{Binding DataItem.Color}"/>
               </Rectangle.Fill>
           </Rectangle>
       </Border>
   </DataTemplate>

2. I could not quite understand your question regarding the SelectionChanged event. In case you are referring to this PITS item, the items describes a workaround that you can use. The workaround is demonstrated in our First Look demo as well.
3. The Style that you have taken from our online demos is based on the implicit styles of the RadTimeline control. In order to use this syntax, you should use the NoXaml DLLs. For additional information, please refer to our online documentation.

Regards,
Tsvetie
Telerik

[Pavel]

So, I read the note about the PITS system and am implemented the suggested workaround in the first demo,
however, the suggested binding still does not work within the context of the example. I need to do operations 
based on the selection_changed event, but now the binding is not quite working, even with the DataItem.

<Style x:Key="ItemsStandardStyle" TargetType="local:CustomTimelineControl">
  <Setter Property="Template">
    <Setter.Value>
       <ControlTemplate TargetType="local:CustomTimelineControl">
         <Border Height="30" Background="#01FFFFFF" Margin="0,0,0,10">
           <vsm:VisualStateManager.VisualStateGroups>
              <vsm:VisualStateGroup x:Name="CommonStates">
                 <vsm:VisualState x:Name="Normal" />
                 <vsm:VisualState x:Name="MouseOver">
                 <Storyboard>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="StandardItem" Storyboard.TargetProperty="Background" Duration="0.00:00:00.05">
                          <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0" Value="{StaticResource StandardItem_Background_MouseOver}" />
                      </ObjectAnimationUsingKeyFrames>
                  </Storyboard>
              </vsm:VisualState>
           </vsm:VisualStateGroup>
        </vsm:VisualStateManager.VisualStateGroups>
          <Border x:Name="StandardItem" Height="10" Margin="0,0,0,5" BorderBrush="Gray" BorderThickness="1" Background="{Binding Path=DataItem.Color, Converter={StaticResource ColorToBrushValueConverter}, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=telerik:RadTimeline}}">
            <Rectangle Height="7" VerticalAlignment="Center" Fill="Transparent"/>
          </Border>
      </Border>
         <ControlTemplate.Triggers>
           <Trigger Property="IsSelected" Value="True">
              <Setter TargetName="StandardItem" Property="Cursor" Value="Arrow" />
           </Trigger>
         </ControlTemplate.Triggers>
       </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

[Pavel]

I figured it out. I didn't need the find ancestor code and my converter was returning an actual brush vs string code of the intended color.

Paul