This is a migrated thread and some comments may be shown as answers.

Maximum Zoom in - Timebar control

2 Answers 163 Views

TimeBar

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Balaji asked on 04 Aug 2011, 10:26 AM

Decade.JPG

Hi,

We have set the Interval (Decade, year , month, week, day )in our time bar control and privided the some test data for it.
However we were not able to zoom -in aftre month level, if we give larger date range in Timebar Period start and End(1-Jan-1950 to 1 jan 2010).

If we reduce the time range then we were able to zoom-in till week and day level?

Is that some zoom -in level do we need to set so that it start from Decade and go till Day or Hour.

Also if we set more time range , we are not getting the Bar/Spike in RadColumnSparkline control, PLease let me what i am doing wrong?

I have also provide the XAML

<navigation:Page x:Class="SilverlightApplication1.Decade"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d"

xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"

d:DesignHeight="47" d:DesignWidth="734"

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

xmlns:System="clr-namespace:System;assembly=mscorlib"

xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"

xmlns:example="clr-namespace:Telerik.Windows.Examples.TimeBar.Gallery;assembly=TimeBar"

Title="Decade Page">

<UserControl.DataContext>

<example:ExampleViewModel StartDate="1-Jan-1952" EndDate="1-Jan-2012" />

</UserControl.DataContext>

<UserControl.Resources>

<SolidColorBrush x:Key="TimeBar_Foreground" Color="#FF444444"/>

<LinearGradientBrush x:Key="TimeBar_Background" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#71B9C1" Offset="0"/>

<GradientStop Color="white" Offset="1"/>

</LinearGradientBrush>

<SolidColorBrush x:Key="TimeBar_BorderBrush" Color="#FF848484"/>

<SolidColorBrush x:Key="TimeBar_Button_Border_Disabled" Color="#FFCACACA"/>

<LinearGradientBrush x:Key="TimeBar_Button_Background_Disabled" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#71B9C1" Offset="1"/>

<GradientStop Color="white" Offset="1"/>

</LinearGradientBrush>

<SolidColorBrush x:Key="TimeBar_Button_InnerBorder_Disabled" Color="White"/>

<telerik:Office_BlackTheme x:Key="Theme"/>

<telerik:TimeSpanTicksConverter x:Key="timespanConverter"/>

<telerik:DateTicksConverter x:Key="dateConverter"/>

<LinearGradientBrush x:Key="TimeBar_Slider_Background" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFF0F0F0" Offset="0.257"/>

<GradientStop Color="#7CAAAE" Offset="7"/>

</LinearGradientBrush>

<SolidColorBrush x:Key="TimeBar_Slider_InnerBorder" Color="Transparent"/>

<Thickness x:Key="TimeBar_Slider_InnerBorderThickness">0</Thickness>

<CornerRadius x:Key="TimeBar_Slider_InnerBorder_CornerRadius">0</CornerRadius>

<SolidColorBrush x:Key="TimeBar_Slider_Thumbs_OuterBorder" Color="#FF848484"/>

<Thickness x:Key="TimeBar_Slider_Thumbs_OuterBorderThickness">1</Thickness>

<SolidColorBrush x:Key="TimeBar_Slider_Thumbs_InnerBorder" Color="White"/>

<LinearGradientBrush x:Key="TimeBar_Slider_Thumbs_Background" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="White"/>

<GradientStop Color="#CBEEF0" Offset="1"/>

<GradientStop Color="Gainsboro" Offset="0.42"/>

<GradientStop Color="#FFADADAD" Offset="0.43"/>

</LinearGradientBrush>

<CornerRadius x:Key="TimeBar_Slider_Thumbs_InnerBorder_CornerRadius">0</CornerRadius>

<CornerRadius x:Key="TimeBar_Slider_Thumbs_OuterBorder_CornerRadius">0</CornerRadius>

<SolidColorBrush x:Key="TimeBar_Slider_Thumbs_Path" Color="#CBEEF0"/>

<System:Double x:Key="TimeBar_Slider_Thumbs_Width">5</System:Double>

<SolidColorBrush x:Key="TimeBar_Slider_Thumbs_Shadow" Color="Black"/>

