Time Bar - Stack Panel Background Color changes to white

4 posts, 1 answers
  1. Balaji
    Balaji avatar
    19 posts
    Member since:
    Jul 2011

    Posted 19 Dec 2011 Link to this post

    Hi , 
     We are using Q1 2011 version of RAD silver light controls.
     
    We used this COntrol inside the Timebar control and provide the required Data as

    Time Bar - Period start and End date(Jan-1-2000 to Jan-1-2012)
    Time Bar - VisiblePeriod start and End date(Jan-1-2000to Jan-1-2012)

    And we Removed the MinimumRangeSpan from the RAd slider, so that we can zoom into Day Mode


      <telerik:RadSlider x:Name="PART_Slider" IsSelectionRangeEnabled="True"
                                                       MinimumRangeSpanChanged=""  - Removed this property
                                                       IsMouseWheelEnabled="True"
                                                       Maximum="{Binding PeriodEnd, Converter={StaticResource dateConverter}, 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}}"
                                                       />

    Then , if we zoom to Day Mode, (we need to Drag the Slider using mouse)
    In n that case , the shade control in the Timebar stack panel or Timebar back ground color is getting changed to White. Please refer the screen shot. and some time it is in Gray(As expected) . Please refer the screen shot

    Could tell me how to resolve the issue.

    Thanks in Advance.
    B.Balaji
  2. Answer
    Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 22 Dec 2011 Link to this post

    Hello B.Balaji,
    In case I understand you correctly, you have made some modifications to the template of the timebar. That is why, the best way to proceed would be to open a formal support ticket and send us a simple running project, demonstrating the problem.

    In the meantime, you can examine the control tree with a tool such as SilverlightSpy to try to find the cause for the problem yourself.

    Kind regards,
    Tsvetie
    the Telerik team

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

  3. DevCraft banner
  4. Balaji
    Balaji avatar
    19 posts
    Member since:
    Jul 2011

    Posted 05 Jan 2012 Link to this post

    Hi ,
     We are using Q1 2011 version of RAD silver light controls.
     
    We used this COntrol inside the Timebar control and provide the required Data as

    Time Bar - Period start and End date(Jan-1-2000 to Jan-1-2012)
    Time Bar - VisiblePeriod start and End date(Jan-1-2000to Jan-1-2012)

    And we Removed the MinimumRangeSpan from the Rad slider, so that we can zoom into Day Mode.

    Also , we  copied entire(All XAML) from the Office Blue  theme and and pasted in our small Project , the we ran the application it works fine. But when we Zoom into Day mode , [Do not use Mouse scroll] , use the rad slidar pointer to Zoom[Till the last Level and Zoom out Slowly] , some times the color of the Stack panel which is Right and left side of the selection thump will change to white color(i guess it is taking the timebar back ground color).

    Note: How should i be able to Attach my Sample project, i do not have any option. I tried the link "Submit support ticket", it takes me forun or issue tracker[But not able to raise a new issue , i am able only to view].

    i have attached the XAML file alone... that should be fine to reproduce the issue

    <UserControl x:Class="SilverlightTestApplication.MainPage"
            mc:Ignorable="d"
            xmlns:telerikControls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
            xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
            xmlns:system="clr-namespace:System;assembly=mscorlib"
            xmlns:timeBar="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.DataVisualization"
            xmlns:timeBars="clr-namespace:Telerik.Windows.Controls.TimeBar;assembly=Telerik.Windows.Controls.DataVisualization"
            xmlns:vm="clr-namespace:SilverlightTestApplication.ViewModel"
            d:DesignHeight="300" d:DesignWidth="400">
     
        <UserControl.Resources>
            <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="#FF3C6AA3" />
            <LinearGradientBrush x:Key="TimeBar_Slider_Handle_OuterBorder_Pressed" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FF616161" Offset="0"/>
                <GradientStop Color="#FF989898" 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="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFB69A78"/>
                <GradientStop Color="#FFFFE17A" Offset="0.126"/>
            </LinearGradientBrush>
            <SolidColorBrush x:Key="TimeBar_Slider_Handle_Path_Background_Pressed" Color="#FF3C6AA3" />
            <CornerRadius x:Key="TimeBar_Slider_Handle_OuterBorder_CornerRadius">1</CornerRadius>
            <CornerRadius x:Key="TimeBar_Slider_Handle_InnerBorder_CornerRadius">0</CornerRadius>
            <SolidColorBrush x:Key="TimeBar_Slider_Handle_Path_Background" Color="#FF3C6AA3" />
            <system:Double x:Key="TimeBar_Slider_Thumbs_Height">9</system:Double>
            <SolidColorBrush x:Key="TimeBar_Slider_Thumbs_Path" Color="#FF3C6AA3" />
            <system:Double x:Key="TimeBar_Slider_Thumbs_Width">5</system:Double>
            <SolidColorBrush x:Key="TimeBar_Slider_Thumbs_Shadow" Color="White" />
            <CornerRadius x:Key="TimeBar_Slider_Range_Border_CornerRadius">0</CornerRadius>
            <Thickness x:Key="TimeBar_Slider_Range_BorderThickness">1</Thickness>
            <LinearGradientBrush x:Key="TimeBar_Slider_Range_Border" EndPoint="0,1" StartPoint="0,0">
                <GradientStop Color="#FF3C6AA3"/>
                <GradientStop Color="#FF83A5D2" Offset="1"/>
            </LinearGradientBrush>
            <LinearGradientBrush x:Key="TimeBar_Slider_Range_Background" EndPoint="0,1" StartPoint="0,0">
                <GradientStop Color="#FFFFBE32"/>
                <GradientStop Color="White" Offset="1"/>
            </LinearGradientBrush>
            <LinearGradientBrush x:Key="TimeBar_Slider_Background" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFE2F0FD" Offset="0.257"/>
                <GradientStop Color="#FFAEC8E8" Offset="0"/>
            </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>
            <telerikControls:Office_BlueTheme x:Key="Theme" />
            <Thickness x:Key="TimeBar_Slider_Thumbs_OuterBorderThickness">1</Thickness>
            <SolidColorBrush x:Key="TimeBar_Slider_Thumbs_OuterBorder" Color="#FF83A5D2" />
            <CornerRadius x:Key="TimeBar_Slider_Thumbs_OuterBorder_CornerRadius">0</CornerRadius>
            <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="#FFEBF3FF"/>
                <GradientStop Color="#FFD0F3FF" Offset="1"/>
                <GradientStop Color="#FFA1C5F2" Offset="0.43"/>
                <GradientStop Color="#FFCAE1FF" Offset="0.42"/>
            </LinearGradientBrush>
            <CornerRadius x:Key="TimeBar_Slider_Thumbs_InnerBorder_CornerRadius">0</CornerRadius>
            <Thickness x:Key="TimeBar_Slider_Range_Margin">0,2</Thickness>
            <SolidColorBrush x:Key="TimeBar_Foreground" Color="#FF444444" />
            <SolidColorBrush x:Key="TimeBar_Background" Color="White" />
            <SolidColorBrush x:Key="TimeBar_BorderBrush" Color="#FF83A5D2" />
            <LinearGradientBrush x:Key="TimeBar_Button_Background_Disabled" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFEFF6FF"  Offset="1"/>
                <GradientStop Color="#FFE4EFFF"/>
            </LinearGradientBrush>
            <SolidColorBrush x:Key="TimeBar_Button_Border_Disabled" Color="#FFA3BFE5" />
            <SolidColorBrush x:Key="TimeBar_Button_InnerBorder_Disabled" Color="White" />
            <LinearGradientBrush x:Key="TimeBar_Item_Border" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFECF4FE"/>
                <GradientStop Color="#FFB0CBF0"  Offset="1"/>
            </LinearGradientBrush>
            <SolidColorBrush x:Key="TimeBar_Item_Background" Color="Transparent" />
            <SolidColorBrush x:Key="TimeBar_Item_Background_MouseOver" Color="#3A6D92BF" />
            <LinearGradientBrush x:Key="TimeBar_Button_Background_MouseOver" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="White" Offset="0"/>
                <GradientStop Color="#FFEAF2FF" Offset="1"/>
                <GradientStop Color="#FFF0F6FF" Offset="0.42"/>
                <GradientStop Color="#FFD6E8FF" Offset="0.43"/>
            </LinearGradientBrush>
            <SolidColorBrush x:Key="TimeBar_Button_Border_MouseOver" Color="#FFC2D8F5" />
            <SolidColorBrush x:Key="TimeBar_Button_Border" Color="#FFA3BFE5" />
            <LinearGradientBrush x:Key="TimeBar_Button_Background" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="White"/>
                <GradientStop Color="#FFEAF2FF" Offset="1"/>
                <GradientStop Color="#FFE4EFFF" Offset="0.42"/>
                <GradientStop Color="#FFCAE1FF" Offset="0.43"/>
            </LinearGradientBrush>
            <SolidColorBrush x:Key="TimeBar_Button_InnerBorder" Color="White" />
            <LinearGradientBrush x:Key="TimeBar_Group_Border" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FF6E9CC8" Offset="0.5"/>
                <GradientStop Color="#FFB9D5FA" Offset="1"/>
                <GradientStop Color="#FFB9D5FA"/>
            </LinearGradientBrush>
            <SolidColorBrush x:Key="TimeBar_Group_Background" Color="Transparent" />
            <SolidColorBrush x:Key="TimeBar_SelectionThumb_Thumbs_OuterBorder" Color="#FF3C6AA3" />
            <LinearGradientBrush x:Key="TimeBar_SelectionThumb_Thumbs_Background" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="White" Offset="0"/>
                <GradientStop Color="#FFEBEBEB" Offset="1"/>
                <GradientStop Color="#FFD1D1D1" Offset="0.5"/>
                <GradientStop Color="#FFE5E5E5" Offset="0.49"/>
            </LinearGradientBrush>
            <SolidColorBrush x:Key="TimeBar_SelectionThumb_Thumbs_Foreground" Color="#FF3C6AA3" />
            <LinearGradientBrush x:Key="TimeBar_SelectionThumb_Thumbs_Background_MouseOver" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFFFE9CB" Offset="0"/>
                <GradientStop Color="#FFFFCC87" Offset="0.49"/>
                <GradientStop Color="#FFFFAE00" Offset="0.5"/>
                <GradientStop Color="#FFFFD24B" Offset="1"/>
            </LinearGradientBrush>
            <SolidColorBrush x:Key="TimeBar_SelectionThumb_Thumbs_InnerBorder_MouseOver" Color="#FFFFEAA1" />
            <SolidColorBrush x:Key="TimeBar_SelectionThumb_Thumbs_OuterBackground" Color="Transparent" />
            <SolidColorBrush x:Key="TimeBar_SelectionThumb_Thumbs_InnerBorder" Color="#FFFFC64B" />
            <Thickness x:Key="TimeBar_SelectionThumb_Thumbs_InnerBorder_BorderThickness">1</Thickness>
            <LinearGradientBrush x:Key="TimeBar_SelectionThumb_Range_OuterBorder" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FF8CA9CF" Offset="0"/>
                <GradientStop Color="#FF8CA9CF" Offset="1"/>
                <GradientStop Color="#FF6289B9" Offset="0.5"/>
            </LinearGradientBrush>
            <Thickness x:Key="TimeBar_SelectionThumb_Range_OuterBorder_BorderThickness">3</Thickness>
            <SolidColorBrush x:Key="TimeBar_SelectionThumb_Range_Background_MouseOver" Color="#26FFC64B" />
            <SolidColorBrush x:Key="TimeBar_SelectionThumb_Range_Border" Color="Transparent" />
            <Thickness x:Key="TimeBar_SelectionThumb_Range_Border_BorderThickness">0</Thickness>
            <SolidColorBrush x:Key="TimeBar_SelectionThumb_Range_InnerBorder" Color="Transparent" />
            <Thickness x:Key="TimeBar_SelectionThumb_Range_InnerBorder_BorderThickness">0</Thickness>
            <SolidColorBrush x:Key="TimeBar_SelectionThumb_OutBackground" Color="#7FE7F1FF" />
            <LinearGradientBrush x:Key="TimeBar_SelectionIndicator_Background" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFFEECB0" Offset="0"/>
                <GradientStop Color="#FFFFF3E3" Offset="1"/>
            </LinearGradientBrush>
            <SolidColorBrush x:Key="TimeBar_SelectionIndicator_Border" Color="#FFFFE296" />
            <Thickness x:Key="TimeBar_SelectionIndicator_Padding">0,2,0,0</Thickness>
            <CornerRadius x:Key="TimeBar_SelectionIndicator_Radius">0</CornerRadius>
            <SolidColorBrush x:Key="TimeBar_SelectionIndicator_InnerBorder" Color="#FFFFFFFF" />
            <SolidColorBrush x:Key="TimeBar_SelectionThumbPreview_Background" Color="#FFFFC64B" />
     
     
            <!--Increase/Decrease Handle Style-->
            <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">
     
                                <vsm:VisualStateManager.VisualStateGroups>
                                    <vsm:VisualStateGroup x:Name="CommonStates">
                                        <vsm:VisualState x:Name="Normal" />
                                        <vsm:VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder"
                                                                           Storyboard.TargetProperty="BorderBrush" Duration="0:0:1">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{StaticResource TimeBar_Slider_Handle_OuterBorder_Over}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder"
                                                                           Storyboard.TargetProperty="BorderThickness" Duration="0:0:1">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{StaticResource TimeBar_Slider_Handle_OuterBorder_BorderThickness_Over}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerBorder"
                                                                           Storyboard.TargetProperty="Background" Duration="0:0:1">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{StaticResource TimeBar_Slider_Handle_Background_Over}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerBorder"
                                                                           Storyboard.TargetProperty="BorderThickness" Duration="0:0:1">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{StaticResource TimeBar_Slider_Handle_InnerBorder_BorderThickness_Over}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerBorder"
                                                                           Storyboard.TargetProperty="BorderBrush" Duration="0:0:1">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{StaticResource TimeBar_Slider_Handle_InnerBorder_Over}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Path"
                                                                           Storyboard.TargetProperty="Fill" Duration="0:0:1">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{StaticResource TimeBar_Slider_Handle_Path_Background_Over}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </vsm:VisualState>
                                        <vsm:VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder"
                                                                           Storyboard.TargetProperty="BorderBrush" Duration="0:0:1">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{StaticResource TimeBar_Slider_Handle_OuterBorder_Pressed}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder"
                                                                           Storyboard.TargetProperty="BorderThickness" Duration="0:0:1">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{StaticResource TimeBar_Slider_Handle_OuterBorder_BorderThickness_Over}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerBorder"
                                                                           Storyboard.TargetProperty="Background" Duration="0:0:2">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{StaticResource TimeBar_Slider_Handle_Background_Pressed}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerBorder"
                                                                           Storyboard.TargetProperty="BorderThickness" Duration="0:0:1">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{StaticResource TimeBar_Slider_Handle_InnerBorder_BorderThickness_Over}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerBorder"
                                                                           Storyboard.TargetProperty="BorderBrush" Duration="0:0:1">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{StaticResource TimeBar_Slider_Handle_InnerBorder_Pressed}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Path"
                                                                           Storyboard.TargetProperty="Fill" Duration="0:0:1">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{StaticResource TimeBar_Slider_Handle_Path_Background_Pressed}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </vsm:VisualState>
                                        <vsm:VisualState x:Name="Disabled" />
                                    </vsm:VisualStateGroup>
                                    <vsm:VisualStateGroup x:Name="FocusStates">
                                        <vsm:VisualState x:Name="Focused" />
                                        <vsm:VisualState x:Name="Unfocused" />
                                    </vsm:VisualStateGroup>
                                </vsm:VisualStateManager.VisualStateGroups>
     
                                <Border x:Name="OuterBorder"
                                    CornerRadius="{StaticResource TimeBar_Slider_Handle_OuterBorder_CornerRadius}">
                                    <Border x:Name="InnerBorder"
                                        CornerRadius="{StaticResource TimeBar_Slider_Handle_InnerBorder_CornerRadius}"
                                        Background="#01FFFFFF">
                                        <Path x:Name="Path"
                                          HorizontalAlignment="Center"
                                          VerticalAlignment="Center"
                                          Width="4"
                                          Height="7"
                                          Margin="-2,0,0,0"
                                          Stretch="Fill"
                                          Fill="{StaticResource TimeBar_Slider_Handle_Path_Background}"
                                          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" />
                                    </Border>
                                </Border>
                            </Grid>
     
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
     
            <!-- Thumb Template-->
            <ControlTemplate x:Key="HorizontalThumbTemplate" TargetType="Thumb">
                <Grid Background="{TemplateBinding Background}"
                  VerticalAlignment="Stretch"
                  Margin="{TemplateBinding Margin}">
                    <Grid VerticalAlignment="Center"
                      Height="{StaticResource TimeBar_Slider_Thumbs_Height}"
                      Margin="3,0">
                        <Path x:Name="Path"
                           Fill="{StaticResource TimeBar_Slider_Thumbs_Path}"
                           Width="{StaticResource TimeBar_Slider_Thumbs_Width}"
                           HorizontalAlignment="Stretch"
                           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"
                           />
                        <Path Margin="2,0,0,0"
                              Fill="{StaticResource TimeBar_Slider_Thumbs_Shadow}"
                              Width="{StaticResource TimeBar_Slider_Thumbs_Width}"
                              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"
                           />
                    </Grid>
                </Grid>
            </ControlTemplate>
     
            <!-- Range Template-->
            <ControlTemplate x:Key="RangeTemplate" TargetType="Thumb">
                <Grid>
                    <Border x:Name="border"
                        VerticalAlignment="Stretch"
                        Margin="{TemplateBinding Margin}"
                        CornerRadius="{StaticResource TimeBar_Slider_Range_Border_CornerRadius}"
                        BorderThickness="{StaticResource TimeBar_Slider_Range_BorderThickness}"
                        BorderBrush="{StaticResource TimeBar_Slider_Range_Border}"
                        Background="{StaticResource TimeBar_Slider_Range_Background}" />
                </Grid>
     
            </ControlTemplate>
     
            <!--RadSlider-->
            <Style TargetType="telerikControls:RadSlider" x:Key="CustomSlider">
                <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="telerikControls:RadSlider">
                            <Grid x:Name="LayoutRoot">
                                <Grid>
                                    <!--HorizontalTemplate-->
                                    <Grid x:Name="HorizontalTemplate">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="Auto" />
                                        </Grid.RowDefinitions>
     
                                        <Border Grid.RowSpan="3"
                                            Grid.ColumnSpan="3"
                                            CornerRadius="{StaticResource TimeBar_Slider_InnerBorder_CornerRadius}"
                                            BorderThickness="{TemplateBinding BorderThickness}"
                                            BorderBrush="{TemplateBinding BorderBrush}"
                                            Background="{TemplateBinding Background}" />
     
                                        <timeBars:TimeBarNonScrollingPanel Grid.Column="1" Grid.RowSpan="3"
                                                                       Slider="{Binding ElementName=PART_Slider}">
                                            <timeBars:SelectionIndicator StartDate="{Binding ElementName=PART_SelectionThumb, Path=StartDate}"
                                                                     EndDate="{Binding ElementName=PART_SelectionThumb, Path=EndDate}"
                                                                     telerikControls:StyleManager.Theme="{StaticResource Theme}"/>
                                        </timeBars:TimeBarNonScrollingPanel>
     
                                        <!--[Horizontal] [RangeSelectionTemplate]-->
                                        <Grid x:Name="HorizontalRangeTemplate" Grid.Row="1" Grid.Column="1">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="Auto" />
                                                <ColumnDefinition Width="Auto" />
                                                <ColumnDefinition Width="*" />
                                                <ColumnDefinition Width="Auto" />
                                                <ColumnDefinition Width="Auto" />
                                            </Grid.ColumnDefinitions>
     
                                            <Rectangle x:Name="HorizontalRangeLargeDecrease"
                                                   Cursor="Hand"
                                                   Opacity="0"
                                                   Fill="Transparent"/>
     
                                            <Border Grid.Column="1"
                                                    Grid.ColumnSpan="3"
                                                    BorderThickness="{StaticResource TimeBar_Slider_Thumbs_OuterBorderThickness}"
                                                    BorderBrush="{StaticResource TimeBar_Slider_Thumbs_OuterBorder}"
                                                    CornerRadius="{StaticResource TimeBar_Slider_Thumbs_OuterBorder_CornerRadius}">
                                                <Border BorderThickness="1"
                                                        BorderBrush="{StaticResource TimeBar_Slider_Thumbs_InnerBorder}"
                                                        Background="{StaticResource TimeBar_Slider_Thumbs_Background}"
                                                        CornerRadius="{StaticResource TimeBar_Slider_Thumbs_InnerBorder_CornerRadius}" />
                                            </Border>
     
                                            <Thumb x:Name="HorizontalRangeStartThumb"
                                               IsEnabled="{TemplateBinding IsEnabled}"
                                               Grid.Column="1"
                                               Template="{StaticResource HorizontalThumbTemplate}"
                                               Background="Transparent"
                                               Cursor="SizeWE"
                                               Visibility="{TemplateBinding ThumbVisibility}"
                                               Margin="0,2"/>
                                            <Thumb x:Name="HorizontalRangeMiddleThumb"
                                               IsEnabled="{TemplateBinding IsEnabled}"
                                               Grid.Column="2"
                                               Template="{StaticResource RangeTemplate}"
                                               Background="{StaticResource TimeBar_Slider_Range_Background}"
                                               BorderBrush="{StaticResource TimeBar_Slider_Range_Border}"
                                               Cursor="Hand"
                                               Margin="{StaticResource TimeBar_Slider_Range_Margin}"/>
                                            <Thumb x:Name="HorizontalRangeEndThumb"
                                               IsEnabled="{TemplateBinding IsEnabled}"
                                               Grid.Column="3"
                                               Template="{StaticResource HorizontalThumbTemplate}"
                                               Background="Transparent"
                                               Cursor="SizeWE"
                                               Visibility="{TemplateBinding ThumbVisibility}"
                                               Margin="0,2"/>
                                            <Rectangle x:Name="HorizontalRangeLargeIncrease" Cursor="Hand"
                                                Opacity="0" Fill="Transparent" Grid.Column="4" />
                                        </Grid>
     
                                        <!--[Horizontal] [DecreaseHandle]-->
                                        <RepeatButton x:Name="HorizontalDecreaseHandle" IsTabStop="False"
                                                IsEnabled="{TemplateBinding IsEnabled}"
                                                Delay="{TemplateBinding Delay}"
                                                Interval="{TemplateBinding RepeatInterval}" 
                                                Grid.Row="1"
                                                Visibility="{TemplateBinding HandlesVisibility}"
                                                Style="{StaticResource HandleStyle}" />
                                        <!--[Horizontal] [IncreaseHandle]-->
                                        <RepeatButton x:Name="HorizontalIncreaseHandle" IsTabStop="False"
                                                IsEnabled="{TemplateBinding IsEnabled}"
                                                Delay="{TemplateBinding Delay}"
                                                Interval="{TemplateBinding RepeatInterval}"
                                                Grid.Row="1"
                                                Grid.Column="2"
                                                Visibility="{TemplateBinding HandlesVisibility}"
                                                Style="{StaticResource HandleStyle}"
                                                RenderTransformOrigin="0.5,0.5">
                                            <RepeatButton.RenderTransform>
                                                <ScaleTransform ScaleX="-1" />
                                            </RepeatButton.RenderTransform>
                                        </RepeatButton>
                                    </Grid>
                                </Grid>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
     
     
     
            <timeBars:DateTicksConverter x:Key="dateConverter" />
            <timeBars:TimeSpanTicksConverter x:Key="timespanConverter" />
     
            <Style x:Key="RadTimeBarStyle2" TargetType="timeBar: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="timeBar:RadTimeBar">
                            <Border Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="Auto" />
                                    </Grid.RowDefinitions>
                                    <Grid Grid.Row="0">
                                        <Grid.RowDefinitions>
                                            <RowDefinition MinHeight="20" Height="Auto" />
                                            <RowDefinition Height="*" />
                                            <RowDefinition MinHeight="20" Height="Auto" />
                                        </Grid.RowDefinitions>
     
                                        <!-- No Groups -->
                                        <Border Grid.Row="0"
                                            Background="{StaticResource TimeBar_Button_Background_Disabled}"
                                            BorderThickness="0,1"
                                            BorderBrush="{StaticResource TimeBar_Button_Border_Disabled}">
                                            <Border BorderBrush="{StaticResource TimeBar_Button_InnerBorder_Disabled}"
                                                BorderThickness="1" />
                                        </Border>
                                        <!-- /No Groups -->
                                        <!-- No Items -->
                                        <Border Grid.Row="2"
                                            Background="{StaticResource TimeBar_Button_Background_Disabled}"
                                            BorderThickness="0,1"
                                            BorderBrush="{StaticResource TimeBar_Button_Border_Disabled}">
                                            <Border BorderBrush="{StaticResource TimeBar_Button_InnerBorder_Disabled}"
                                                BorderThickness="1" />
                                        </Border>
                                        <!-- /No Items -->
     
                                        <timeBars:TimeBarContentPanel Slider="{Binding ElementName=PART_Slider}" Grid.Row="1">
                                            <ContentPresenter />
                                        </timeBars:TimeBarContentPanel>
     
                                        <timeBars:ItemContainer x:Name="PART_ItemContainer" Grid.Row="1" Grid.RowSpan="2"
                                                            Selection="{Binding Path=Selection, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                                            ItemsSource="{TemplateBinding IntervalItems}"
                                                            telerikControls:StyleManager.Theme="{StaticResource Theme}">
                                            <timeBars:ItemContainer.ItemsPanel>
                                                <ItemsPanelTemplate>
                                                    <timeBars:LabelMeasurementPanel Slider="{Binding ElementName=PART_Slider}" />
                                                </ItemsPanelTemplate>
                                            </timeBars:ItemContainer.ItemsPanel>
                                            <timeBars:ItemContainer.Template>
                                                <ControlTemplate>
                                                    <ItemsPresenter />
                                                </ControlTemplate>
                                            </timeBars:ItemContainer.Template>
                                        </timeBars:ItemContainer>
     
                                        <timeBars:GroupContainer x:Name="PART_GroupContainer" Grid.Row="0" Grid.RowSpan="2"
                                                             Selection="{Binding Path=Selection, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                                             ItemsSource="{TemplateBinding IntervalGroups}"
                                                             telerikControls:StyleManager.Theme="{StaticResource Theme}">
                                            <timeBars:GroupContainer.ItemsPanel>
                                                <ItemsPanelTemplate>
                                                    <timeBars:LabelMeasurementPanel Slider="{Binding ElementName=PART_Slider}" />
                                                </ItemsPanelTemplate>
                                            </timeBars:GroupContainer.ItemsPanel>
                                            <timeBars:GroupContainer.Template>
                                                <ControlTemplate>
                                                    <ItemsPresenter />
                                                </ControlTemplate>
                                            </timeBars:GroupContainer.Template>
                                        </timeBars:GroupContainer>
     
                                        <timeBars:TimeBarStackPanel Slider="{Binding ElementName=PART_Slider}" Grid.Row="1">
                                            <timeBars:ShadeControl StartDate="{TemplateBinding PeriodStart}"
                                                               EndDate="{Binding ElementName=PART_SelectionThumb, Path=StartDate}"
                                                               telerikControls:StyleManager.Theme="{StaticResource Theme}" />
                                            <timeBars:SelectionThumb x:Name="PART_SelectionThumb"
                                                                 Canvas.ZIndex="2"
                                                                 PeriodStart="{TemplateBinding PeriodStart}"
                                                                 PeriodEnd="{TemplateBinding PeriodEnd}"
                                                                 VisiblePeriodStart="{Binding Path=ActualVisiblePeriodStart, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                                                 VisiblePeriodEnd="{Binding Path=ActualVisiblePeriodEnd, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                                                 IsSnapToIntervalEnabled="{TemplateBinding IsSnapToIntervalEnabled}"
                                                                 IntervalGroups="{TemplateBinding IntervalGroups}"
                                                                 IntervalItems="{TemplateBinding IntervalItems}"
                                                                 MinSelectionRange="{TemplateBinding MinSelectionRange}"
                                                                 MaxSelectionRange="{TemplateBinding MaxSelectionRange}"
                                                                 Selection="{Binding Path=Selection, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                                                 SelectionPreviewControl="{Binding ElementName=PART_SelectionThumbPreview}"
                                                                 telerikControls:StyleManager.Theme="{StaticResource Theme}" />
                                            <timeBars:ShadeControl StartDate="{Binding ElementName=PART_SelectionThumb, Path=EndDate}"
                                                               EndDate="{TemplateBinding PeriodEnd}"
                                                               telerikControls:StyleManager.Theme="{StaticResource Theme}"/>
                                        </timeBars:TimeBarStackPanel>
                                        <timeBars:TimeBarPanel Slider="{Binding ElementName=PART_Slider}" Grid.Row="1">
                                            <timeBars:SelectionThumbPreview x:Name="PART_SelectionThumbPreview"
                                                                        telerikControls:StyleManager.Theme="{StaticResource Theme}" />
                                        </timeBars:TimeBarPanel>
                                    </Grid>
                                    <telerikControls:RadSlider x:Name="PART_Slider" Grid.Row="1"
                                                           Style="{StaticResource CustomSlider}"
                                                           IsSelectionRangeEnabled="True" IsMouseWheelEnabled="False" StepAction="MoveRange"
                                                           Minimum="{Binding Path=PeriodStart, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource dateConverter}}"
                                                           Maximum="{Binding Path=PeriodEnd, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource dateConverter}}"
                                                            
                                                           SelectionStart="{Binding Path=ActualVisiblePeriodStart, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay, Converter={StaticResource dateConverter}}"
                                                           SelectionEnd="{Binding Path=ActualVisiblePeriodEnd, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay, Converter={StaticResource dateConverter}}"
                                                           SmallChange="{Binding Path=SmallChange, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource timespanConverter}}"
                                                           LargeChange="{Binding Path=LargeChange, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource timespanConverter}}" />
                                </Grid>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
     
            <Style TargetType="timeBars:ItemControl"
             >
                <Setter Property="BorderBrush" Value="{StaticResource TimeBar_Item_Border}" />
                <Setter Property="Background" Value="{StaticResource TimeBar_Item_Background}" />
                <Setter Property="BorderThickness" Value="1,0,0,0" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="timeBars:ItemControl">
                            <Grid>
     
                                <vsm:VisualStateManager.VisualStateGroups>
                                    <vsm:VisualStateGroup x:Name="CommonStates">
                                        <vsm:VisualState x:Name="Normal" />
                                        <vsm:VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="border" Storyboard.TargetProperty="Background" Duration="0.00:00:00.05">
                                                    <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0" Value="{StaticResource TimeBar_Item_Background_MouseOver}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="button" Storyboard.TargetProperty="Background" Duration="0.00:00:00.05">
                                                    <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0" Value="{StaticResource TimeBar_Button_Background_MouseOver}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="button" Storyboard.TargetProperty="BorderBrush" Duration="0.00:00:00.05">
                                                    <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0" Value="{StaticResource TimeBar_Button_Border_MouseOver}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="button" Storyboard.TargetProperty="(FrameworkElement.Cursor)" Duration="0.00:00:00.05">
                                                    <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Cursor>Hand</Cursor>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </vsm:VisualState>
                                        <vsm:VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="border" Storyboard.TargetProperty="Background" Duration="0.00:00:00.05">
                                                    <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0" Value="{StaticResource TimeBar_Item_Background_MouseOver}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="button" Storyboard.TargetProperty="Background" Duration="0.00:00:00.05">
                                                    <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0" Value="{StaticResource TimeBar_Button_Background_MouseOver}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="button" Storyboard.TargetProperty="BorderBrush" Duration="0.00:00:00.05">
                                                    <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0" Value="{StaticResource TimeBar_Button_Border_MouseOver}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </vsm:VisualState>
                                    </vsm:VisualStateGroup>
                                </vsm:VisualStateManager.VisualStateGroups>
     
                                <Border x:Name="border" Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}" />
                                <Border x:Name="button"
                                    MinHeight="20"
                                    VerticalAlignment="Bottom"
                                    BorderThickness="1,1,0,1"
                                    BorderBrush="{StaticResource TimeBar_Button_Border}"
                                    Background="{StaticResource TimeBar_Button_Background}">
                                    <Border BorderBrush="{StaticResource TimeBar_Button_InnerBorder}"
                                        BorderThickness="1">
                                        <TextBlock Text="{Binding Label}" Width="Auto" HorizontalAlignment="Center" VerticalAlignment="Center" Padding="2,0" FontSize="10" />
                                    </Border>
                                </Border>
                            </Grid>
     
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
     
            <Style TargetType="timeBars:GroupControl"
             >
                <Setter Property="BorderBrush" Value="{StaticResource TimeBar_Group_Border}" />
                <Setter Property="Background" Value="{StaticResource TimeBar_Group_Background}" />
                <Setter Property="BorderThickness" Value="1,0,0,0" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="timeBars:GroupControl">
                            <Grid>
     
                                <vsm:VisualStateManager.VisualStateGroups>
                                    <vsm:VisualStateGroup x:Name="CommonStates">
                                        <vsm:VisualState x:Name="Normal" />
                                        <vsm:VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="border" Storyboard.TargetProperty="Background" Duration="0.00:00:00.05">
                                                    <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0" Value="{StaticResource TimeBar_Item_Background_MouseOver}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="button" Storyboard.TargetProperty="Background" Duration="0.00:00:00.05">
                                                    <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0" Value="{StaticResource TimeBar_Button_Background_MouseOver}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="button" Storyboard.TargetProperty="BorderBrush" Duration="0.00:00:00.05">
                                                    <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0" Value="{StaticResource TimeBar_Button_Border_MouseOver}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="button" Storyboard.TargetProperty="(FrameworkElement.Cursor)" Duration="0.00:00:00.05">
                                                    <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Cursor>Hand</Cursor>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </vsm:VisualState>
                                        <vsm:VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="border" Storyboard.TargetProperty="Background" Duration="0.00:00:00.05">
                                                    <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0" Value="{StaticResource TimeBar_Item_Background_MouseOver}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="button" Storyboard.TargetProperty="Background" Duration="0.00:00:00.05">
                                                    <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0" Value="{StaticResource TimeBar_Button_Background_MouseOver}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="button" Storyboard.TargetProperty="BorderBrush" Duration="0.00:00:00.05">
                                                    <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0" Value="{StaticResource TimeBar_Button_Border_MouseOver}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </vsm:VisualState>
                                    </vsm:VisualStateGroup>
                                </vsm:VisualStateManager.VisualStateGroups>
     
                                <Border x:Name="border"
                                    Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    IsHitTestVisible="False" />
                                <Border x:Name="button"
                                    MinHeight="20"
                                    VerticalAlignment="Top"
                                    BorderThickness="1,1,0,1"
                                    BorderBrush="{StaticResource TimeBar_Button_Border}"
                                    Background="{StaticResource TimeBar_Button_Background}" >
                                    <Border BorderBrush="{StaticResource TimeBar_Button_InnerBorder}"
                                        BorderThickness="1">
                                        <TextBlock Text="{Binding Label}" Width="Auto" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                    </Border>
                                </Border>
                            </Grid>
     
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
     
            <Style x:Key="SelectionThumbHandleStyle" TargetType="Thumb">
                <Setter Property="BorderBrush" Value="{StaticResource TimeBar_SelectionThumb_Thumbs_OuterBorder}" />
                <Setter Property="BorderThickness" Value="1" />
                <Setter Property="Background" Value="{StaticResource TimeBar_SelectionThumb_Thumbs_Background}" />
                <Setter Property="Foreground" Value="{StaticResource TimeBar_SelectionThumb_Thumbs_Foreground}" />
                <Setter Property="IsTabStop" Value="False"/>
                <Setter Property="Cursor" Value="SizeWE" />
                <Setter Property="Width" Value="9" />
                <Setter Property="Height" Value="20" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Thumb">
                            <Grid>
     
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Background" Duration="0.00:00:00.05">
                                                    <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0" Value="{StaticResource TimeBar_SelectionThumb_Thumbs_Background_MouseOver}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="BorderBrush" Duration="0.00:00:00.05">
                                                    <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0" Value="{StaticResource TimeBar_SelectionThumb_Thumbs_InnerBorder_MouseOver}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
     
                                <Border BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    Background="{StaticResource TimeBar_SelectionThumb_Thumbs_OuterBackground}">
                                    <Border x:Name="BackgroundAnimation"
                                        BorderBrush="{StaticResource TimeBar_SelectionThumb_Thumbs_InnerBorder}"
                                        BorderThickness="{StaticResource TimeBar_SelectionThumb_Thumbs_InnerBorder_BorderThickness}"
                                        Background="{TemplateBinding Background}" />
                                </Border>
                                <Path Fill="{TemplateBinding Foreground}" 
                                          Data="M303.16666,176.83339 L307.16632,179.60629 L303.17068,182.37486 L303.17087,180.79317 L304.96475,179.61093 L303.16638,178.40005 z"
                                          HorizontalAlignment="Center"
                                          Stretch="Fill"
                                          Margin="3,6"
                                           />
                            </Grid>
     
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
     
            <Style x:Key="SelectionThumbHandleStyle_Flipped" BasedOn="{StaticResource SelectionThumbHandleStyle}" TargetType="Thumb">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Thumb">
                            <Grid>
     
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Background" Duration="0.00:00:00.05">
                                                    <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0" Value="{StaticResource TimeBar_SelectionThumb_Thumbs_Background_MouseOver}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="BorderBrush" Duration="0.00:00:00.05">
                                                    <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0" Value="{StaticResource TimeBar_SelectionThumb_Thumbs_InnerBorder_MouseOver}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
     
                                <Border BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    Background="{StaticResource TimeBar_SelectionThumb_Thumbs_OuterBackground}">
                                    <Border x:Name="BackgroundAnimation"
                                        BorderBrush="{StaticResource TimeBar_SelectionThumb_Thumbs_InnerBorder}"
                                        BorderThickness="{StaticResource TimeBar_SelectionThumb_Thumbs_InnerBorder_BorderThickness}"
                                        Background="{TemplateBinding Background}" />
                                </Border>
                                <Path Fill="{TemplateBinding Foreground}" 
                                          Data="M303.16666,176.83339 L307.16632,179.60629 L303.17068,182.37486 L303.17087,180.79317 L304.96475,179.61093 L303.16638,178.40005 z"
                                          HorizontalAlignment="Center"
                                          Stretch="Fill"
                                          Margin="3,6"
                                          RenderTransformOrigin="0.5,0.5"
                                           >
                                    <Path.RenderTransform>
                                        <ScaleTransform ScaleX="-1" />
                                    </Path.RenderTransform>
                                </Path>
                            </Grid>
     
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
     
            <Style x:Key="SelectionRangeStyle" TargetType="Thumb">
                <Setter Property="BorderBrush" Value="{StaticResource TimeBar_SelectionThumb_Range_OuterBorder}" />
                <Setter Property="BorderThickness" Value="{StaticResource TimeBar_SelectionThumb_Range_OuterBorder_BorderThickness}" />
                <Setter Property="Background" Value="#01FFFFFF" />
                <Setter Property="IsTabStop" Value="False"/>
                <Setter Property="Margin" Value="4,0" />
                <Setter Property="Cursor" Value="Hand" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Thumb">
                            <Grid>
     
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Background" Duration="0.00:00:00.05">
                                                    <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0" Value="{StaticResource TimeBar_SelectionThumb_Range_Background_MouseOver}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
     
                                <Border BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}">
                                    <Border BorderBrush="{StaticResource TimeBar_SelectionThumb_Range_Border}"
                                        BorderThickness="{StaticResource TimeBar_SelectionThumb_Range_Border_BorderThickness}">
                                        <Border x:Name="BackgroundAnimation"
                                            BorderBrush="{StaticResource TimeBar_SelectionThumb_Range_InnerBorder}"
                                            BorderThickness="{StaticResource TimeBar_SelectionThumb_Range_InnerBorder_BorderThickness}"
                                            Background="{TemplateBinding Background}" />
                                    </Border>
                                </Border>
                            </Grid>
     
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
     
            <Style TargetType="timeBars:SelectionThumb"
             >
                <Setter Property="Margin" Value="-4,0,-5,0"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="timeBars:SelectionThumb">
                            <Border Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}">
                                <Grid>
                                    <Thumb Name="PART_CenterHandle"
                                       Style="{StaticResource SelectionRangeStyle}" />
                                    <Thumb Name="PART_LeftHandle"
                                       HorizontalAlignment="Left"
                                       Style="{StaticResource SelectionThumbHandleStyle_Flipped}" />
                                    <Thumb Name="PART_RightHandle"
                                       HorizontalAlignment="Right"
                                       Style="{StaticResource SelectionThumbHandleStyle}" />
                                </Grid>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
     
            <Style TargetType="timeBars:ShadeControl"
             >
                <Setter Property="IsHitTestVisible" Value="False" />
                <Setter Property="Background" Value="{StaticResource TimeBar_SelectionThumb_OutBackground}" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="timeBars:ShadeControl">
                            <Border Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}">
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
     
            <Style TargetType="timeBars:SelectionIndicator"
             >
                <Setter Property="Background" Value="{StaticResource TimeBar_SelectionIndicator_Background}" />
                <Setter Property="BorderBrush" Value="{StaticResource TimeBar_SelectionIndicator_Border}" />
                <Setter Property="Padding" Value="{StaticResource TimeBar_SelectionIndicator_Padding}" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="timeBars:SelectionIndicator">
                            <Border Background="{TemplateBinding Background}"
                                BorderThickness="1"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                Margin="{TemplateBinding Padding}"
                                CornerRadius="{StaticResource TimeBar_SelectionIndicator_Radius}">
                                <Border BorderBrush="{StaticResource TimeBar_SelectionIndicator_InnerBorder}"
                                    BorderThickness="0,0,0,1" />
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
     
            <Style TargetType="timeBars:SelectionThumbPreview"
             >
                <Setter Property="BorderBrush" Value="{StaticResource TimeBar_SelectionThumbPreview_Background}" />
                <Setter Property="BorderThickness" Value="1" />
                <Setter Property="Visibility" Value="Collapsed" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="timeBars:SelectionThumbPreview">
                            <Grid>
                                <Border Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}" />
                                <Path Data="M0,0 L10,10 L0,10 z"
                                  Width="10"
                                  Height="10"
                                  Fill="{TemplateBinding BorderBrush}"
                                  HorizontalAlignment="Left"
                                  VerticalAlignment="Bottom"
                                  Stretch="Fill"/>
                                <Path Data="M10,0 L10,10 L0,10 z"
                                  Width="10"
                                  Height="10"
                                  Fill="{TemplateBinding BorderBrush}"
                                  HorizontalAlignment="Right"
                                  VerticalAlignment="Bottom"
                                  Stretch="Fill"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </UserControl.Resources>
        <UserControl.DataContext>
            <vm:ExampleViewModel />
        </UserControl.DataContext>
     
        <Grid x:Name="LayoutRoot" Background="White">
     
            <telerik:RadTimeBar x:Name="NotesHistoryRtb" Height="75" VerticalAlignment="Top" Margin="6"
                                PeriodStart="1-Jan-2010" PeriodEnd="1-Jan-2012"
                                VisiblePeriodStart="11-Nov-2010" VisiblePeriodEnd="15-Mar-2011"
                                SelectionStart="1-Jan-2011" SelectionEnd="1-Mar-2011" Resources="{StaticResource RadTimeBarStyle2}">
                <telerik:RadTimeBar.Intervals>
                    <telerik:YearInterval />
                    <telerik:MonthInterval />
                    <telerik:WeekInterval />
                    <telerik:DayInterval />
                </telerik:RadTimeBar.Intervals>
     
                <telerik:RadColumnSparkline ItemsSource="{Binding Data}" XValuePath="Item1" YValuePath="Item2" />
            </telerik:RadTimeBar>
        </Grid>
    </UserControl>




    Attached the Screen shot too

    Thanks
    B.Balaji
  5. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 06 Jan 2012 Link to this post

    Hi Balaji,
    Unfortunately, I suppose this could be a result of the missing MinimumRangeSpan constraint. We enforce this constraint because of a limitation in Silverlight framework as already discussed in this forum thread.

    I suppose the best way to proceed, would be to set such a constraint, so that you can reach the zoom-in level that you need without hitting the problem. Since the built-in solution does not work for you, you should make some tests to find the value that best fits your needs.

    Kind regards,
    Tsvetie
    the Telerik team

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

Back to Top