Customizing TickStringFormat

3 posts, 1 answers
  1. Awef
    Awef avatar
    5 posts
    Member since:
    Nov 2012

    Posted 22 Nov 2012 Link to this post

    Hi

    Right now, I have TimerulerMajorTickStringFormat="{}{0:%d}", which gives me "tickstrings" looking like the image below.
    The ticks will look like 1,2,3...31,1,2,3...30,1,2... -- since %d is taking the first day of each month.

    What I'm aiming for is something that looks like 0,1,2,3,4,5,6,7... -- in other words, the difference between the date and the start date in TotalDays.

    Is this possible to achieve?

    Thanks

  2. Answer
    Oscar Wahlen
    Oscar Wahlen avatar
    33 posts
    Member since:
    Mar 2010

    Posted 23 Nov 2012 Link to this post

    I believe you can do that with a custom TimeRulerItemTemplateSelector and a value converter. I will give an example below.

    MainPage.xaml
    <UserControl x:Class="Examples.MainPage"
        xmlns:local="clr-namespace:Examples"
        mc:Ignorable="d"
        d:DesignHeight="300" d:DesignWidth="400" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">
        <UserControl.Resources>
            <ResourceDictionary>
                <ResourceDictionary.MergedDictionaries>
                    <ResourceDictionary Source="TimeRulerItemTemplateSelectorEx.xaml"/>
                </ResourceDictionary.MergedDictionaries>
            </ResourceDictionary>
        </UserControl.Resources>
        <Grid>
            <Grid.Resources>
                <local:ScheduleViewModel x:Key="Model" />
            </Grid.Resources>
            <telerik:RadScheduleView DataContext="{StaticResource Model}" AppointmentsSource="{Binding AppointmentsSource, Mode=OneWay}" TimeRulerItemTemplateSelector="{StaticResource TimeRulerItemTemplateSelectorEx}" VisibleRangeChanged="OnVisibleRangeChanged">
                <telerik:RadScheduleView.ViewDefinitions>
                    <telerik:TimelineViewDefinition />
                </telerik:RadScheduleView.ViewDefinitions>
            </telerik:RadScheduleView>
        </Grid>
    </UserControl>

    MainPage.xaml.cs
    using System;
    using System.Windows.Controls;
      
    namespace Examples
    {
        using Telerik.Windows.Controls;
      
        public partial class MainPage : UserControl
        {
            public MainPage()
            {
                InitializeComponent();
            }
      
            private void OnVisibleRangeChanged(object sender, EventArgs e)
            {
                Model.VisibleRange = ((RadScheduleView)sender).VisibleRange;
            }
        }
    }

    TimeRulerItemTemplateSelectorEx.cs
    using System.Windows;
      
    namespace Examples
    {
        using Telerik.Windows.Controls;
      
        public sealed class TimeRulerItemTemplateSelectorEx : TimeRulerItemTemplateSelector
        {
            public TimeRulerItemTemplateSelectorEx() : base() { }
      
            public override DataTemplate SelectTemplate(object item, DependencyObject container, ViewDefinitionBase activeViewDeifinition)
            {
                return base.SelectTemplate(item, container, activeViewDeifinition);
            }
        }
    }

    TimeRulerItemTemplateSelectorEx.xaml
    <ResourceDictionary
        xmlns:local="clr-namespace:Examples">
        <local:MinorTickToFormattedDateConverter x:Key="MinorTickToFormattedDateConverter" />
        <local:TimeRulerItemTemplateSelectorEx x:Key="TimeRulerItemTemplateSelectorEx">
            <local:TimeRulerItemTemplateSelectorEx.HorizontalTimelineGroupTemplate>
                <DataTemplate />
            </local:TimeRulerItemTemplateSelectorEx.HorizontalTimelineGroupTemplate>
            <local:TimeRulerItemTemplateSelectorEx.HorizontalTimelineMajorItemTemplate>
                <DataTemplate>
                    <StackPanel HorizontalAlignment="Center">
                        <TextBlock Text="{Binding DateTime, Mode=OneWay, Converter={StaticResource MinorTickToFormattedDateConverter}}" Foreground="#FF000000" />
                    </StackPanel>
                </DataTemplate>
            </local:TimeRulerItemTemplateSelectorEx.HorizontalTimelineMajorItemTemplate>
            <local:TimeRulerItemTemplateSelectorEx.HorizontalTimelineMinorItemTemplate>
                <DataTemplate />
            </local:TimeRulerItemTemplateSelectorEx.HorizontalTimelineMinorItemTemplate>
            <local:TimeRulerItemTemplateSelectorEx.HorizontalWeekMajorItemTemplate>
                <DataTemplate />
            </local:TimeRulerItemTemplateSelectorEx.HorizontalWeekMajorItemTemplate>
            <local:TimeRulerItemTemplateSelectorEx.HorizontalWeekMinorItemTemplate>
                <DataTemplate />
            </local:TimeRulerItemTemplateSelectorEx.HorizontalWeekMinorItemTemplate>
            <local:TimeRulerItemTemplateSelectorEx.HorizontalDayMajorItemTemplate>
                <DataTemplate />
            </local:TimeRulerItemTemplateSelectorEx.HorizontalDayMajorItemTemplate>
            <local:TimeRulerItemTemplateSelectorEx.HorizontalDayMinorItemTemplate>
                <DataTemplate />
            </local:TimeRulerItemTemplateSelectorEx.HorizontalDayMinorItemTemplate>
            <local:TimeRulerItemTemplateSelectorEx.VerticalTimelineGroupTemplate>
                <DataTemplate />
            </local:TimeRulerItemTemplateSelectorEx.VerticalTimelineGroupTemplate>
            <local:TimeRulerItemTemplateSelectorEx.VerticalDayMajorItemTemplate>
                <DataTemplate />
            </local:TimeRulerItemTemplateSelectorEx.VerticalDayMajorItemTemplate>
            <local:TimeRulerItemTemplateSelectorEx.VerticalDayMinorItemTemplate>
                <DataTemplate />
            </local:TimeRulerItemTemplateSelectorEx.VerticalDayMinorItemTemplate>
            <local:TimeRulerItemTemplateSelectorEx.VerticalWeekMajorItemTemplate>
                <DataTemplate />
            </local:TimeRulerItemTemplateSelectorEx.VerticalWeekMajorItemTemplate>
            <local:TimeRulerItemTemplateSelectorEx.VerticalWeekMinorItemTemplate>
                <DataTemplate />
            </local:TimeRulerItemTemplateSelectorEx.VerticalWeekMinorItemTemplate>
        </local:TimeRulerItemTemplateSelectorEx>
    </ResourceDictionary>

    MinorTickToFormattedDateConverter.cs
    using System;
      
    namespace Examples
    {
        using System.Windows.Data;
      
        public sealed class MinorTickToFormattedDateConverter : IValueConverter
        {
            public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                if (value is DateTime && Model.VisibleRange != null)
                {
                    return ((DateTime)value).Subtract(Model.VisibleRange.Start).TotalDays;
                }
                return null;
            }
      
            public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                throw new NotImplementedException();
            }
        }
    }

    Model.cs
    namespace Examples
    {
        using System.Collections.ObjectModel;
        using System.ComponentModel;
      
        using Telerik.Windows.Controls.ScheduleView;
      
        public sealed class ScheduleViewModel : INotifyPropertyChanged
        {
            private ObservableCollection<Appointment> _oAppointmentsSource;
      
            public ScheduleViewModel()
            {
                this._oAppointmentsSource = new ObservableCollection<Appointment>();
            }
      
            internal static IDateSpan VisibleRange { get; set; }
      
            public ObservableCollection<Appointment> AppointmentsSource
            {
                get { return this._oAppointmentsSource; }
                set
                {
                    this._oAppointmentsSource = value;
                    this.OnPropertyChanged("AppointmentsSource");
                }
            }
      
            public event PropertyChangedEventHandler PropertyChanged;
      
            public void OnPropertyChanged(string propertyName)
            {
                if (this.PropertyChanged != null)
                {
                    this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
                }
            }
        }
    }
  3. DevCraft banner
  4. Awef
    Awef avatar
    5 posts
    Member since:
    Nov 2012

    Posted 23 Nov 2012 Link to this post

    Thank you. That works.
Back to Top