<System:Double x:Key="TimeBar_Slider_Thumbs_Height">7

</System:Double>

<ControlTemplate x:Key="HorizontalThumbTemplate" TargetType="Thumb">

<Grid Background="{TemplateBinding Background}" Margin="{TemplateBinding Margin}" VerticalAlignment="Stretch">

<Grid Height="{StaticResource TimeBar_Slider_Thumbs_Height}" Margin="3,0" VerticalAlignment="Center">

<Path x:Name="Path" Data="M4,0 L5,0 5,9 4,9 z M2,0 L3,0 3,9 2,9 z M0,0 L1,0 1,9 0,9 z" Fill="{StaticResource TimeBar_Slider_Thumbs_Path}" HorizontalAlignment="Stretch" Width="{StaticResource TimeBar_Slider_Thumbs_Width}"/>

<Path Data="M4,0 L5,0 5,9 4,9 z M2,0 L3,0 3,9 2,9 z M0,0 L1,0 1,9 0,9 z" Fill="{StaticResource TimeBar_Slider_Thumbs_Shadow}" Margin="2,0,0,0" Width="{StaticResource TimeBar_Slider_Thumbs_Width}"/>

</Grid>

</ControlTemplate>

<LinearGradientBrush x:Key="TimeBar_Slider_Range_Border" EndPoint="0,1" StartPoint="0,0">

<GradientStop Color="#7CAAAE" Offset="0"/>

<GradientStop Color="Gray" Offset="1"/>

</LinearGradientBrush>

<LinearGradientBrush x:Key="TimeBar_Slider_Range_Background" EndPoint="0,1" StartPoint="0,0">

<GradientStop Color="White"/>

<GradientStop Color="White" Offset="1"/>

</LinearGradientBrush>

<Thickness x:Key="TimeBar_Slider_Range_Margin">0,2</Thickness>

<Thickness x:Key="TimeBar_Slider_Range_BorderThickness">1</Thickness>

<CornerRadius x:Key="TimeBar_Slider_Range_Border_CornerRadius">0</CornerRadius>

<ControlTemplate x:Key="RangeTemplate" TargetType="Thumb">

<Grid>

<Border x:Name="border" BorderBrush="{StaticResource TimeBar_Slider_Range_Border}" BorderThickness="{StaticResource TimeBar_Slider_Range_BorderThickness}" Background="{StaticResource TimeBar_Slider_Range_Background}" CornerRadius="{StaticResource TimeBar_Slider_Range_Border_CornerRadius}" Margin="{TemplateBinding Margin}" VerticalAlignment="Stretch"/>

</Grid>

</ControlTemplate>

<SolidColorBrush x:Key="TimeBar_Slider_Handle_Path_Background" Color="Black"/>

<CornerRadius x:Key="TimeBar_Slider_Handle_InnerBorder_CornerRadius">0</CornerRadius>

<CornerRadius x:Key="TimeBar_Slider_Handle_OuterBorder_CornerRadius">1</CornerRadius>

<SolidColorBrush x:Key="TimeBar_Slider_Handle_OuterBorder_Over" Color="#FFFFC92B"/>

<Thickness x:Key="TimeBar_Slider_Handle_OuterBorder_BorderThickness_Over">1</Thickness>

<LinearGradientBrush x:Key="TimeBar_Slider_Handle_Background_Over" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFFFFBA3" Offset="1"/>

<GradientStop Color="#FFFFFBDA" Offset="0"/>

<GradientStop Color="#FFFFD25A" Offset="0.43"/>

<GradientStop Color="#FFFEEBAE" Offset="0.42"/>

</LinearGradientBrush>

<Thickness x:Key="TimeBar_Slider_Handle_InnerBorder_BorderThickness_Over">1</Thickness>

<SolidColorBrush x:Key="TimeBar_Slider_Handle_InnerBorder_Over" Color="#FFFFFFFF"/>

<SolidColorBrush x:Key="TimeBar_Slider_Handle_Path_Background_Over" Color="Black"/>

<LinearGradientBrush x:Key="TimeBar_Slider_Handle_OuterBorder_Pressed" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FF282828" Offset="0"/>

<GradientStop Color="#FF5F5F5F" Offset="1"/>

