Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
450
Page by year in xamDateTimeEditor calendar popup
posted

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?

  • 30945
    Offline posted

    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

  • 54937
    Suggested Answer
    Offline posted

    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="&lt;&lt;">
                   <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="&gt;&gt;"
                   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>