TimeRulerItems Style

1 posts, 0 answers
  1. Oscar Wahlen
    Oscar Wahlen avatar
    33 posts
    Member since:
    Mar 2010

    Posted 14 Nov 2012 Link to this post

    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: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: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
        }
    }
Back to Top