Change Content of NavigationButtons

[perter-muller]

Hello,

how can I change the appearance/content and size of the navigation buttons (Prev/Next) in the header of the SfSchedule?

E. g. if I want other icons as navigation buttons.

Thanks for help.

[Jagadeesan Pichaimuthu]

Hi Perter-muller,  

 

Thanks for contacting Syncfusion support.   

 

We have checked your query “how can I change the appearance/content and size of the navigation buttons (Prev/Next) in the header of the SfSchedule?”. Currently we don’t have direct support to customize the content of the navigation button used in the SfSchedule. But we have prepared workaround to achieve your requirement by editing the header style of the SfSchedule. In attached sample, we have changed navigation button existing icons with new icons (using path).  We can change the content and size using properties of button used in SfSchedule. Please find the screenshot, code snippet and sample for the same. 

 

Code snippet: 

    <Window.Resources> 

        <Style x:Key="prevButton" TargetType="Button"> 

            <Setter Property="FocusVisualStyle" Value="{x:Null}"/> 

            <Setter Property="Template"> 

                <Setter.Value> 

                    <ControlTemplate TargetType="Button"> 

                        <Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"> 

                            <Grid> 

                                <Grid Name="backgroundGrid" Width="16" Height="16" Visibility="Collapsed" /> 

                                <Path Data="M13.170958,0L14.585027,1.4149784 3.8476841,12.144024 32.000095,12.144024 32.000095,14.145017 3.8188674,14.145017 14.607,24.922982 13.191954,26.338998 0,13.159001z" Stretch="Uniform" Fill="#FF0A0A0A" Width="14" Height="14" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5"> 

                                    <Path.RenderTransform> 

                                        <TransformGroup> 

                                            <TransformGroup.Children> 

                                                <RotateTransform Angle="0" /> 

                                                <ScaleTransform ScaleX="1" ScaleY="1" /> 

                                            </TransformGroup.Children> 

                                        </TransformGroup> 

                                    </Path.RenderTransform> 

                                </Path> 

                            </Grid> 

                        </Viewbox> 

                    </ControlTemplate> 

                </Setter.Value> 

            </Setter> 

        </Style> 

 

        <Style x:Key="nextButton" TargetType="Button"> 

            <Setter Property="FocusVisualStyle" Value="{x:Null}"/> 

            <Setter Property="Template"> 

                <Setter.Value> 

                    <ControlTemplate TargetType="Button"> 

 

                        <Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"> 

                            <Grid> 

                                <Grid Name="backgroundGrid" Width="16" Height="16" Visibility="Collapsed" /> 

                                <Path Data="M18.669049,0L32.000059,13.605025 18.560041,26.996 17.148058,25.579986 28.067927,14.700018 0,14.700018 0,12.700018 28.313973,12.700018 17.242052,1.4000228z" Stretch="Uniform" Fill="#FF0A0A0A" Width="14" Height="14" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5"> 

                                    <Path.RenderTransform> 

                                        <TransformGroup> 

                                            <TransformGroup.Children> 

                                                <RotateTransform Angle="0" /> 

                                                <ScaleTransform ScaleX="1" ScaleY="1" /> 

                                            </TransformGroup.Children> 

                                        </TransformGroup> 

                                    </Path.RenderTransform> 

                                </Path> 

                            </Grid> 

                        </Viewbox> 

                    </ControlTemplate> 

                </Setter.Value> 

            </Setter> 

        </Style> 

         

        <Style TargetType="syncfusion:HeaderTitleBarView"> 

            <Setter Property="Foreground" Value="#373837"/> 

            <Setter Property="Template"> 

                <Setter.Value> 

                    <ControlTemplate TargetType="syncfusion:HeaderTitleBarView"> 

                        <Grid x:Name="Header_Grid" Visibility="{TemplateBinding Visibility}" Margin="10,0,0,10"> 

                            <Grid.ColumnDefinitions> 

                                <ColumnDefinition Width="30"/> 

                                <ColumnDefinition Width="30"/> 

                                <ColumnDefinition Width="Auto"/> 

                            </Grid.ColumnDefinitions> 

 

                            <Button Name="PART_PrevButton" Style="{StaticResource prevButton}" Margin="10 0"   VerticalAlignment="Center" Visibility="{Binding HeaderNavigationButtonVisibility,RelativeSource={RelativeSource TemplatedParent}}" /> 

 

                            <Button Name="PART_NextButton" Style="{StaticResource nextButton}" Grid.Column="1" Margin="10 0" VerticalAlignment="Center" Visibility="{Binding HeaderNavigationButtonVisibility,RelativeSource={RelativeSource TemplatedParent}}"/> 

 

                            <TextBlock Grid.Column="2" VerticalAlignment="Center" Margin="10 0" 

                                   Text="{TemplateBinding HeaderText}" Foreground="{TemplateBinding Foreground}" 

                                   FontWeight="ExtraLight" FontSize="30" FontFamily="Segoe UI"/> 

                        </Grid> 

                    </ControlTemplate> 

                </Setter.Value> 

            </Setter> 

        </Style> 

    </Window.Resources> 

 

