Styling the thumbs and lines on SfRangeNavigator

[eric smith]

Hi,

I'm trying to style the thumbs and thumb lines on a SfRangeNavigator, and failing.  Is it possible to provide an example to get me started correctly.

I'm using the SfRangeNavigator as my range is numeric and not a date range.

Thanks for any assistance provided.

Eric

[Yuvaraj Palanisamy]

Hi Eric Smith,  

  

We do not have direct support for styling the thumb and thumb line in SfRangeNavigator. Currently, we are trying to achieve this requirement by feasible workaround and we will update you with complete details on or before 24^th January 2022. We appreciate your patience until then.  

  

Regards,  

Yuvaraj. 

[Manivannan Elangovan]

Hi Eric Smith,  

  

We are still checking the possibilities to achieve your requirement by feasible workaround and we will update you with complete details on or before 27^th January 2022.

  

Regards,  

Manivannan E 

[eric smith]

Thank you,  Look forward to seeing what your workaround is.

Eric

[Devakumar Dhanapoosanam]

Hi Eric Smith, 

 

Thanks for the update. We will update the complete details as promised on January 27, 2022.  

 

Regards, 

Devakumar D 

[Yuvaraj Palanisamy]

Hi Eric smith, 

 

Thanks for your patience. 

 

We have achieved your requirement styling the thumbs and lines of SfRangeNavigator by overriding the Template of control as per the below code snippet.  

 

CodeSnippet: 

<Grid.Resources> 

 

    <ControlTemplate x:Key="NavigatorTemplate"      

                             TargetType="chart:ResizableScrollBar" > 

        <ControlTemplate x:Key="HorizontalNearThumbTemplate" 

                                         TargetType="Thumb"> 

                            <Grid x:Name="left"> 

                                <Line HorizontalAlignment="Right" Stroke="Red" 

                                      StrokeThickness="2" Stretch="Fill" X1="0" Y1="0" 

                                      X2="0" Y2="1"/> 

                                <Canvas VerticalAlignment="Center" Margin="-15,0,-15,0"> 

                                    <Ellipse Height="30" Width="30" Stroke="Blue" 

                                             StrokeThickness="12" Fill="White"/> 

                                </Canvas> 

                            </Grid> 

                        </ControlTemplate> 

        <ControlTemplate x:Key="HorizontalFarThumbTemplate" 

                         TargetType="Thumb"> 

 

            <Grid x:Name="right"> 

                <Line HorizontalAlignment="Right" Stroke="Red" 

                      StrokeThickness="2" Stretch="Fill" X1="0" Y1="0" 

                      X2="0" Y2="1"/> 

 

                <Canvas VerticalAlignment="Center" Margin="-15,0,-15,0"> 

                    <Ellipse Height="30" Width="30" Stroke="Blue" 

                             StrokeThickness="12" Fill="White"/> 

                </Canvas> 

            </Grid> 

 

        </ControlTemplate> 

    </ControlTemplate> 

 

 

    <ControlTemplate x:Key="navigator" 

                     TargetType="chart:SfRangeNavigator"> 

. . . 

 

    <chart:RangeNavigatorSelector x:Name="Part_RangePicker" 

                              Orientation="Horizontal" 

                              Grid.Row="1" 

                              Template="{StaticResource 

                              NavigatorTemplate}" 

                              OverlayBrush="{TemplateBinding 

                              OverlayBrush}" Margin="0,0,0,0"> 

   </ControlTemplate> 

</Grid.Resources> 

 

<chart:SfRangeNavigator . . . 

 

                        Template="{StaticResource navigator}"> 

. . . 

 

</chart:SfRangeNavigator> 

 

Also, we have attached the complete sample for your reference, please find the sample from the below link. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/172120/ze/SfRangeNavigatorViewStart1684842072  

 

Output: 

 

 

Please let us know if you have any concern.  

 

Regards, 

Yuvaraj. 

[eric smith]

Thanks,  that is great.  

Exactly what I was trying to do and failing!

Appreciate your assistance very much.

Eric

[Gayathri Manickam]

Hi Eric Smith,   

 

We glad that the provided solution works at your end. Please let us know if you need any further assistance. 

  

Regards,  

Gayathri M