[Solved] TimeRulerItems Style

[Oscar Wahlen]

I have customized the TimeRulerItems using a custom Style Selector but now there is a 1 pixel margin after every n days (see attached screenshot). I can not figure out what is causing this behavior. I want to create equal width columns but the margin is causing each day to shift by 1 pixel. The blocks represent one appointment (e.g. a 7 day appointment is displayed as 7 blocks using a custom appointment brush). But as you can see they are not correctly aligned.

Telerik RadControls for Silverlight 4: 2011.3.1116.1040

MainPage.xaml

<UserControl x:Class="CustomScheduleView.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:CustomScheduleView"
    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="/CustomScheduleView;component/Themes/Custom/CustomTimeRulerItemStyle.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.Resources>
            <local:ScheduleViewModel x:Key="ScheduleViewModel" />
        </Grid.Resources>
        <telerik:RadScheduleView DataContext="{StaticResource ScheduleViewModel}" AppointmentsSource="{Binding AppointmentsSource, Mode=OneWay}"
                                 TimeRulerItemStyleSelector="{StaticResource CustomTimeRulerItemStyleSelector}"
                                 TimeRulerItemTemplateSelector="{StaticResource CustomTimeRulerItemTemplateSelector}">
            <telerik:RadScheduleView.ViewDefinitions>
                <telerik:TimelineViewDefinition MinTimeRulerExtent="3100" MajorTickLength="{Binding MajorTickLength, Mode=OneWay}" MinorTickLength="{Binding MinorTickLength, Mode=OneWay}" GroupTickLength="{Binding GroupTickLength, Mode=OneWay}" VisibleDays="{Binding LargeInterval.Days, Mode=OneWay}" LargeChangeInterval="{Binding LargeInterval, Mode=OneWay}" Title="Month" Orientation="Horizontal" TimerulerGroupStringFormat="{}{0:ddd}" StretchGroupHeaders="False" />
            </telerik:RadScheduleView.ViewDefinitions>
        </telerik:RadScheduleView>
    </Grid>
</UserControl>

ScheduleViewModel.cs

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace CustomScheduleView
{
    using System.Collections.ObjectModel;

    using Telerik.Windows.Controls.ScheduleView;

    public sealed class ScheduleViewModel : ViewModelBase
    {
        private ObservableCollection<Appointment> _oAppointmentsSource;

        private FixedTickProvider _oMajorTickLength;

        private FixedTickProvider _oMinorTickLength;

        private FixedTickProvider _oGroupTickLength;

        private DateTimeInterval _dtLargeInterval;

        public ScheduleViewModel()
            : base()
        {
            this._oAppointmentsSource = new ObservableCollection<Appointment>();
            this._oMajorTickLength = new FixedTickProvider(new DateTimeInterval(0, 1, 0, 0));
            this._oMinorTickLength = new FixedTickProvider(new DateTimeInterval(0, 1, 0, 0));
            this._oGroupTickLength = new FixedTickProvider(new DateTimeInterval(0, 0, 0, 1));
            this._dtLargeInterval = new DateTimeInterval(CalendarHelper.GetEndOfMonth(DateTime.Now).Day, 0);
        }

        public ObservableCollection<Appointment> AppointmentsSource
        {
            get { return this._oAppointmentsSource; }
            set
            {
                this._oAppointmentsSource = value;
                base.OnPropertyChanged("AppointmentsSource");
            }
        }

        public FixedTickProvider MajorTickLength
        {
            get { return this._oMajorTickLength; }
            set
            {
                this._oMajorTickLength = value;
                base.OnPropertyChanged("MajorTickLength");
            }
        }

        public FixedTickProvider MinorTickLength
        {
            get { return this._oMinorTickLength; }
            set
            {
                this._oMinorTickLength = value;
                base.OnPropertyChanged("MinorTickLength");
            }
        }

        public FixedTickProvider GroupTickLength
        {
            get { return this._oGroupTickLength; }
            set
            {
                this._oGroupTickLength = value;
                base.OnPropertyChanged("GroupTickLength");
            }
        }

        public DateTimeInterval LargeInterval
        {
            get { return this._dtLargeInterval; }
            set
            {
                this._dtLargeInterval = value;
                this.OnPropertyChanged("LargeInterval");
            }
        }
    }
}