Screenshot: 

 

 

Sample:  https://www.syncfusion.com/downloads/support/forum/146755/ze/SfSchedule_NavigationButton-1199358457 

 

Please try above solution and let us know if it is helpful. 

 

Regards, 

Jagadeesan 

[perter-muller]

Hi,

thanks for your fast reply. I tried to add your suggested code and it works to change the content/size of the navigation buttons. But after that im unable to navigate and it crashes after a click on the button with this exception and stacktrace:

System.InvalidCastException: "The System.Windows.Media.ContainerVisual object can not be cast as System.Windows.FrameworkElement."

   bei Syncfusion.UI.Xaml.Schedule.SfSchedule.FindContentControl(FrameworkElement element)
   bei Syncfusion.UI.Xaml.Schedule.SfSchedule.OnMousePressDown(MouseButtonEventArgs e)
   bei Syncfusion.UI.Xaml.Schedule.SfSchedule.OnPreviewMouseDown(MouseButtonEventArgs e)
   bei System.Windows.UIElement.OnPreviewMouseDownThunk(Object sender, MouseButtonEventArgs e)
   bei System.Windows.Input.MouseButtonEventArgs.InvokeEventHandler(Delegate genericHandler, Object genericTarget)
   bei System.Windows.RoutedEventArgs.InvokeHandler(Delegate handler, Object target)
   bei System.Windows.RoutedEventHandlerInfo.InvokeHandler(Object target, RoutedEventArgs routedEventArgs)
   bei System.Windows.EventRoute.InvokeHandlersImpl(Object source, RoutedEventArgs args, Boolean reRaised)
   bei System.Windows.UIElement.RaiseEventImpl(DependencyObject sender, RoutedEventArgs args)
   bei System.Windows.UIElement.RaiseTrustedEvent(RoutedEventArgs args)
   bei System.Windows.UIElement.RaiseEvent(RoutedEventArgs args, Boolean trusted)
   bei System.Windows.Input.InputManager.ProcessStagingArea()
   bei System.Windows.Input.InputManager.ProcessInput(InputEventArgs input)
   bei System.Windows.Input.InputProviderSite.ReportInput(InputReport inputReport)
   bei System.Windows.Interop.HwndMouseInputProvider.ReportInput(IntPtr hwnd, InputMode mode, Int32 timestamp, RawMouseActions actions, Int32 x, Int32 y, Int32 wheel)
   bei System.Windows.Interop.HwndMouseInputProvider.FilterMessage(IntPtr hwnd, WindowMessage msg, IntPtr wParam, IntPtr lParam, Boolean& handled)
   bei System.Windows.Interop.HwndSource.InputFilterMessage(IntPtr hwnd, Int32 msg, IntPtr wParam, IntPtr lParam, Boolean& handled)
   bei MS.Win32.HwndWrapper.WndProc(IntPtr hwnd, Int32 msg, IntPtr wParam, IntPtr lParam, Boolean& handled)
   bei MS.Win32.HwndSubclass.DispatcherCallbackOperation(Object o)
   bei System.Windows.Threading.ExceptionWrapper.InternalRealCall(Delegate callback, Object args, Int32 numArgs)
   bei System.Windows.Threading.ExceptionWrapper.TryCatchWhen(Object source, Delegate callback, Object args, Int32 numArgs, Delegate catchHandler)
   bei System.Windows.Threading.Dispatcher.LegacyInvokeImpl(DispatcherPriority priority, TimeSpan timeout, Delegate method, Object args, Int32 numArgs)
   bei MS.Win32.HwndSubclass.SubclassWndProc(IntPtr hwnd, Int32 msg, IntPtr wParam, IntPtr lParam)
   bei MS.Win32.UnsafeNativeMethods.DispatchMessage(MSG& msg)
   bei System.Windows.Threading.Dispatcher.PushFrameImpl(DispatcherFrame frame)
   bei System.Windows.Threading.Dispatcher.PushFrame(DispatcherFrame frame)
   bei System.Windows.Application.RunDispatcher(Object ignore)
   bei System.Windows.Application.RunInternal(Window window)
   bei System.Windows.Application.Run(Window window)
   bei System.Windows.Application.Run()
   bei DispoDesktopApp.App.Main()

Kind Regards

perter-muller

[Kanniyappan Panneer Selvam]

Hi Perter-muller, 

 

Thanks for your update. 

 