</LinearGradientBrush>

<LinearGradientBrush x:Key="TimeBar_Slider_Handle_Background_Pressed" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFFFD74E" Offset="0.996"/>

<GradientStop Color="#FFFFDCAB" Offset="0.17"/>

<GradientStop Color="#FFFE9227" Offset="0.57"/>

<GradientStop Color="#FFFFD18F" Offset="0.56"/>

<GradientStop Color="#FFFFBA74" Offset="0"/>

</LinearGradientBrush>

<LinearGradientBrush x:Key="TimeBar_Slider_Handle_InnerBorder_Pressed" EndPoint="1,0.5" StartPoint="0,0.5">

<GradientStop Color="#FFB69A78"/>

<GradientStop Color="#FFFFE17A" Offset="0.126"/>

</LinearGradientBrush>

<SolidColorBrush x:Key="TimeBar_Slider_Handle_Path_Background_Pressed" Color="Black"/>

<Style x:Key="HandleStyle" TargetType="RepeatButton">

<Setter Property="Cursor" Value="Hand"/>

<Setter Property="Width" Value="17"/>

<Setter Property="VerticalAlignment" Value="Stretch"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="RepeatButton">

<Grid x:Name="Root">

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Normal"/>

<VisualState x:Name="MouseOver">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0:0:1" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="OuterBorder">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TimeBar_Slider_Handle_OuterBorder_Over}"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0:0:1" Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="OuterBorder">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TimeBar_Slider_Handle_OuterBorder_BorderThickness_Over}"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0:0:1" Storyboard.TargetProperty="Background" Storyboard.TargetName="InnerBorder">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TimeBar_Slider_Handle_Background_Over}"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0:0:1" Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="InnerBorder">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TimeBar_Slider_Handle_InnerBorder_BorderThickness_Over}"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0:0:1" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="InnerBorder">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TimeBar_Slider_Handle_InnerBorder_Over}"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0:0:1" Storyboard.TargetProperty="Fill" Storyboard.TargetName="Path">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TimeBar_Slider_Handle_Path_Background_Over}"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Pressed">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0:0:1" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="OuterBorder">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TimeBar_Slider_Handle_OuterBorder_Pressed}"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0:0:1" Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="OuterBorder">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TimeBar_Slider_Handle_OuterBorder_BorderThickness_Over}"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0:0:2" Storyboard.TargetProperty="Background" Storyboard.TargetName="InnerBorder">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TimeBar_Slider_Handle_Background_Pressed}"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0:0:1" Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="InnerBorder">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TimeBar_Slider_Handle_InnerBorder_BorderThickness_Over}"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0:0:1" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="InnerBorder">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TimeBar_Slider_Handle_InnerBorder_Pressed}"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0:0:1" Storyboard.TargetProperty="Fill" Storyboard.TargetName="Path">

<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TimeBar_Slider_Handle_Path_Background_Pressed}"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Disabled"/>

</VisualStateGroup>

<VisualStateGroup x:Name="FocusStates">

<VisualState x:Name="Focused"/>

<VisualState x:Name="Unfocused"/>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Border x:Name="OuterBorder" CornerRadius="{StaticResource TimeBar_Slider_Handle_OuterBorder_CornerRadius}">

<Border x:Name="InnerBorder" Background="#01FFFFFF" CornerRadius="{StaticResource TimeBar_Slider_Handle_InnerBorder_CornerRadius}">

<Path x:Name="Path" Data="M6,0 L8,0 L8,14 L6,14 L6,12 L4,12 L4,10 L2,10 L2,8 L0,8 L0,6 L2,6 L2,4 L4,4 L4,2 L6,2 z" Fill="{StaticResource TimeBar_Slider_Handle_Path_Background}" HorizontalAlignment="Center" Height="7" Margin="-2,0,0,0" Stretch="Fill" VerticalAlignment="Center" Width="4"/>

</Border>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<Style x:Key="CustomSlider" TargetType="telerik:RadSlider">

<Setter Property="HorizontalAlignment" Value="Stretch"/>

<Setter Property="VerticalAlignment" Value="Stretch"/>

<Setter Property="Orientation" Value="Horizontal"/>

<Setter Property="IsEnabled" Value="True"/>

