We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Change Content of NavigationButtons

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.

7 Replies

JP Jagadeesan Pichaimuthu Syncfusion Team August 19, 2019 09:45 AM UTC

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: 
 
 
 
Please try above solution and let us know if it is helpful. 
 
Regards, 
Jagadeesan 



PE perter-muller August 19, 2019 06:15 PM UTC

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



KP Kanniyappan Panneer Selvam Syncfusion Team August 20, 2019 01:15 PM UTC

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. 
 
 
 
Regards, 
Kanniyappan P 



PE perter-muller August 20, 2019 02:22 PM UTC

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


KP Kanniyappan Panneer Selvam Syncfusion Team August 21, 2019 09:40 AM UTC

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> 
 
 
 
 
Please try the above solution and let us know if it is helpful. 
 
Regards, 
Kanniyappan P 



PE perter-muller August 21, 2019 08:43 PM UTC

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

Have a nice day.

Regards,
perter-muller


PR Padmini Ramamurthy Syncfusion Team August 23, 2019 07:20 AM UTC

Hi Perter, 
  
Glad that the provided solution works and please get back to us if you need any other assistance. 
  
Regards, 
Padmini 


Loader.
Up arrow icon