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

[Solved] Maximum Zoom in - Timebar control

2 Answers 534 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

2 Answers, 1 is accepted

answered on 13 Dec 2011, 12:56 PM

Hi,

Due to a limitation in Silverlight framework, we have enforced a constraint for zoom-in to maximum of 30 000 pixels. Depending on the period range that the timebar shows, the minimum interval that can be displayed, might be different from the minimum interval that you have added in the Intervals collection. In your case the period range of your timebar is large and when you try to zoom in to a smaller interval, you hit the 30 000 pixel limit.

All the best,
Yavor
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>