<Setter Property="HandlesVisibility" Value="Visible"/>

<Setter Property="IsMouseWheelEnabled" Value="True"/>

<Setter Property="Background" Value="{StaticResource TimeBar_Slider_Background}"/>

<Setter Property="BorderBrush" Value="{StaticResource TimeBar_Slider_InnerBorder}"/>

<Setter Property="BorderThickness" Value="{StaticResource TimeBar_Slider_InnerBorderThickness}"/>

<Setter Property="Delay" Value="250"/>

<Setter Property="RepeatInterval" Value="250"/>

<Setter Property="StepAction" Value="ChangeRange"/>

<Setter Property="ThumbVisibility" Value="Visible"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerik:RadSlider">

<Grid x:Name="LayoutRoot">

<Grid>

<Grid x:Name="HorizontalTemplate">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="*"/>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="3" CornerRadius="{StaticResource TimeBar_Slider_InnerBorder_CornerRadius}" Grid.RowSpan="3"/>

<telerik:TimeBarNonScrollingPanel Grid.Column="1" Grid.RowSpan="3" Slider="{Binding ElementName=PART_Slider}">

<telerik:SelectionIndicator EndDate="{Binding EndDate, ElementName=PART_SelectionThumb}" StartDate="{Binding StartDate, ElementName=PART_SelectionThumb}" telerik:StyleManager.Theme="{StaticResource Theme}"/>

</telerik:TimeBarNonScrollingPanel>

<Grid x:Name="HorizontalRangeTemplate" Grid.Column="1" Grid.Row="1">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="*"/>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<Rectangle x:Name="HorizontalRangeLargeDecrease" Cursor="Hand" Fill="Transparent" Opacity="0"/>

<Border BorderBrush="{StaticResource TimeBar_Slider_Thumbs_OuterBorder}" BorderThickness="{StaticResource TimeBar_Slider_Thumbs_OuterBorderThickness}" Grid.ColumnSpan="3" Grid.Column="1" CornerRadius="{StaticResource TimeBar_Slider_Thumbs_OuterBorder_CornerRadius}">

<Border BorderBrush="{StaticResource TimeBar_Slider_Thumbs_InnerBorder}" BorderThickness="1" Background="{StaticResource TimeBar_Slider_Thumbs_Background}" CornerRadius="{StaticResource TimeBar_Slider_Thumbs_InnerBorder_CornerRadius}"/>

</Border>

<Thumb x:Name="HorizontalRangeStartThumb" Background="Transparent" Cursor="SizeWE" Grid.Column="1" IsEnabled="{TemplateBinding IsEnabled}" Margin="0,2" Template="{StaticResource HorizontalThumbTemplate}" Visibility="{TemplateBinding ThumbVisibility}"/>

<Thumb x:Name="HorizontalRangeMiddleThumb" BorderBrush="{StaticResource TimeBar_Slider_Range_Border}" Background="{StaticResource TimeBar_Slider_Range_Background}" Cursor="Hand" Grid.Column="2" IsEnabled="{TemplateBinding IsEnabled}" Margin="{StaticResource TimeBar_Slider_Range_Margin}" Template="{StaticResource RangeTemplate}"/>

<Thumb x:Name="HorizontalRangeEndThumb" Background="Transparent" Cursor="SizeWE" Grid.Column="3" IsEnabled="{TemplateBinding IsEnabled}" Margin="0,2" Template="{StaticResource HorizontalThumbTemplate}" Visibility="{TemplateBinding ThumbVisibility}"/>

<Rectangle x:Name="HorizontalRangeLargeIncrease" Cursor="Hand" Grid.Column="4" Fill="Red" Opacity="0" />

</Grid>

<RepeatButton x:Name="HorizontalDecreaseHandle" Delay="{TemplateBinding Delay}" IsTabStop="False" IsEnabled="{TemplateBinding IsEnabled}" Interval="{TemplateBinding RepeatInterval}" Grid.Row="1" Style="{StaticResource HandleStyle}" Visibility="{TemplateBinding HandlesVisibility}"/>

