TimeLineViewDefinition header format

8 posts, 0 answers
  1. Christie Admin
    Christie Admin avatar
    239 posts
    Member since:
    Aug 2013

    Posted 16 Jan 2014 Link to this post

    Hi,

    I would like to know how it's possible in the header of each column to have only the first day instead of having the beginning and the end of the week.

    Thank's
    Alain
  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 22 Jan 2014 Link to this post

    Hello Alain,

    The required approach can be achieved by customizing the TimeRulerItemTemplateSelector property of the ScheduleView and more specifically the HorizontalTimelineGroupTemplate

    I have attached a sample project to demonstrate exactly the approach, please download the attachment and give it a try.

    Hope this helps.

    Regards,
    Yana
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  3. UI for WPF is Visual Studio 2017 Ready
  4. Christie Admin
    Christie Admin avatar
    239 posts
    Member since:
    Aug 2013

    Posted 22 Jan 2014 Link to this post

    Hi Yana,

    that's axactly what I want except one thing, can you tell me how to hide the time header, the one below the date header?

    Thank's
    Alain
  5. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 23 Jan 2014 Link to this post

    Hi Alain,

    In order to remove completely the time header you should customize the TimeRulerItemStyleSelector and set Height to "0" to the MajorHorizontalTickStyle and MinorHorizontalTickStyle.  I've updated the project with the needed changes. However note that in the project I have used Implicit Styles in order to make such customizations easier.

    Hope this helps.

    Regards,
    Yana
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  6. Christie Admin
    Christie Admin avatar
    239 posts
    Member since:
    Aug 2013

    Posted 23 Jan 2014 Link to this post

    Hi, Yana,

    thank you so much :) I you look at the picture, I can see a display issue using the Office 2013 theme.

    Thank's
    Alain
  7. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 28 Jan 2014 Link to this post

    Hi Alain,

    I have tried to reproduce the issue shown in the screenshot in the sample project, but without much success.  I have attached the updated project, could you please download it and give it a try? What is different in your case?

    Regards,
    Yana
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  8. Christie Admin
    Christie Admin avatar
    239 posts
    Member since:
    Aug 2013

    Posted 29 Jan 2014 in reply to Yana Link to this post

    Honnestly I don't what is the difference between my project and your's :(

    Here is my xaml:

    <UserControl x:Class="AppointmentControls.SearchResultByWeek.SearchResultByWeek"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                 xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
                 xmlns:AppCtrl="clr-namespace:AppointmentControls"
                 xmlns:ViewModel="clr-namespace:AppointmentControls"
                 xmlns:local="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.ScheduleView"
                 mc:Ignorable="d"
                 d:DesignHeight="300" d:DesignWidth="300" x:Name="Me">

        <UserControl.Resources>
            <ResourceDictionary>
                <ViewModel:ViewModel x:Key="ViewModel" />

                <local:TimeRulerItemTemplateSelector x:Key="CustomTimeRulerItemTemplateSelector">
                    <local:TimeRulerItemTemplateSelector.HorizontalDayMajorItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding FormattedValue}" Margin="2"/>
                        </DataTemplate>
                    </local:TimeRulerItemTemplateSelector.HorizontalDayMajorItemTemplate>
                    <local:TimeRulerItemTemplateSelector.HorizontalDayMinorItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding FormattedValue}" Margin="2"/>
                        </DataTemplate>
                    </local:TimeRulerItemTemplateSelector.HorizontalDayMinorItemTemplate>
                    <local:TimeRulerItemTemplateSelector.HorizontalWeekMajorItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding FormattedValue}" Margin="2"/>
                        </DataTemplate>
                    </local:TimeRulerItemTemplateSelector.HorizontalWeekMajorItemTemplate>
                    <local:TimeRulerItemTemplateSelector.HorizontalWeekMinorItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding FormattedValue}" Margin="2"/>
                        </DataTemplate>
                    </local:TimeRulerItemTemplateSelector.HorizontalWeekMinorItemTemplate>
                    <local:TimeRulerItemTemplateSelector.VerticalDayMajorItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding FormattedValue}" TextAlignment="Right" Margin="2" MinWidth="50"/>
                        </DataTemplate>
                    </local:TimeRulerItemTemplateSelector.VerticalDayMajorItemTemplate>
                    <local:TimeRulerItemTemplateSelector.VerticalDayMinorItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding FormattedValue}" TextAlignment="Right" Margin="2" MinWidth="50"/>
                        </DataTemplate>
                    </local:TimeRulerItemTemplateSelector.VerticalDayMinorItemTemplate>
                    <local:TimeRulerItemTemplateSelector.VerticalWeekMajorItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding FormattedValue}" TextAlignment="Right" Margin="2" MinWidth="50"/>
                        </DataTemplate>
                    </local:TimeRulerItemTemplateSelector.VerticalWeekMajorItemTemplate>
                    <local:TimeRulerItemTemplateSelector.VerticalWeekMinorItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding FormattedValue}" TextAlignment="Right" Margin="2" MinWidth="50"/>
                        </DataTemplate>
                    </local:TimeRulerItemTemplateSelector.VerticalWeekMinorItemTemplate>
                    <local:TimeRulerItemTemplateSelector.HorizontalTimelineGroupTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding DateTime, StringFormat=yyyy-MM-dd}" Margin="2 1" TextAlignment="Left"/>
                        </DataTemplate>
                    </local:TimeRulerItemTemplateSelector.HorizontalTimelineGroupTemplate>
                    <local:TimeRulerItemTemplateSelector.HorizontalTimelineMajorItemTemplate>
                        <DataTemplate>
                            <!--<TextBlock Text="{Binding FormattedValue}" Margin="2" TextAlignment="Left"/>-->
                        </DataTemplate>
                    </local:TimeRulerItemTemplateSelector.HorizontalTimelineMajorItemTemplate>
                    <local:TimeRulerItemTemplateSelector.HorizontalTimelineMinorItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding FormattedValue}" Margin="2" TextAlignment="Left"/>
                        </DataTemplate>
                    </local:TimeRulerItemTemplateSelector.HorizontalTimelineMinorItemTemplate>
                    <local:TimeRulerItemTemplateSelector.VerticalTimelineGroupTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding FormattedValue}" Margin="1 2" TextAlignment="Right">
                                <TextBlock.LayoutTransform>
                                    <RotateTransform Angle="-90"/>
                                </TextBlock.LayoutTransform>
                            </TextBlock>
                        </DataTemplate>
                    </local:TimeRulerItemTemplateSelector.VerticalTimelineGroupTemplate>
                    <local:TimeRulerItemTemplateSelector.VerticalTimelineMajorItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding FormattedValue}" TextAlignment="Right" Margin="2" MinWidth="50"/>
                        </DataTemplate>
                    </local:TimeRulerItemTemplateSelector.VerticalTimelineMajorItemTemplate>
                    <local:TimeRulerItemTemplateSelector.VerticalTimelineMinorItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding FormattedValue}" TextAlignment="Right" Margin="2" MinWidth="50"/>
                        </DataTemplate>
                    </local:TimeRulerItemTemplateSelector.VerticalTimelineMinorItemTemplate>
                    <local:TimeRulerItemTemplateSelector.MonthGroupTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding FormattedValue}" Margin="6 2"/>
                        </DataTemplate>
                    </local:TimeRulerItemTemplateSelector.MonthGroupTemplate>
                    <local:TimeRulerItemTemplateSelector.MonthItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding FormattedValue}" Margin="6 2"/>
                        </DataTemplate>
                    </local:TimeRulerItemTemplateSelector.MonthItemTemplate>
                </local:TimeRulerItemTemplateSelector>
                <Style x:Key="CustomMajorHorizontalTimeRulerItemStyle" TargetType="local:TimeRulerItem">
                    <Setter Property="Height" Value="0" />
                </Style>
                <Style x:Key="CustomMinorHorizontalTimeRulerItemStyle" TargetType="local:TimeRulerItem">
                    <Setter Property="Height" Value="0" />
                </Style>
                <local:OrientedTimeRulerItemStyleSelector x:Key="CustomTimeRulerItemStyleSelector"
                MonthViewGroupStyle="{StaticResource TimeRulerMonthViewGroupItemStyle}"
                MonthViewTickStyle="{StaticResource TimeRulerMonthViewItemStyle}"
                MonthViewTodayTickStyle="{StaticResource TimeRulerMonthViewTodayItemStyle}"
                HorizontalGroupItemStyle="{StaticResource TimeRulerGroupItemStyle}"
                VerticalGroupItemStyle="{StaticResource TimeRulerGroupItemStyle_Vertical}"
                MajorHorizontalTickStyle="{StaticResource CustomMajorHorizontalTimeRulerItemStyle}"
                MajorVerticalTickStyle="{StaticResource MajorVerticalTimeRulerItemStyle}"
                MinorHorizontalTickStyle="{StaticResource CustomMinorHorizontalTimeRulerItemStyle}"
                MinorVerticalTickStyle="{StaticResource MinorVerticalTimeRulerItemStyle}"
                HorizontalLineStyle="{StaticResource TimeRulerLineStyle}"
                VerticalLineStyle="{StaticResource TimeRulerLineStyle}"/>

                <Style x:Key="TimeRulerGroupItemStyle" TargetType="local:TimeRulerGroupItem">
                    <Setter Property="BorderThickness" Value="1" />
                    <Setter Property="HorizontalContentAlignment" Value="Left" />
                    <Setter Property="VerticalContentAlignment" Value="Top" />
                    <Setter Property="Margin" Value="0 0 -1 -1" />
                    <Setter Property="Panel.ZIndex" Value="100" />
                    <Setter Property="Padding" Value="4 2" />                
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="local:TimeRulerGroupItem">
                                <telerik:RadButton BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Command="local:RadScheduleViewCommands.SetDayViewMode" CommandParameter="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content.DateTime.Date}">
                                    <ContentPresenter x:Name="Content" />
                                </telerik:RadButton>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>

                <local:OrientedTimeRulerItemStyleSelector x:Key="TimeRulerItemStyleSelector" HorizontalGroupItemStyle="{StaticResource TimeRulerGroupItemStyle}" />

                <AppCtrl:SearchResultSlotStyleSelector x:Key="CustomSpecialSlotStyleSelector">
                    <AppCtrl:SearchResultSlotStyleSelector.CustomSlotStyle>
                        <Style TargetType="telerik:HighlightItem">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate>
                                        <Border Background="{Binding Slot.Background}" />
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </AppCtrl:SearchResultSlotStyleSelector.CustomSlotStyle>
                </AppCtrl:SearchResultSlotStyleSelector>

                <DataTemplate x:Key="FreeSlotTemplate">
                    <Grid Margin="-2 0 -1 0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Ellipse Grid.Column="0" Margin="2 1 2 0" Stretch="Fill" Fill="{Binding Appointment.ResultAccuracyColor}" Width="10" Height="10" Stroke="Black" StrokeThickness="1.0" />
                        <TextBlock Grid.Column="1" Margin="0 0 0 0" Text="{Binding Appointment.Subject}"  HorizontalAlignment="Left" VerticalAlignment="Center" />
                    </Grid>
                </DataTemplate>

                <ResourceDictionary.MergedDictionaries>
                    <ResourceDictionary Source="/Telerik.Windows.Themes.Office2013;component/Themes/System.Windows.xaml" />
                    <ResourceDictionary Source="/Telerik.Windows.Themes.Office2013;component/Themes/Telerik.Windows.Controls.xaml" />
                    <ResourceDictionary Source="/Telerik.Windows.Themes.Office2013;component/Themes/Telerik.Windows.Controls.Input.xaml" />
                    <ResourceDictionary Source="/Telerik.Windows.Themes.Office2013;component/Themes/Telerik.Windows.Controls.Navigation.xaml" />
                    <ResourceDictionary Source="/Telerik.Windows.Themes.Office2013;component/Themes/Telerik.Windows.Controls.ScheduleView.xaml" />
                </ResourceDictionary.MergedDictionaries>
            </ResourceDictionary>
        </UserControl.Resources>

        <Grid x:Name="Root" DataContext="{StaticResource ViewModel}">
            <telerik:RadScheduleView x:Name="ScheduleView" Panel.ZIndex="1" SnapAppointments="True" AppointmentSelectionChanged="RadScheduleView_AppointmentSelectionChanged" AppointmentEditing="ScheduleView_AppointmentEditing" AppointmentEdited="ScheduleView_AppointmentEdited" IsInlineEditingEnabled="False" FirstDayOfWeek="Monday" ActiveViewDefinitionIndex="0" NavigationHeaderVisibility="Collapsed" MinTimeRulerExtent="200" MaxTimeRulerExtent="500" SpecialSlotStyleSelector="{StaticResource CustomSpecialSlotStyleSelector}" AppointmentItemContentTemplate="{StaticResource FreeSlotTemplate}" TimeRulerItemStyleSelector="{StaticResource TimeRulerItemStyleSelector}" ShowDialog="SearchResultView_ShowDialog" TimeRulerItemTemplateSelector="{StaticResource CustomTimeRulerItemTemplateSelector}" MouseEnter="ScheduleView_MouseEnter" MouseLeave="ScheduleView_MouseLeave">
                <telerik:RadScheduleView.ViewDefinitions>
                    <telerik:TimelineViewDefinition x:Name="View" FirstDayOfWeek="Monday" GroupTickLength="7d" MinorTickLength="7d" MajorTickLength="7d" VisibleDays="70" TimerulerMajorTickStringFormat="" TimerulerMinorTickStringFormat="" MinTimeRulerExtent="600" MaxTimeRulerExtent="Infinity" StretchAppointments="True" StretchGroupHeaders="True" TimerulerGroupStringFormat="{}{0:yyyy-MM-dd}" />
                </telerik:RadScheduleView.ViewDefinitions>

                <telerik:RadScheduleView.ResourceTypesSource>
                    <telerik:ResourceTypeCollection>
                        <telerik:ResourceType Name="DaysOfTheWeek">
                            <telerik:Resource ResourceName="Monday" DisplayName="Lun" />
                            <telerik:Resource ResourceName="Tuesday" DisplayName="Mar" />
                            <telerik:Resource ResourceName="Wednesday" DisplayName="Mer" />
                            <telerik:Resource ResourceName="Thursday" DisplayName="Jeu" />
                            <telerik:Resource ResourceName="Friday" DisplayName="Ven" />
                            <telerik:Resource ResourceName="Saturday" DisplayName="Sam" />
                            <telerik:Resource ResourceName="Sunday" DisplayName="Dim" />
                        </telerik:ResourceType>
                        <telerik:ResourceType Name="PartsOfTheDay">
                            <telerik:Resource ResourceName="NG" DisplayName="NU" />
                            <telerik:Resource ResourceName="AM" DisplayName="AM" />
                            <telerik:Resource ResourceName="PM" DisplayName="PM" />
                            <telerik:Resource ResourceName="EV" DisplayName="SO" />
                        </telerik:ResourceType>
                    </telerik:ResourceTypeCollection>
                </telerik:RadScheduleView.ResourceTypesSource>

                <telerik:RadScheduleView.GroupDescriptionsSource>
                    <telerik:GroupDescriptionCollection>
                        <telerik:ResourceGroupDescription ResourceType="DaysOfTheWeek" />
                        <telerik:ResourceGroupDescription ResourceType="PartsOfTheDay" />
                    </telerik:GroupDescriptionCollection>
                </telerik:RadScheduleView.GroupDescriptionsSource>

                <telerik:RadScheduleView.DragDropBehavior>
                    <AppCtrl:SearchResultCustomDragDropBehavior />
                </telerik:RadScheduleView.DragDropBehavior>
            </telerik:RadScheduleView>
        </Grid>
    </UserControl>
  9. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 31 Jan 2014 Link to this post

    Hi Alain,

    Still, I am not able to replicate the issue with the provided code. Can you confirm that you're using our latest release? Is it possible to try create a runnable sample and send it to us, so we to be able to research the case? Note that you should open a support ticket and attach the sample there.

    I would like to make a note here  - I've noticed that you've merged the theme resource dictionaries inside the UserControl - the recommended approach is to merge them in App.xaml, as for example, EdtiAppointmentDialog, when shown, is placed in a different visual tree and in the current way, will not receive its Style.

    I am looking forward to your reply.

    Regards,
    Yana
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
Back to Top
UI for WPF is Visual Studio 2017 Ready