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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to override the template of Range Navigator?

Platform: WPF |
Control: RangeNavigator

Description

This article describes how to override the template of SfDateTimeRangeNavigator, in order to customize its default style.

Solution

Using SfDateTimeRangeNavigator’s Template property, we can override the default template of this control.

Code Snippet

<Grid>

        <Grid.DataContext>

            <local:ViewModel/>

        </Grid.DataContext>

       

        <Grid.Resources>

            <SolidColorBrush x:Key="LabelBarBackground">#dddddd</SolidColorBrush>

            <SolidColorBrush x:Key="UnSelectedRegion">#cfcfcf</SolidColorBrush>

            <SolidColorBrush x:Key="ThumbHandBrush">#363636</SolidColorBrush>

            <SolidColorBrush x:Key="ThumbEllipseBrush">#f3f3f3</SolidColorBrush>

            <SolidColorBrush x:Key="Borderbrush">#c6c6c6</SolidColorBrush>

           

            <ControlTemplate x:Key="NavigatorTemplate"            

                             TargetType="chart:ResizableScrollBar" >

                <Grid x:Name="Root">

                    <Grid.Resources>

                        <!-- RepeatButton Templates -->

                        <ControlTemplate x:Key="RepeatButtonTemplate"   

                                         TargetType="RepeatButton">

                            <Grid x:Name="Root" Background="#cfcfcf">

                                <VisualStateManager.VisualStateGroups>

                                    <VisualStateGroup x:Name="CommonStates">

                                        <VisualState x:Name="Normal" />

                                    </VisualStateGroup>

                                </VisualStateManager.VisualStateGroups>

                            </Grid>

                        </ControlTemplate>

                        <ControlTemplate x:Key="HorizontalIncrementTemplate"  

                                         TargetType="RepeatButton">

                            <Grid x:Name="Root" Margin="-1,0,0,0">

                                <Rectangle x:Name="Background" Opacity="0"   

                                           Fill="#FFB7B7B7" StrokeThickness="1">

                                </Rectangle>

                                <Rectangle x:Name="Highlight" Opacity="0"  

                                           IsHitTestVisible="false" Stroke="#FF686868" 

                                           StrokeThickness="1" Margin="4,0,0,0" />

                                <Path Stretch="Uniform" Height="8" Width="4" Data="F1 M  

                                      511.047,352.682L 511.047,342.252L  

                                      517.145,347.467L 511.047,352.682 Z ">

                                    <Path.Fill>

                                        <SolidColorBrush x:Name="ButtonColor"                  

                                                         Color="#FF333333"/>

                                    </Path.Fill>

                                </Path>

                                <Rectangle x:Name="DisabledElement" Opacity="0"            

                                           Fill="#FFFFFFFF"/>

                            </Grid>

                        </ControlTemplate>

                        <ControlTemplate x:Key="HorizontalDecrementTemplate" 

                                         TargetType="RepeatButton">

                            <Grid x:Name="Root" Margin="-1,0,0,0">

                                <Rectangle x:Name="Background" Opacity="0"  

                                           Fill="#FFB7B7B7" StrokeThickness="1"

                                           Margin="4">

                                </Rectangle>

                                <Path Stretch="Uniform" Height="8" Width="4" Data="F1 M 

                                      110.692,342.252L 110.692,352.682L 

                                      104.594,347.467L 110.692,342.252 Z ">

                                    <Path.Fill>

                                        <SolidColorBrush x:Name="ButtonColor" 

                                                         Color="#FF333333" />

                                    </Path.Fill>

                                </Path>

                                <Rectangle x:Name="DisabledElement" Opacity="0"  

                                           Fill="#FF686868"/>

                            </Grid>

                        </ControlTemplate>

 

                        <!-- Vertical Inc/Dec Templates -->

                        <ControlTemplate x:Key="VerticalIncrementTemplate"

                                         TargetType="RepeatButton">

                            <Grid x:Name="Root" Margin="1,0,0,0">

                                <Rectangle x:Name="Background" Opacity="0" RadiusX="8"

                                           RadiusY="8" Fill="#FFB7B7B7"  

                                           StrokeThickness="1"></Rectangle>

                                <Rectangle x:Name="Highlight" Opacity="0" RadiusX="8"

                                           RadiusY="8" IsHitTestVisible="false" 

                                           Stroke="#FF6DBDD1" StrokeThickness="1"  

                                           Margin="4,0,0,0" />

                                <Path Stretch="Uniform" Height="4" Width="8" Data="F1 M           

                                      531.107,321.943L 541.537,321.943L  

                                      536.322,328.042L 531.107,321.943 Z ">

                                    <Path.Fill>

                                        <SolidColorBrush x:Name="ButtonColor"

                                                         Color="#FF333333" />

                                    </Path.Fill>

                                </Path>

                                <Rectangle x:Name="DisabledElement" Opacity="0" 

                                           RadiusX="8" RadiusY="8" Fill="#FF686868"/>

                            </Grid>

                        </ControlTemplate>

                        <ControlTemplate x:Key="VerticalDecrementTemplate"

                                         TargetType="RepeatButton">

                            <Grid x:Name="Root" Margin="1,0,0,0">

                                <Rectangle x:Name="Background" Opacity="0" RadiusX="8"

                                           RadiusY="8" Fill="#FFB7B7B7"

                                           StrokeThickness="1">

                                </Rectangle>

                                <Rectangle x:Name="Highlight" Opacity="0" RadiusX="1"

                                           RadiusY="1" IsHitTestVisible="false" 

                                           Stroke="#FF6DBDD1" StrokeThickness="1" 

                                           Margin="4,0,0,0" />

                                <Path Stretch="Uniform" Height="4" Width="8" Data="F1 M

                                      541.537,173.589L 531.107,173.589L 536.322,167.49L

                                      541.537,173.589 Z ">

                                    <Path.Fill>

                                        <SolidColorBrush x:Name="ButtonColor"    

                                                         Color="#FF333333" />

                                    </Path.Fill>

                                </Path>

                                <Rectangle x:Name="DisabledElement" Opacity="0"

                                 RadiusX="8" RadiusY="8" Fill="#FF686868"/>

                            </Grid>

                        </ControlTemplate>

 

                        <!-- Thumb Templates -->

                        <ControlTemplate x:Key="VerticalThumbTemplate"

                                         TargetType="Thumb">

                            <Grid x:Name="ThumbVisual">

                                <Rectangle x:Name="Background" Fill="#FF686868">

                                </Rectangle>

                            </Grid>

                        </ControlTemplate>

                        <ControlTemplate x:Key="HorizontalThumbTemplate"

                                         TargetType="Thumb">

                            <Grid x:Name="ThumbVisual">

                                <Rectangle x:Name="Background" Fill="Transparent">

                                </Rectangle>

                            </Grid>

                        </ControlTemplate>

                        <ControlTemplate x:Key="HorizontalNearThumbTemplate"

                                         TargetType="Thumb">

                            <Grid x:Name="left">

                                <Line HorizontalAlignment="Right" Stroke="Black"

                                      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="Black"

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

                                </Canvas>

                            </Grid>

                        </ControlTemplate>

                        <ControlTemplate x:Key="HorizontalFarThumbTemplate"

                                         TargetType="Thumb">

                            <Grid x:Name="right">

                                <Line HorizontalAlignment="Right" Stroke="Black"

                                      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="Black"

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

                                </Canvas>

                            </Grid>                           

                        </ControlTemplate>

                        <ControlTemplate x:Key="VerticalNearThumbTemplate"

                                         TargetType="Thumb">

                            <Border Margin="0,0,0,-1" Height="18"

                                    Background="#FF686868">

                                <Grid Margin="4">

                                    <ContentControl>

                                        <Ellipse Width="9" Height="9" Fill="#FFB7B7B7">

                                        </Ellipse>

                                    </ContentControl>

                                </Grid>

                            </Border>

                        </ControlTemplate>

                        <ControlTemplate x:Key="VerticalFarThumbTemplate"

                                         TargetType="Thumb">

                            <Border Margin="0,-1,0,0" Height="18"

                                    Background="#FF686868">

                                <Grid Margin="4">

                                    <ContentControl>

                                        <Ellipse Width="9" Height="9" Fill="#FFB7B7B7">

                                        </Ellipse>

                                    </ContentControl>

                                </Grid>

                            </Border>

                        </ControlTemplate>

                    </Grid.Resources>

 

                    <VisualStateManager.VisualStateGroups>

                        <VisualStateGroup x:Name="CommonStates">

                            <VisualState x:Name="Normal" />

                            <VisualState x:Name="MouseOver" />

                            <VisualState x:Name="Disabled">

                                <Storyboard>

                                    <DoubleAnimation Storyboard.TargetName="Root"

                                     Storyboard.TargetProperty="Opacity" To="0.5"

                                     Duration="0" />

                                </Storyboard>

                            </VisualState>

                        </VisualStateGroup>

                    </VisualStateManager.VisualStateGroups>

 

                    <!-- Horizontal Template -->

                    <Grid x:Name="HorizontalRoot" Visibility="Collapsed">

                        <Grid.ColumnDefinitions>

                            <ColumnDefinition Width="Auto" />

                            <ColumnDefinition Width="Auto" />

                            <ColumnDefinition Width="Auto" />

                            <ColumnDefinition Width="Auto" />

                            <ColumnDefinition Width="Auto" />

                            <ColumnDefinition Width="*" />

                            <ColumnDefinition Width="Auto" />

                        </Grid.ColumnDefinitions>

 

 

                        <ContentPresenter Content="{TemplateBinding Content}"

                                          Grid.Column="1" Grid.ColumnSpan="5"/>

                        <!-- Repeat Buttons + Thumb -->

                        <RepeatButton x:Name="HorizontalSmallDecrease"

                                      Visibility="{TemplateBinding

                                      ScrollButtonVisibility}" Grid.Column="0"

                                      MinWidth="16" IsTabStop="False" Interval="50"

                                      Template="{StaticResource

                                      HorizontalDecrementTemplate}" Margin="1" />

                        <RepeatButton x:Name="HorizontalLargeDecrease" Grid.Column="1"

                                      Width="0" Template="{StaticResource

                                      RepeatButtonTemplate}" Interval="50"

                                      IsTabStop="False" Background="#FF686868"

                                      Opacity="0.5" />

                        <Thumb x:Name="HorizontalThumb" MinWidth="0" Width="20"

                               Grid.Column="3" Template="{StaticResource

                               HorizontalThumbTemplate}" />

                        <RepeatButton x:Name="HorizontalLargeIncrease" Grid.Column="5"

                                      Width="0" Interval="50" Template="{StaticResource

                                      RepeatButtonTemplate}" IsTabStop="False"

                                      Background="#FF686868" Opacity="0.5" />

                        <RepeatButton x:Name="HorizontalSmallIncrease"

                                      Visibility="{TemplateBinding

                                      ScrollButtonVisibility}" Grid.Column="6"

                                      MinWidth="16" IsTabStop="False" Interval="50"

                                      Template="{StaticResource                      

                                      HorizontalIncrementTemplate}" Margin="1" />

                        <Thumb x:Name="HorizontalThumbHand2"

                               Background="{TemplateBinding Background}"
                               Grid.Column="4" Template="{StaticResource   

                               HorizontalFarThumbTemplate}" />

                        <Thumb x:Name="HorizontalThumbHand1"

                               Background="{TemplateBinding Background}"

                               Grid.Column="2" Template="{StaticResource

                               HorizontalNearThumbTemplate}"/>

                    </Grid>

 

                    <!-- Vertical Template -->

                    <Grid x:Name="VerticalRoot" >

                        <Grid.RowDefinitions>

                            <RowDefinition Height="Auto" />

                            <RowDefinition Height="Auto" />

                            <RowDefinition Height="Auto" />

                            <RowDefinition Height="Auto" />

                            <RowDefinition Height="Auto" />

                            <RowDefinition Height="*" />

                            <RowDefinition Height="Auto" />

                        </Grid.RowDefinitions>

 

                        <!-- Track Layer -->

                        <Rectangle Grid.RowSpan="7" RadiusX="8" RadiusY="8"

                                   StrokeThickness="1" Stroke="#00000000"

                                   Fill="#FFB7B7B7"></Rectangle>

                        <Rectangle Grid.RowSpan="7" RadiusX="8" RadiusY="8"

                                   StrokeThickness="1" Fill="#FFB7B7B7"></Rectangle>

                        <Rectangle Grid.RowSpan="7" RadiusX="8" RadiusY="8" Margin="1"

                                   Stroke="#FFB7B7B7"></Rectangle>

 

                        <!-- Repeat Buttons + Thumb -->

                        <RepeatButton x:Name="VerticalSmallDecrease"

                                      Visibility="{TemplateBinding

                                      ScrollButtonVisibility}" Grid.Row="0"
                                      MinHeight="16" IsTabStop="False" Interval="50"

                                      Template="{StaticResource

                                      VerticalDecrementTemplate}" Margin="1" />

                        <RepeatButton x:Name="VerticalLargeDecrease" Grid.Row="1"

                                      Height="0" Template="{StaticResource

                                      RepeatButtonTemplate}" Interval="50"

                                      IsTabStop="False" />

                        <Thumb x:Name="VerticalThumbHand1" MinHeight="18" Grid.Row="2"

                               Template="{StaticResource VerticalNearThumbTemplate}" />

                        <Thumb x:Name="VerticalThumb" MinHeight="0" Height="18"

                               Grid.Row="3" Template="{StaticResource

                               VerticalThumbTemplate}" />

                        <Thumb x:Name="VerticalThumbHand2" MinHeight="18" Grid.Row="4"

                               Template="{StaticResource VerticalFarThumbTemplate}" />

                        <RepeatButton x:Name="VerticalLargeIncrease" Grid.Row="5"

                                      Template="{StaticResource RepeatButtonTemplate}"

                                      Interval="50" IsTabStop="False" />

                        <RepeatButton x:Name="VerticalSmallIncrease" Grid.Row="6"

                                      Visibility="{TemplateBinding

                                      ScrollButtonVisibility}" MinHeight="16"

                                      IsTabStop="False" Interval="50"

                                      Template="{StaticResource                               

                                      VerticalIncrementTemplate}" Margin="1" />

                    </Grid>

                </Grid>

            </ControlTemplate>

 

            <ControlTemplate x:Key="navigator" 

                             TargetType="chart:SfDateTimeRangeNavigator">

                <Border Background="{TemplateBinding Background}"

                        BorderBrush="{TemplateBinding BorderBrush}"

                        BorderThickness="{TemplateBinding BorderThickness}"

                        KeyboardNavigation.TabNavigation="None">

                    <Grid x:Name="PART_RangeNavigatorPanel" MinHeight="100">

                        <Grid.RowDefinitions>

                            <RowDefinition Height="Auto"/>

                            <RowDefinition Height="*"/>

                            <RowDefinition Height="Auto"/>

                            <RowDefinition Height="Auto"/>

                        </Grid.RowDefinitions>

                        <Border VerticalAlignment="Top" x:Name="Part_UpperBorder"

                                Grid.Row="0" Background="#dddddd">

                            <Grid >

                                <Canvas x:Name="PART_UPPERLINE"/>

                                <chart:ResizeCanvas x:Name="PART_UPPERBAR"

                                                    Background="Transparent">

                                    <chart:ResizeCanvas.Resources>

                                        <Style TargetType="TextBlock">

                                            <Setter Property="Foreground"

                                                    Value="#848484"/>

                                        </Style>

                                    </chart:ResizeCanvas.Resources>

                                </chart:ResizeCanvas>

                            </Grid>

                        </Border>

 

                        <chart:RangeNavigatorSelector x:Name="Part_RangePicker"

                                                      Orientation="Horizontal"

                                                      Grid.Row="1"

                                                      Template="{StaticResource

                                                      NavigatorTemplate}"

                                                      OverlayBrush="{TemplateBinding

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

                            <Grid>

                                <ContentControl Content="{TemplateBinding

                                                Content}"></ContentControl>

                                <Canvas x:Name="Part_Content_line"/>

                                <Canvas x:Name="Part_Hover"  IsHitTestVisible="False">

                                    <Rectangle></Rectangle>

                                </Canvas>

                            </Grid>

                        </chart:RangeNavigatorSelector>

                        <Canvas x:Name="Part_Tooltip" Grid.Row="1"

                                IsHitTestVisible="False">

                            <ContentControl ></ContentControl>

                            <ContentControl ></ContentControl>

                        </Canvas>

                        <Border x:Name="Part_Border" Grid.Row="2" >

                            <Grid >

                                <Canvas x:Name="PART_LOWERLINE"/>

                                <chart:ResizeCanvas x:Name="PART_LOWERBAR" 

                                                    Background="Transparent">

                                    <chart:ResizeCanvas.Resources>

                                        <Style TargetType="TextBlock">

                                            <Setter Property="Foreground"

                                                    Value="#848484"/>

                                        </Style>

                                    </chart:ResizeCanvas.Resources>

                                </chart:ResizeCanvas>

                            </Grid>

                        </Border>

                        <chart:ResizableScrollBar x:Name="Part_Scroll" Grid.Row="3"

                                                  Visibility="{TemplateBinding

                                                  ScrollbarVisibility}"

                                                  Orientation="Horizontal"/>

                    </Grid>

                </Border>

            </ControlTemplate>

 

            <Style x:Key="ticklineStyle" TargetType="Line">

                <Setter Property="StrokeThickness" Value="0" />

            </Style>

            <Style x:Key="higherBarLabelStyle" TargetType="TextBlock">

                <Setter Property="Foreground" Value="Transparent"/>

            </Style>

        </Grid.Resources>

 

        <chart:SfDateTimeRangeNavigator x:Name="RangeNavigator" Margin="5,0,5,5"

                                       Template="{StaticResource navigator}"

                                       XBindingPath="Date" ViewRangeStart="1/1/2012"

                                        ViewRangeEnd="2/1/2012"

                                       ItemsSource="{Binding dataValue}">

            <chart:SfLineSparkline YBindingPath="Count" ItemsSource="{Binding

                                   dataValue}"/>

        </chart:SfDateTimeRangeNavigator>

    </Grid>

 

2X faster development

The ultimate WPF UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile