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

How to override the template of Range Navigator?

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.

XAML:

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

 

Article ID: Published Date: Last Revised Date: Platform: Control:
6938 06/16/2016 06/16/2016 WPF RangeNavigator
Did you find this information helpful?
Add Comment
You must log in to leave a comment

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.