CustomTimeRulerItemStyle.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:local="clr-namespace:CustomScheduleView">
    <local:MajorTickToFormattedDateConverter x:Key="MajorTickToFormattedDateConverter" />
    <local:MinorTickToFormattedDateConverter x:Key="MinorTickToFormattedDateConverter" />
    <local:CustomTimeRulerItemStyleSelector x:Key="CustomTimeRulerItemStyleSelector">
        <local:CustomTimeRulerItemStyleSelector.HorizontalGroupItemStyle>
            <Style TargetType="telerik:TimeRulerGroupItem">
                <Setter Property="FontFamily" Value="Segoe UI" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="telerik:TimeRulerGroupItem">
                            <Border Background="#FFF6F8FA" BorderThickness="0,0,1,0" BorderBrush="#FFC6CBD2" Height="19">
                                <ContentPresenter x:Name="Content" />
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </local:CustomTimeRulerItemStyleSelector.HorizontalGroupItemStyle>
        <local:CustomTimeRulerItemStyleSelector.MajorTickLineStyle>
            <Style TargetType="telerik:TimeRulerLine">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="telerik:TimeRulerLine">
                            <Border BorderThickness="2.5" BorderBrush="#FFFFFFFF" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </local:CustomTimeRulerItemStyleSelector.MajorTickLineStyle>
        <local:CustomTimeRulerItemStyleSelector.HorizontalLineStyle>
            <Style TargetType="telerik:TimeRulerLine">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="telerik:TimeRulerLine">
                            <Border BorderThickness="2.5" BorderBrush="#FFFFFFFF" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </local:CustomTimeRulerItemStyleSelector.HorizontalLineStyle>
        <local:CustomTimeRulerItemStyleSelector.MajorHorizontalTickStyle>
            <Style TargetType="telerik:TimeRulerItem">
                <Setter Property="FontFamily" Value="Segoe UI" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="telerik:TimeRulerItem">
                            <Border Background="#FFF6F8FA" BorderThickness="0,1" BorderBrush="#FFA0A0A4" Margin="0,1,0,0" Height="21">
                                <ContentPresenter Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </local:CustomTimeRulerItemStyleSelector.MajorHorizontalTickStyle>
        <local:CustomTimeRulerItemStyleSelector.MajorVerticalTickStyle>
            <Style TargetType="telerik:TimeRulerItem">

            </Style>
        </local:CustomTimeRulerItemStyleSelector.MajorVerticalTickStyle>
        <local:CustomTimeRulerItemStyleSelector.MinorHorizontalTickStyle>
            <Style TargetType="telerik:TimeRulerItem">

            </Style>
        </local:CustomTimeRulerItemStyleSelector.MinorHorizontalTickStyle>
        <local:CustomTimeRulerItemStyleSelector.MinorVerticalTickStyle>
            <Style TargetType="telerik:TimeRulerItem">

            </Style>
        </local:CustomTimeRulerItemStyleSelector.MinorVerticalTickStyle>
        <local:CustomTimeRulerItemStyleSelector.MonthViewGroupStyle>
            <Style TargetType="telerik:TimeRulerMonthViewGroupItem">

            </Style>
        </local:CustomTimeRulerItemStyleSelector.MonthViewGroupStyle>
        <local:CustomTimeRulerItemStyleSelector.MonthViewTickStyle>
            <Style TargetType="telerik:TimeRulerMonthViewItem">

            </Style>
        </local:CustomTimeRulerItemStyleSelector.MonthViewTickStyle>
        <local:CustomTimeRulerItemStyleSelector.MonthViewTodayTickStyle>
            <Style TargetType="telerik:TimeRulerMonthViewItem">

            </Style>
        </local:CustomTimeRulerItemStyleSelector.MonthViewTodayTickStyle>
        <local:CustomTimeRulerItemStyleSelector.VerticalGroupItemStyle>
            <Style TargetType="telerik:TimeRulerGroupItem">

            </Style>
        </local:CustomTimeRulerItemStyleSelector.VerticalGroupItemStyle>
        <local:CustomTimeRulerItemStyleSelector.VerticalLineStyle>
            <Style TargetType="telerik:TimeRulerLine">

            </Style>
        </local:CustomTimeRulerItemStyleSelector.VerticalLineStyle>
    </local:CustomTimeRulerItemStyleSelector>
    <local:CustomTimeRulerItemTemplateSelector x:Key="CustomTimeRulerItemTemplateSelector">
        <local:CustomTimeRulerItemTemplateSelector.HorizontalTimelineGroupTemplate>
            <DataTemplate>
                <StackPanel HorizontalAlignment="Center">
                    <TextBlock Text="{Binding DateTime, Mode=OneWay, Converter={StaticResource MajorTickToFormattedDateConverter}}" FontWeight="Bold" Foreground="#FF000000" />
                </StackPanel>
            </DataTemplate>
        </local:CustomTimeRulerItemTemplateSelector.HorizontalTimelineGroupTemplate>
        <local:CustomTimeRulerItemTemplateSelector.HorizontalTimelineMajorItemTemplate>
            <DataTemplate>
                <StackPanel HorizontalAlignment="Center">
                    <TextBlock Text="{Binding DateTime, Mode=OneWay, Converter={StaticResource MinorTickToFormattedDateConverter}}" Foreground="#FF000000" />
                </StackPanel>
            </DataTemplate>
        </local:CustomTimeRulerItemTemplateSelector.HorizontalTimelineMajorItemTemplate>
        <local:CustomTimeRulerItemTemplateSelector.HorizontalTimelineMinorItemTemplate>
            <DataTemplate />
        </local:CustomTimeRulerItemTemplateSelector.HorizontalTimelineMinorItemTemplate>
        <local:CustomTimeRulerItemTemplateSelector.HorizontalWeekMajorItemTemplate>
            <DataTemplate />
        </local:CustomTimeRulerItemTemplateSelector.HorizontalWeekMajorItemTemplate>
        <local:CustomTimeRulerItemTemplateSelector.HorizontalWeekMinorItemTemplate>
            <DataTemplate />
        </local:CustomTimeRulerItemTemplateSelector.HorizontalWeekMinorItemTemplate>
        <local:CustomTimeRulerItemTemplateSelector.HorizontalDayMajorItemTemplate>
            <DataTemplate />
        </local:CustomTimeRulerItemTemplateSelector.HorizontalDayMajorItemTemplate>
        <local:CustomTimeRulerItemTemplateSelector.HorizontalDayMinorItemTemplate>
            <DataTemplate />
        </local:CustomTimeRulerItemTemplateSelector.HorizontalDayMinorItemTemplate>
        <local:CustomTimeRulerItemTemplateSelector.VerticalTimelineGroupTemplate>
            <DataTemplate />
        </local:CustomTimeRulerItemTemplateSelector.VerticalTimelineGroupTemplate>
        <local:CustomTimeRulerItemTemplateSelector.VerticalDayMajorItemTemplate>
            <DataTemplate />
        </local:CustomTimeRulerItemTemplateSelector.VerticalDayMajorItemTemplate>
        <local:CustomTimeRulerItemTemplateSelector.VerticalDayMinorItemTemplate>
            <DataTemplate />
        </local:CustomTimeRulerItemTemplateSelector.VerticalDayMinorItemTemplate>
        <local:CustomTimeRulerItemTemplateSelector.VerticalWeekMajorItemTemplate>
            <DataTemplate />
        </local:CustomTimeRulerItemTemplateSelector.VerticalWeekMajorItemTemplate>
        <local:CustomTimeRulerItemTemplateSelector.VerticalWeekMinorItemTemplate>
            <DataTemplate />
        </local:CustomTimeRulerItemTemplateSelector.VerticalWeekMinorItemTemplate>
    </local:CustomTimeRulerItemTemplateSelector>
</ResourceDictionary>

MajorTickToFormattedDateConverter.cs

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace CustomScheduleView
{
    using System.Windows.Data;

    public sealed class MajorTickToFormattedDateConverter : IValueConverter
    {
        #region IValueConverter Members

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (value is DateTime)
            {
                return String.Format("Week of {0}", ((DateTime)value).ToShortDateString());
            }
            return null;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }

        #endregion
    }
}

MinorTickToFormattedDateConverter.cs

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace CustomScheduleView
{
    using System.Windows.Data;

    public sealed class MinorTickToFormattedDateConverter : IValueConverter
    {
        #region IValueConverter Members

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (value is DateTime)
            {
                return ((DateTime)value).ToString("ddd");
            }
            return null;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }

        #endregion
    }
}