<RepeatButton x:Name="HorizontalIncreaseHandle" Grid.Column="2" Delay="{TemplateBinding Delay}" IsTabStop="False" IsEnabled="{TemplateBinding IsEnabled}" Interval="{TemplateBinding RepeatInterval}" Grid.Row="1" RenderTransformOrigin="0.5,0.5" Style="{StaticResource HandleStyle}" Visibility="{TemplateBinding HandlesVisibility}">

<RepeatButton.RenderTransform>

<ScaleTransform ScaleX="-1"/>

</RepeatButton.RenderTransform>

</RepeatButton>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<Style x:Key="RadTimeBarStyle1" TargetType="telerik:RadTimeBar">

<Setter Property="Foreground" Value="{StaticResource TimeBar_Foreground}"/>

<Setter Property="Background" Value="{StaticResource TimeBar_Background}"/>

<Setter Property="BorderThickness" Value="1,0,1,1"/>

<Setter Property="BorderBrush" Value="{StaticResource TimeBar_BorderBrush}"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerik:RadTimeBar">

<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="*"/>

<RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

<Grid Grid.Row="0">

<Grid.RowDefinitions>

<RowDefinition Height="Auto" MinHeight="20"/>

<RowDefinition Height="*"/>

<RowDefinition Height="Auto" MinHeight="20"/>

</Grid.RowDefinitions>

<Border BorderBrush="{StaticResource TimeBar_Button_Border_Disabled}" BorderThickness="0,1" Background="{StaticResource TimeBar_Button_Background_Disabled}" Grid.Row="0">

<Border BorderBrush="{StaticResource TimeBar_Button_InnerBorder_Disabled}" BorderThickness="1"/>

</Border>

<Border BorderBrush="{StaticResource TimeBar_Button_Border_Disabled}" BorderThickness="0,1" Background="{StaticResource TimeBar_Button_Background_Disabled}" Grid.Row="2">

<Border BorderBrush="{StaticResource TimeBar_Button_InnerBorder_Disabled}" BorderThickness="1"/>

</Border>

<telerik:TimeBarContentPanel Grid.Row="1" Slider="{Binding ElementName=PART_Slider}" >

<ContentPresenter/>

</telerik:TimeBarContentPanel>

<telerik:ItemContainer x:Name="PART_ItemContainer" ItemsSource="{TemplateBinding IntervalItems}" Grid.Row="1" Grid.RowSpan="2" Selection="{Binding Selection, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" telerik:StyleManager.Theme="{StaticResource Theme}" MouseLeftButtonUp="PART_ItemContainer_MouseLeftButtonUp">

<telerik:ItemContainer.ItemsPanel>

<ItemsPanelTemplate>

<telerik:LabelMeasurementPanel Slider="{Binding ElementName=PART_Slider}"/>

</ItemsPanelTemplate>

</telerik:ItemContainer.ItemsPanel>

<telerik:ItemContainer.Template>

<ControlTemplate>

<ItemsPresenter/>

</ControlTemplate>

</telerik:ItemContainer.Template>

</telerik:ItemContainer>

<telerik:GroupContainer x:Name="PART_GroupContainer" ItemsSource="{TemplateBinding IntervalGroups}" Grid.Row="0" Grid.RowSpan="2" telerik:StyleManager.Theme="{StaticResource Theme}">

<telerik:GroupContainer.ItemsPanel>

<ItemsPanelTemplate>

<telerik:LabelMeasurementPanel Slider="{Binding ElementName=PART_Slider}"/>

</ItemsPanelTemplate>

</telerik:GroupContainer.ItemsPanel>

<telerik:GroupContainer.Template>

<ControlTemplate>

<ItemsPresenter/>

</ControlTemplate>

</telerik:GroupContainer.Template>

</telerik:GroupContainer>

<telerik:TimeBarStackPanel Grid.Row="1" Slider="{Binding ElementName=PART_Slider}">

<telerik:ShadeControl EndDate="{Binding StartDate, ElementName=PART_SelectionThumb}" StartDate="{TemplateBinding PeriodStart}" telerik:StyleManager.Theme="{StaticResource Theme}"/>

<telerik:SelectionThumb x:Name="PART_SelectionThumb"