We have tried to reproduce the reported System.InvalidCastException at our end. But we are unable to reproduce it. May be our issue reproducing scenario or code’s may differ from yours. So, please provide code snippet or modify the application which we provided below to test it from our side. If possible please provide the issue reproducible application, that would help us to resolve your issue as earlier. Please find the video and sample for the same. 

 

Video: https://www.syncfusion.com/downloads/support/forum/146755/ze/SFSCHE~1-1761736315.zip  

 

Sample: https://www.syncfusion.com/downloads/support/forum/146755/ze/SfSchedule_NavigationButton_Click976848485.zip  

 

Regards, 

Kanniyappan P 

[perter-muller]

Hi Kanniyappan,

here is a sample application - hopefully the issue is now reproducable.

If you comment out the code you provided to overwrite the style for the navigationbuttons the app works fine. But if the Styles are set navigation is not possible.

Thanks for your help!

Regards,

perter-muller

Attachment: SFScheduleTest__SfSchedule_NavigationButton__InvalidCastException_2a3029ae.7z

[Kanniyappan Panneer Selvam]

Hi perter-muller, 

 

We are able to reproduce the reported issue “Invalid exception occurred when click the SfSchedule navigation button” at our end. We have resolved reported issue by adding the border in style templates instead using ViewBox in the sample. Please find the modified sample, code snippet and video for the same. 

 

Code Snippet: 

 

<Style x:Key="prevButton" TargetType="Button"> 

            <Setter Property="FocusVisualStyle" Value="{x:Null}" /> 

            <Setter Property="Template"> 

                <Setter.Value> 

                    <ControlTemplate TargetType="Button"> 

                        <Border x:Name="brdBack" Background="Transparent" Margin="0,0,0,0" BorderThickness="1" Width="12" Height="12" 

                    BorderBrush="Transparent"> 

                            <Path Width="11"  Height="11" Margin="0,0,0,0" Data="M13.170958,0L14.585027,1.4149784 3.8476841,12.144024 32.000095,12.144024 32.000095,14.145017 3.8188674,14.145017 14.607,24.922982 13.191954,26.338998 0,13.159001z" 

                                    Fill="#FF0A0A0A" 

                                    RenderTransformOrigin="0.5,0.5" 

                                    Stretch="Uniform"> 

                                <Path.RenderTransform> 

                                    <TransformGroup> 

                                        <TransformGroup.Children> 

                                            <RotateTransform Angle="0" /> 

                                            <ScaleTransform ScaleX="1" ScaleY="1" /> 

                                        </TransformGroup.Children> 

                                    </TransformGroup> 

                                </Path.RenderTransform> 

                            </Path> 

                        </Border> 

 

                    </ControlTemplate> 

                </Setter.Value> 

            </Setter> 

        </Style> 

 

        <Style x:Key="nextButton" TargetType="Button"> 

            <Setter Property="FocusVisualStyle" Value="{x:Null}" /> 

            <Setter Property="Template"> 

                <Setter.Value> 

                    <ControlTemplate TargetType="Button"> 

                        <Border x:Name="brdfrwd"  Margin="0,0,0,0" BorderThickness="1" Width="12" Height="12" 

                    BorderBrush="Transparent" Background="Transparent"> 

                            <Path Width="11" Height="11" Margin="-2,0,0,0" Data="M18.669049,0L32.000059,13.605025 18.560041,26.996 17.148058,25.579986 28.067927,14.700018 0,14.700018 0,12.700018 28.313973,12.700018 17.242052,1.4000228z" 

                                    Fill="#FF0A0A0A" 

                                    RenderTransformOrigin="0.5,0.5" 

                                    Stretch="Uniform"> 

                                <Path.RenderTransform> 

                                    <TransformGroup> 

                                        <TransformGroup.Children> 

                                            <RotateTransform Angle="0" /> 

                                            <ScaleTransform ScaleX="1" ScaleY="1" /> 

                                        </TransformGroup.Children> 

                                    </TransformGroup> 

                                </Path.RenderTransform> 

                            </Path> 

                        </Border> 

                    </ControlTemplate> 

                </Setter.Value> 

            </Setter> 

        </Style> 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/146755/ze/SfSchedule_NavigationButton_InvalidException-153486237.zip  

 

Video: https://www.syncfusion.com/downloads/support/directtrac/146755/ze/NAVIGA~11226862012.zip  

 

Please try the above solution and let us know if it is helpful. 

 

Regards, 

Kanniyappan P 

[perter-muller]

Thanks for your help and support - the provided solution works great!

Have a nice day.

Regards,

perter-muller

[Padmini Ramamurthy]

Hi Perter, 

  

Glad that the provided solution works and please get back to us if you need any other assistance. 

  

Regards, 

Padmini