The calendar popup of the date time editor and buttons to page forward/back by month. We have customers asking for buttons to page forward/backward by year as well.
Is there any way to do this?
Hello,
I am just checking if you require any further assistance or clarification on the matter.
Sincerely,
Krasimir
Developer Support Engineer
Infragistics
www.infragistics.com/support
The control is mimicing the Windows 7 calendar which allows the end user to zoom out (clicking on the header area) and back in (clicking on items once zoomed out). There is no buttons in the title area that would scroll by a year but you could retemplate the header (the CalendarItemGroupTitle element) to contain buttons that use the ScrollPreviousGroups/ScrollNextGroups where the CommandParameter is the number of groups to scroll.
e.g. This is a modified version of the template included in the generic.xaml for the editors provided in the DefaultStyles directory and also uses the same paths that are used for the next/previous buttons in the generic xaml for the next/previous year buttons. You will have to make changes depending on what you want to have happen when the user zooms out.
<igEditors:XamDateTimeEditor> <igEditors:XamDateTimeEditor.Resources> <Style x:Key="BorderlessButtonStyle" TargetType="{x:Type Button}"> <Setter Property="OverridesDefaultStyle" Value="True" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <Border Background="Transparent"> <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style x:Key="previousYearButtonStyle" TargetType="{x:Type RepeatButton}"> <Setter Property="Foreground" Value="{DynamicResource {x:Static igEditors:EditorsBrushKeys.CalendarNavGlyphFillKey} }"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type RepeatButton}"> <Grid Width="16" Height="14" Background="#00FFFFFF"> <Path Stretch="Fill" Opacity="1" Data="M 431,43 C431,43 427,46.5 427,46.5 427,46.5 431,50 431,50 431,50 431,43 431,43 z" Fill="{TemplateBinding Foreground}" Width="4" Height="7"> <Path.RenderTransform> <TranslateTransform X="-2" /> </Path.RenderTransform> </Path> <Path Stretch="Fill" Opacity="1" Data="M 431,43 C431,43 427,46.5 427,46.5 427,46.5 431,50 431,50 431,50 431,43 431,43 z" Fill="{TemplateBinding Foreground}" Width="4" Height="7"> <Path.RenderTransform> <TranslateTransform X="2" /> </Path.RenderTransform> </Path> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Foreground" Value="{DynamicResource {x:Static igEditors:EditorsBrushKeys.CalendarNavGlyphHoverFillKey} }"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style x:Key="nextYearButtonStyle" TargetType="{x:Type RepeatButton}"> <Setter Property="Foreground" Value="{DynamicResource {x:Static igEditors:EditorsBrushKeys.CalendarNavGlyphFillKey} }"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type RepeatButton}"> <Grid Width="16" Height="14" Background="#00FFFFFF"> <Path Stretch="Fill" Opacity="1" Data="M437,43C437,43 441,46.5 441,46.5 441,46.5 437,50 437,50 437,50 437,43 437,43z" Fill="{TemplateBinding Foreground}" Width="4" Height="7"> <Path.RenderTransform> <TranslateTransform X="-2" /> </Path.RenderTransform> </Path> <Path Stretch="Fill" Opacity="1" Data="M437,43C437,43 441,46.5 441,46.5 441,46.5 437,50 437,50 437,50 437,43 437,43z" Fill="{TemplateBinding Foreground}" Width="4" Height="7"> <Path.RenderTransform> <TranslateTransform X="2" /> </Path.RenderTransform> </Path> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Foreground" Value="{DynamicResource {x:Static igEditors:EditorsBrushKeys.CalendarNavGlyphHoverFillKey} }"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style TargetType="{x:Type igEditors:CalendarItemGroupTitle}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate> <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" CornerRadius="{TemplateBinding Border.CornerRadius}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True" Padding="{TemplateBinding Control.Padding}"> <DockPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" LastChildFill="True"> <RepeatButton DockPanel.Dock="Left" x:Name="previousYear" Focusable="False" Visibility="{Binding Path=ScrollPreviousButtonVisibility, RelativeSource={RelativeSource AncestorType={x:Type igEditors:CalendarItemGroup}}}" Command="{x:Static igEditors:MonthCalendarCommands.ScrollPreviousGroups}" Style="{StaticResource previousYearButtonStyle}" Content="<<"> <RepeatButton.CommandParameter> <sys:Int32>12</sys:Int32> </RepeatButton.CommandParameter> </RepeatButton> <RepeatButton DockPanel.Dock="Left" x:Name="previousMonth" Focusable="False" Visibility="{Binding Path=ScrollPreviousButtonVisibility, RelativeSource={RelativeSource AncestorType={x:Type igEditors:CalendarItemGroup}}}" Command="{x:Static igEditors:MonthCalendarCommands.ScrollPreviousGroup}" Style="{DynamicResource {x:Static igEditors:XamMonthCalendar.ScrollPreviousRepeatButtonStyleKey}}" /> <RepeatButton DockPanel.Dock="Right" x:Name="nextYear" Focusable="False" Visibility="{Binding Path=ScrollNextButtonVisibility, RelativeSource={RelativeSource AncestorType={x:Type igEditors:CalendarItemGroup}}}" Command="{x:Static igEditors:MonthCalendarCommands.ScrollNextGroups}" Content=">>" Style="{StaticResource nextYearButtonStyle}" > <RepeatButton.CommandParameter> <sys:Int32>12</sys:Int32> </RepeatButton.CommandParameter> </RepeatButton> <RepeatButton DockPanel.Dock="Right" x:Name="nextMonth" Focusable="False" Visibility="{Binding Path=ScrollNextButtonVisibility, RelativeSource={RelativeSource AncestorType={x:Type igEditors:CalendarItemGroup}}}" Command="{x:Static igEditors:MonthCalendarCommands.ScrollNextGroup}" Style="{DynamicResource {x:Static igEditors:XamMonthCalendar.ScrollNextRepeatButtonStyleKey}}" /> <Button x:Name="headerContent" HorizontalContentAlignment="{TemplateBinding Control.HorizontalContentAlignment}" Focusable="False" VerticalContentAlignment="{TemplateBinding Control.VerticalContentAlignment}" Style="{StaticResource BorderlessButtonStyle}" Command="{x:Static igEditors:MonthCalendarCommands.ZoomOutCalendarMode}" CommandParameter="{Binding RelativeSource={RelativeSource AncestorType={x:Type igEditors:CalendarItemGroup}}}" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" Content="{TemplateBinding ContentControl.Content}" /> </DockPanel> </Border> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True" SourceName="headerContent"> <Setter Property="Foreground" Value="{DynamicResource {x:Static igEditors:EditorsBrushKeys.CalendarNavGlyphHoverFillKey} }"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> <Setter Property="Background" Value="{DynamicResource {x:Static igEditors:EditorsBrushKeys.CalendarItemGroupTitleBackgroundKey} }"/> <Setter Property="Foreground" Value="{DynamicResource {x:Static igEditors:EditorsBrushKeys.CalendarItemGroupTitleForegroundKey} }"/> <Setter Property="Padding" Value="0,0,0,0"/> </Style> </igEditors:XamDateTimeEditor.Resources> </igEditors:XamDateTimeEditor>
</Setter.Value> </Setter> </Style> <Style x:Key="nextYearButtonStyle" TargetType="{x:Type RepeatButton}"> <Setter Property="Foreground" Value="{DynamicResource {x:Static igEditors:EditorsBrushKeys.CalendarNavGlyphFillKey} }"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type RepeatButton}"> <Grid Width="16" Height="14" Background="#00FFFFFF"> <Path Stretch="Fill" Opacity="1" Data="M437,43C437,43 441,46.5 441,46.5 441,46.5 437,50 437,50 437,50 437,43 437,43z" Fill="{TemplateBinding Foreground}" Width="4" Height="7"> <Path.RenderTransform> <TranslateTransform X="-2" /> </Path.RenderTransform> </Path> <Path Stretch="Fill" Opacity="1" Data="M437,43C437,43 441,46.5 441,46.5 441,46.5 437,50 437,50 437,50 437,43 437,43z" Fill="{TemplateBinding Foreground}" Width="4" Height="7"> <Path.RenderTransform> <TranslateTransform X="2" /> </Path.RenderTransform> </Path> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Foreground" Value="{DynamicResource {x:Static igEditors:EditorsBrushKeys.CalendarNavGlyphHoverFillKey} }"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate>
</Setter.Value> </Setter> </Style>
<Style TargetType="{x:Type igEditors:CalendarItemGroupTitle}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate> <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" CornerRadius="{TemplateBinding Border.CornerRadius}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True" Padding="{TemplateBinding Control.Padding}"> <DockPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" LastChildFill="True"> <RepeatButton DockPanel.Dock="Left" x:Name="previousYear" Focusable="False" Visibility="{Binding Path=ScrollPreviousButtonVisibility, RelativeSource={RelativeSource AncestorType={x:Type igEditors:CalendarItemGroup}}}" Command="{x:Static igEditors:MonthCalendarCommands.ScrollPreviousGroups}" Style="{StaticResource previousYearButtonStyle}" Content="<<"> <RepeatButton.CommandParameter> <sys:Int32>12</sys:Int32> </RepeatButton.CommandParameter> </RepeatButton> <RepeatButton DockPanel.Dock="Left" x:Name="previousMonth" Focusable="False" Visibility="{Binding Path=ScrollPreviousButtonVisibility, RelativeSource={RelativeSource AncestorType={x:Type igEditors:CalendarItemGroup}}}" Command="{x:Static igEditors:MonthCalendarCommands.ScrollPreviousGroup}" Style="{DynamicResource {x:Static igEditors:XamMonthCalendar.ScrollPreviousRepeatButtonStyleKey}}" /> <RepeatButton DockPanel.Dock="Right" x:Name="nextYear" Focusable="False" Visibility="{Binding Path=ScrollNextButtonVisibility, RelativeSource={RelativeSource AncestorType={x:Type igEditors:CalendarItemGroup}}}" Command="{x:Static igEditors:MonthCalendarCommands.ScrollNextGroups}" Content=">>" Style="{StaticResource nextYearButtonStyle}" > <RepeatButton.CommandParameter> <sys:Int32>12</sys:Int32> </RepeatButton.CommandParameter> </RepeatButton> <RepeatButton DockPanel.Dock="Right" x:Name="nextMonth" Focusable="False" Visibility="{Binding Path=ScrollNextButtonVisibility, RelativeSource={RelativeSource AncestorType={x:Type igEditors:CalendarItemGroup}}}" Command="{x:Static igEditors:MonthCalendarCommands.ScrollNextGroup}" Style="{DynamicResource {x:Static igEditors:XamMonthCalendar.ScrollNextRepeatButtonStyleKey}}" />
<Button x:Name="headerContent" HorizontalContentAlignment="{TemplateBinding Control.HorizontalContentAlignment}" Focusable="False" VerticalContentAlignment="{TemplateBinding Control.VerticalContentAlignment}" Style="{StaticResource BorderlessButtonStyle}" Command="{x:Static igEditors:MonthCalendarCommands.ZoomOutCalendarMode}" CommandParameter="{Binding RelativeSource={RelativeSource AncestorType={x:Type igEditors:CalendarItemGroup}}}" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" Content="{TemplateBinding ContentControl.Content}" /> </DockPanel> </Border> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True" SourceName="headerContent"> <Setter Property="Foreground" Value="{DynamicResource {x:Static igEditors:EditorsBrushKeys.CalendarNavGlyphHoverFillKey} }"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> <Setter Property="Background" Value="{DynamicResource {x:Static igEditors:EditorsBrushKeys.CalendarItemGroupTitleBackgroundKey} }"/> <Setter Property="Foreground" Value="{DynamicResource {x:Static igEditors:EditorsBrushKeys.CalendarItemGroupTitleForegroundKey} }"/> <Setter Property="Padding" Value="0,0,0,0"/> </Style> </igEditors:XamDateTimeEditor.Resources> </igEditors:XamDateTimeEditor>