IsSnapToIntervalEnabled="{TemplateBinding IsSnapToIntervalEnabled}" MaxSelectionRange="{TemplateBinding MaxSelectionRange}" MinSelectionRange="{TemplateBinding MinSelectionRange}" PeriodStart="{TemplateBinding PeriodStart}" PeriodEnd="{TemplateBinding PeriodEnd}" SelectionPreviewControl="{Binding ElementName=PART_SelectionThumbPreview}" Selection="{Binding Selection, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" telerik:StyleManager.Theme="{StaticResource Theme}" VisiblePeriodStart="{Binding ActualVisiblePeriodStart, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" VisiblePeriodEnd="{Binding ActualVisiblePeriodEnd, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Canvas.ZIndex="2"/>

<telerik:ShadeControl EndDate="{TemplateBinding PeriodEnd}" StartDate="{Binding EndDate, ElementName=PART_SelectionThumb}" telerik:StyleManager.Theme="{StaticResource Theme}"/>

</telerik:TimeBarStackPanel>

<telerik:TimeBarPanel Grid.Row="1" Slider="{Binding ElementName=PART_Slider}">

<telerik:SelectionThumbPreview x:Name="PART_SelectionThumbPreview" telerik:StyleManager.Theme="{StaticResource Theme}"/>

</telerik:TimeBarPanel>

</Grid>

<telerik:RadSlider x:Name="PART_Slider" IsSelectionRangeEnabled="True"

IsMouseWheelEnabled="True"

LargeChange="{Binding LargeChange, Converter={StaticResource timespanConverter}, RelativeSource={RelativeSource TemplatedParent}}"

Maximum="{Binding PeriodEnd, Converter={StaticResource dateConverter}, RelativeSource={RelativeSource TemplatedParent}}"

MinimumRangeSpan="{Binding MinZoomRange, Converter={StaticResource timespanConverter}, RelativeSource={RelativeSource TemplatedParent}}"

Minimum="{Binding PeriodStart, Converter={StaticResource dateConverter}, RelativeSource={RelativeSource TemplatedParent}}"

Grid.Row="1"

SelectionStart=

"{Binding ActualVisiblePeriodStart, Converter={StaticResource dateConverter}, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"

Style="{StaticResource CustomSlider}" StepAction="MoveRange"

SelectionEnd=

"{Binding ActualVisiblePeriodEnd, Converter={StaticResource dateConverter}, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"

SmallChange="{Binding SmallChange, Converter={StaticResource timespanConverter}, RelativeSource={RelativeSource TemplatedParent}}" />

</Grid>

</Border>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White" Height="221">

<Grid.RowDefinitions>

<RowDefinition Height="*"></RowDefinition>

<RowDefinition Height="49"></RowDefinition>

<RowDefinition Height="62" />

</Grid.RowDefinitions>

<telerik:RadTimeBar x:Name="NotesHistoryRtb" Height="75" VerticalAlignment="Top"

PeriodStart="1-Jan-1952"

PeriodEnd="1-Jan-2012"

VisiblePeriodStart="1-Jan-1952"

VisiblePeriodEnd="1-Jan-2012"

SelectionStart="1-Jan-2000"

SelectionEnd="1-Mar-2011" BorderThickness="1,1,1,0"

Style="{StaticResource RadTimeBarStyle1}">

<telerik:RadTimeBar.Intervals>

<telerik:DecadeInterval></telerik:DecadeInterval>

<telerik:YearInterval />

<telerik:MonthInterval />

<telerik:WeekInterval/>

<telerik:DayInterval/>

</telerik:RadTimeBar.Intervals>

<telerik:RadColumnSparkline Margin="0,3" ItemsSource="{Binding ColumnData}" XValuePath="Date" YValuePath="Value" ColumnWidthPercent=".3" Foreground="Red" />

</telerik:RadTimeBar>

<sdk:Label Height="28" HorizontalAlignment="Left" Name="label1" Content="Test ..... " VerticalAlignment="Top" Width="120" Grid.Row="1" />

<sdk:Label Height="28" Name="label2" Content="Test ..... " VerticalAlignment="Top" Width="120" Grid.Row="2"/>

</Grid>

</navigation:Page>

Thanks

B.Balaji

Maximum Zoom in - Timebar control

2 Answers, 1 is accepted