Displaying a vertical line for the current time

[Douwe]

Hello,

I am looking into a way to display a vertical red line in the RadTimeBar displaying the 'current' time. 

Do you have any suggestions on how to approach this?

I did a quick search using Google to find an image which contains a impression of what I need: http://apps.micw.eu/apps/wetter/wetter.01.png

Best regards,

Douwe

[Martin]

Hello Douwe,

This is not supported by our control out of the box. To achieve it you can use custom implementation. I would suggest two scenarios:

The first one is to draw a border with a red rectangle within and place it over the TimeBar. Then move it along the TimeBar using code behind if that is the desired effect.

The second one is editing the Control template of the RadTimeBar's SelectionThumb. I am attaching a code snipped of the way I have stylized it. I am inheriting the original RadTimeBarStyle template, so there is no need to copy the whole mark up, but only the Setter for the SelectionThumb. There you can hide (with Opacity = "0") the thumbs of the selection border, the data footer with ("Height="0"). You can make further changes to it, such as completely removing the dragging interactions, borders etc. You could bind the position of the right handle to a changing value and the right one's to the start of the TimeBar.

I have used the Style of the RadTimeBar for the VisualStuido Theme, so the resources in the code snippet are called from it. If you are planning on using another theme, you can extract the Control Template of the RadTimeBar for your current theme, use BasedOn in the same manner as in the snippet and remove all the Setters you are not modifying which are direct children of the RadTimeBar Style. Currently I have used only the  <Setter Property="SelectionThumbStyle"> since the customization takes place there.

Regards,
Martin
Telerik

[Douwe]

Hi Martin,

Thank you for your reply, I was able to 'fix' this by (ab)using a second sparkline which displays a vertical line at the desired location (current timestamp). The slider below the radtimebar controls the 'current time' (its range is defined by the selectionstart and selectionend datetimes of the radtimebar) and the vertical time indicator is updated accordingly when adjusting the slider.

I did look into modifying the selectionthumb to also display the time indicator but was having difficulties determining where to draw the vertical line; using a second sparkline solved this issue.

The only thing I need now is to be able to control the height of the second sparkline, it would be nice if I could configure the sparkline such that the complete available vertical space would be used, do you have a suggestion on how to do this? (now the height is the same as the height of the first sparkline).

Kind regards,

Douwe

[Martin]

Hello Douwe,

If you want to fill the entire Height of the ItemsPresenter in the RadTimeBar, you can slightly modify the template of the control. In the ControlTemplate you could set  the Visibility of the element with x:Name set to PART_GroupContainer to Collapsed (it is the element with the semi-opaque group labels), because it most probably is hiding part of the second RadSparkLine. Furthermore, you could set the second RadSparkLine's Height property to a value that is appropriate for your case (if after collapsing the GroupContainer it still doesn't reach full height).

In addition I am sharing a small code snippet that can be used to convert a DateTime to a screen position relative to the timebar control, if at some point you want to position a custom element based on a date.

private Point ConvertDateTimeToPoint(DateTime dateTime, RadTimeBar timeBar)
{
    var periodStart = timeBar.VisiblePeriodStart;
    var periodEnd = timeBar.VisiblePeriodEnd;
    TimeSpan period = periodEnd - periodStart;

    var visibleTimeArea = this.timeBar.ActualWidth;
    var ticks = (dateTime - periodStart).Ticks;

    var pixelsPerTick = visibleTimeArea / period.Ticks;
    var x = ticks * pixelsPerTick;

    return new Point(x, 0);
}

Regards,
Martin
Telerik

[DABSI]

Hi Douwe,

I have a similar problem. Can you attach your code example?

Best regards,

[Martin]

Hello Mauro,

I have prepared a sample solution that solves the current case. This is the XAML for MainWindow.xaml:

<Grid>
        <telerik:RadTimeBar Width="950" Height="250"
                            x:Name="timeBar"
                            Margin="0,30,0,0"
                            PeriodStart="01-01-2016"
                            PeriodEnd="01-01-2017"
                            VisiblePeriodStart="01/01/2016"
                            VisiblePeriodEnd="01/01/2017"
                            IsSnapToIntervalEnabled="True" >
            <telerik:RadTimeBar.Intervals>
                <telerik:YearInterval />
                <telerik:MonthInterval />
                <telerik:WeekInterval />
                <telerik:DayInterval />
            </telerik:RadTimeBar.Intervals>
        </telerik:RadTimeBar>
        <Canvas x:Name ="canvas" Width="{Binding ActualWidth, ElementName=timeBar}"
                Height="{Binding ActualHeight, ElementName=timeBar}">
            <Rectangle x:Name="rect" Width="1" Height="200" Fill="Red" />
        </Canvas>
    </Grid>

And in code behind I have included some methods and attached several events:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        timeBar.Loaded += timeBar_Loaded;
        timeBar.VisiblePeriodChanged += timeBar_VisiblePeriodChanged;
    }

    private void timeBar_VisiblePeriodChanged(object sender, Telerik.Windows.RadRoutedEventArgs e)
    {
        double offset = ConvertDateTimeToOffsetLeft(DateTime.Now, timeBar);
        MoveRect(offset);
    }

    private void timeBar_Loaded(object sender, RoutedEventArgs e)
    {
        rect.Height = timeBar.FindChildByType<ItemControl>().ActualHeight;
        canvas.Margin = timeBar.Margin;

        double offset = ConvertDateTimeToOffsetLeft(DateTime.Now, timeBar);
        MoveRect(offset);
    }

    private void MoveRect(double offset)
    {
        if (offset > 0 && offset < timeBar.ActualWidth)
        {
            if (!rect.IsVisible)
            {
                rect.Visibility = Visibility.Visible;
            }
            Canvas.SetLeft(rect, offset);
        }
        else
        {
            rect.Visibility = Visibility.Collapsed;
        }
    }

    private double ConvertDateTimeToOffsetLeft(DateTime dateTime, RadTimeBar timeBar)
    {
        var periodStart = timeBar.VisiblePeriodStart;
        var periodEnd = timeBar.VisiblePeriodEnd;
        TimeSpan period = periodEnd - periodStart;

        var visibleTimeArea = this.timeBar.ActualWidth;
        var ticks = (dateTime - periodStart).Ticks;

        var pixelsPerTick = visibleTimeArea / period.Ticks;
        double x = ticks * pixelsPerTick;

        return x;
    }
}

I hope that provides a working solution for the current scenario. I have included the case of zooming in and out in the RadTimeBar, but there should be included a handler for dragging the scroll as well.

Regards,
Martin
Telerik by Progress

[DABSI]

Thanks for the answer.

I have another problem: I have a sliding Timebar (on mouse move) with a central element (a rectangle like image). It's possible to intercept, on movement oh the timebar, the date below the rectangle (that change dinamically on mouse move) ?

Best regards,

[Martin]

Hi Mauro,

You can review our article about the events of the RadTimeBar and use the VisiblePeriodChanged and calculate the position of the line you have placed over the RadTimeBar - e.g. if it is in the middle - then it would be ( VisiblePeriodEnd - VisiblePeriodEnd ) / 2

Regards,
Martin
Telerik by Progress