How to override the template of Range Navigator?

<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>