Inverting colors in SfDateTimeRangeNabigator

[Tim]

Is it possible to change/invert colors like in this picture? https://help.syncfusion.com/wpf/sfdatetimerangenavigator/Label-Customization_images/Label-Customization_img2.png

Thanks in advance.

[Devi Aruna Maharasi Murugan]

Hi Tim, 

  

Thanks for contacting Syncfusion Support. 

  

By default, the SfDateTimeRangeNavigator will be displayed with the color as like in the provided image.  We have prepared a demo sample with customization in labels to get the output as shown in the provided image. The sample can be downloaded from below link, 

  

Sample: RangeNavigatorColor128406 

  

If this does not meet your requirement, please provide more information about your requirement. It would be helpful for us to provide you the solution earlier. 

  

Regards, 

Devi 

 

[Tim]

Thank you very much for your response, but the sample you sent me has the selected interval colored white, but I want it to be gray. I'm attaching a picture.

[Devi Aruna Maharasi Murugan]

Hi Tim, 

  

Thanks for your update. 

  

We can achieve this requirement by applying the Background for SfChart as shown in the below code snippet, 

        <chart:SfChart > 

             <chart:SfChart.Background> 

                 <SolidColorBrush Color="#7e000000" Opacity="0.5"/> 

             </chart:SfChart.Background> 

        </chart:SfChart > 

  

To get the view as like the attached image, we need to customize the OverlayBrush, HigherBarGridLineStyle and LowerBarGridLineStyle properties of SfDateTimeRangeNavigator. 

  

We have prepared a demo sample based on your requirement and it can be downloaded from below link, 

Sample: RangeNavigatorColorModified 

  

Regards, 

Devi 

[Tim]

Thanks for your answer, but is it possible to make selected range green and unselected range lets say red?

[Devi Aruna Maharasi Murugan]

Hi Tim, 

  

Thanks for your update. 

  

As we mentioned in our previous update, we can customize the selected range by applying background for SfChart as shown in the below code snippet, 

  

<chart:SfDateTimeRangeNavigator.Content> 

     <chart:SfChart > 

         <chart:SfChart.Background> 

                <SolidColorBrush Color="Green" /> 

          </chart:SfChart.Background>           

     </chart:SfChart> 

</chart:SfDateTimeRangeNavigator.Content> 

 

  

Also, we can customize the unselected region color with OverlayBrush property of SfDateTimeRangeNavigator as shown in the below code snippet, 

 

<chart:SfDateTimeRangeNavigator.OverlayBrush> 

    <SolidColorBrush Color="Red" Opacity="0.7"/> 

</chart:SfDateTimeRangeNavigator.OverlayBrush> 

 

  

We have prepared a demo sample based on your requirement and it can be downloaded from below link, 

Sample: RangeNavigatorBackground128406 

  

Regards, 

Devi