Customization of the time ruler

[Bracco]

I would like to tweak the timeline to have it work as a "slider" for a video editing like behavior. I have made some tests and tweaks but there are a couple of points I don't manage to tweak:

1. Having a thumb position which can be set by click.

I have managed to display a bar that can move from code using the annotations and a negative margin but I would like to know if there is a way to make it work like a slider thumb (i.e. click or drag&drop)?

2. I have some trouble to find how to use custom interval type to display the text every X seconds but keep some ticks at a smaller interval (see timeline 1).

3. Is it possible to display only specific times (for example beginning and ending time) either on the ruler or as on timeline 3 image?

Note that I am using the NuGet packages and Fluent Dark Theme.

[Martin]

Hi Bracco,

Thank you for the feedback.

We are currently working with limited resources due to a company official holiday and will need additional time to handle this ticket. I am leaving it in the queue, and we will write back to you as soon as possible. Thank you for understanding.

Regards,
Martin
Progress Telerik

[Dilyan Traykov]

Hello Bracco,

Thank you for the provided images.

I will address your inquiries in the order you've defined them:

1. You can handle the various mouse events of the TimelineAnnotation and perform the required operations upon the mouse events. For the purpose, however, you need to set the IsHitTestVisible property to true as it is false by default.

            foreach (var annotation in this.timeline.Annotations)
            {
                annotation.IsHitTestVisible = true;
                annotation.AddHandler(TimelineAnnotation.MouseLeftButtonDownEvent, new MouseButtonEventHandler(TimelineAnnotation_MouseLeftButtonDown));
            }

2. I believe you can achieve this requirement by defining two intervals and specifying an empty format string for the second (smaller) intervals. You can have a look at the Formatter Provider article for information on how to achieve this.

3. I did not find a third image as you suggested, however, I believe you can accomplish this requirement by placing additional elements in the control template of the control. For example, you can define a stack panel with two textblocks bound to the PeriodStart and PeriodEnd properties and align them to the left and right respectively. If you do not believe this would work for you, please send over the image you wanted to attach so that I can try to come up with a more suitable solution.

I hope you find this guidance on the matter helpful. If you need further assistance with the exact implementation in your application, please send over a small sample project which resembles your scenario either in a new support ticket or by providing a download link to a storage provider of your choice.

Regards,
Dilyan Traykov
Progress Telerik