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

AnimationException when mouse over the RadTimeBar

9 Answers 167 Views
TimeBar
This is a migrated thread and some comments may be shown as answers.
Adi Constantin
Top achievements
Rank 2
Adi Constantin asked on 10 Apr 2012, 12:37 PM
Hi!

Please advice me on what I'm doing wrong, when using RadTimeBar.
When my cursor reaches over the TimeBar, I get the AnimationException:
Cannot animate the 'Cursor' property on a 'System.Windows.Controls.Border' using a 'System.Windows.Media.Animation.ObjectAnimationUsingKeyFrames'. For details see the inner exception.
The XAML code:
<telerik:RadTimeBar Height="130" Name="RadTimeBar1"
                                PeriodEnd="04/10/2014 00:00:00"
                                PeriodStart="03/31/2012 00:00:00"
                                SelectionEnd="04/06/2012 00:00:00"
                                SelectionStart="04/05/2012 00:00:00"
                                Width="Auto" Cursor="Hand" Content="From here you can chose the interval the below data will be shown" IsManipulationEnabled="True" UseLayoutRounding="True">
                <telerik:RadTimeBar.Intervals>
                    <telerik:YearInterval />
                    <telerik:MonthInterval />
                    <telerik:WeekInterval />
                    <telerik:DayInterval />
                </telerik:RadTimeBar.Intervals>
            </telerik:RadTimeBar>

9 Answers, 1 is accepted

Sort by
0
Tsvetie
Telerik team
answered on 12 Apr 2012, 11:52 AM
Hi Adi Constantin,

I tested your code with the latest version of RadTimeline for WPF - 2012.1 326, but I was not able to reproduce the problem that you report. Could you please open an official support ticket and send us a simple running project, demonstrating this problem?

Kind regards,
Tsvetie
the Telerik team

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

0
Muhammad
Top achievements
Rank 1
answered on 13 Dec 2016, 04:50 PM
I am having the same problem right now, did you find any solution?
0
Evgenia
Telerik team
answered on 16 Dec 2016, 11:27 AM
Hello Adrian,

We are unable to reproduce the pointed problem locally. Can you specify where exactly do you hover over the TimeBar control that triggers the animation error? Is there something special you are doing like applying custom styles for example? It would be best if you could send us a sample runnable project which we can use to reproduce the issue.

Regards,
Evgenia
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Muhammad
Top achievements
Rank 1
answered on 18 Dec 2016, 10:32 AM

Hello Evgenia,

To reproduce this problem, you need to add the following three references from version 2011.1.405.40

1. Telerik.Windows.Controls 

2. Telerik.Windows.Controls.DataVisualization

3. Telerik.Windows.Data

 

I have asked the same question here. Also download the Sample Project through which you will be able to reproduce the problem. 

I hope that you find the solution to this problem as I have license for this version only and I cannot update it as there a lot of things which are deprecated in the newer versions. 

0
Evgenia
Telerik team
answered on 21 Dec 2016, 01:17 PM
Hi Muhammad,

I was able to reproduce the problem locally with your sample project. The exception is very clear though -- you can't animate the Cursor property of MS native Border element with ObjectAnimationUsingKeyFrames animation. As my colleague Tsvetie stated in this forum post we were unable to reproduce the issue with later assemblies than the one you are using. I tested it with latest asemblies as of Q3 2016 as well and I can ensure you that everything works as expected. I even tried looking for animations that manipulate Cursor but was unable to find such with our latest version of the RadTimeBar control.

So to overcome the issue you'll have to manually resolve it. For the purpose you might try to extract the default Style of the RadTimeBar control and search for ObjectAnimationUsingKeyFrames that has TargetProperty Cursor and simply comment or delete it. When you are sure that this is the exact animation that throws the exception you might try fixing it like this for example:

<ObjectAnimationUsingKeyFrames  Storyboard.TargetProperty="(FrameworkElement.Cursor)">
                      <DiscreteObjectKeyFrame KeyTime="00:00:00">
                          <DiscreteObjectKeyFrame.Value>
                              <Cursor>Hand</Cursor>
                          </DiscreteObjectKeyFrame.Value>
                          </DiscreteObjectKeyFrame>
                      </ObjectAnimationUsingKeyFrames>

Since the Border element inherits FrameworkElement this will work whenever the cursor is over the Border.

Regards,
Evgenia
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Muhammad
Top achievements
Rank 1
answered on 21 Dec 2016, 03:51 PM

Hi Evgenia,

Glad that you find the solution. I tried that before as well. However, i am unable to get the default style of RadTimeBar. I am getting the default template only through Visual Studio and Expression Blend. Interestingly, the exception went away by overriding the template but there is nothing displayed on the control (no digits, no text, nothing).

Please provide the actual default style or else attach a sample project so that everything gets clear. 

Thanks!

0
Evgenia
Telerik team
answered on 23 Dec 2016, 04:05 PM
Hi Muhammad,

    Unfortunately it seems to me that trying to extract the default style you hit a known Microsoft's issue with ItemsControl.ItemsSource property getting lost as mentioned in this public forum. Basically, when generating the template with Expression Blend it misses to bind the ItemsSource properties for the groups and items. Can you try adding the ItemsSource manually in your extracted style and check whether this makes the Items and Groups Visible the way I demonstrated below:

<timeBars:GroupContainer x:Name="PART_GroupContainer"
                             Grid.Row="1"
                             Selection="{Binding Path=Selection, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                             ItemsSource="{TemplateBinding IntervalGroups}"
                             ItemHeaderStyle="{TemplateBinding GroupPeriodHeaderStyle}">

<timeBars:ItemContainer x:Name="PART_ItemContainer"
                                 Grid.Row="0"
                                 Grid.RowSpan="3"
                                 Selection="{Binding Path=Selection, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                 ItemsSource="{TemplateBinding IntervalItems}"
                                 ItemHeaderStyle="{TemplateBinding PeriodHeaderStyle}">

Also to avoid the initial exception with the mouse cursor please don't forget my initial suggestion -- to either comment / remove the ObjectAnimationUsingKeyFrames  or to substitute it with the one I provided in my previous reply.

Regards,
Evgenia
Telerik by Progress
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
0
Muhammad
Top achievements
Rank 1
answered on 24 Dec 2016, 10:02 AM

Hi Evgenia,

Honestly, my expertise are not sufficient enough in control styling domain. I tried but I am confused where to add this ItemsControl.ItemsSource property. As I have requested before, kindly attach a full working project or else provide the complete style. 
Please see the style that I extracted below:

<Style x:Key="RadTimeBarStyle1" TargetType="{x:Type telerik:RadTimeBar}">
            <Setter Property="Foreground" Value="#FF444444"/>
            <Setter Property="Background" Value="White"/>
            <Setter Property="BorderThickness" Value="1,0,1,1"/>
            <Setter Property="BorderBrush" Value="#FF848484"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type 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="#FFCACACA" BorderThickness="0,1" Grid.Row="0">
                                        <Border.Background>
                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                <GradientStop Color="White" Offset="1"/>
                                                <GradientStop Color="#FFF0F0F0"/>
                                            </LinearGradientBrush>
                                        </Border.Background>
                                        <Border BorderBrush="White" BorderThickness="1"/>
                                    </Border>
                                    <Border BorderBrush="#FFCACACA" BorderThickness="0,1" Grid.Row="2">
                                        <Border.Background>
                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                <GradientStop Color="White" Offset="1"/>
                                                <GradientStop Color="#FFF0F0F0"/>
                                            </LinearGradientBrush>
                                        </Border.Background>
                                        <Border BorderBrush="White" BorderThickness="1"/>
                                    </Border>
                                    <telerik:TimeBarContentPanel Grid.Row="1" Slider="{Binding ElementName=PART_Slider}">
                                        <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}"/>
                                    </telerik:TimeBarContentPanel>
                                    <telerik:ItemContainer x:Name="PART_SecondLevelStrip" Grid.Row="1" Grid.RowSpan="2" Selection="{Binding Selection, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
                                        <telerik:ItemContainer.ItemsPanel>
                                            <ItemsPanelTemplate>
                                                <telerik:LabelMeasurementPanel IsItemsHost="True" PeriodStart="" PeriodEnd="" Slider="{Binding ElementName=PART_Slider}" VisiblePeriodStart="" VisiblePeriodEnd=""/>
                                            </ItemsPanelTemplate>
                                        </telerik:ItemContainer.ItemsPanel>
                                        <telerik:StyleManager.Theme>
                                            <telerik:Office_BlackTheme/>
                                        </telerik:StyleManager.Theme>
                                        <telerik:ItemContainer.Template>
                                            <ControlTemplate>
                                                <ItemsPresenter/>
                                            </ControlTemplate>
                                        </telerik:ItemContainer.Template>
                                    </telerik:ItemContainer>
                                    <telerik:GroupContainer x:Name="PART_FirstLevelStrip" Grid.Row="0" Grid.RowSpan="2" Selection="{Binding Selection, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
                                        <telerik:GroupContainer.ItemsPanel>
                                            <ItemsPanelTemplate>
                                                <telerik:LabelMeasurementPanel IsItemsHost="True" PeriodStart="" PeriodEnd="" Slider="{Binding ElementName=PART_Slider}" VisiblePeriodStart="" VisiblePeriodEnd=""/>
                                            </ItemsPanelTemplate>
                                        </telerik:GroupContainer.ItemsPanel>
                                        <telerik:StyleManager.Theme>
                                            <telerik:Office_BlackTheme/>
                                        </telerik:StyleManager.Theme>
                                        <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:SelectionThumb x:Name="PART_SelectionThumb" GroupLevelItems="{TemplateBinding FirstLevelItems}" ItemLevelItems="{TemplateBinding SecondLevelItems}" IsSnapToIntervalEnabled="{TemplateBinding IsSnapToIntervalEnabled}" PeriodStart="{TemplateBinding PeriodStart}" PeriodEnd="{TemplateBinding PeriodEnd}" SelectionPreviewControl="{Binding ElementName=PART_SelectionThumbPreview}" Selection="{Binding Selection, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Panel.ZIndex="2">
                                            <telerik:StyleManager.Theme>
                                                <telerik:Office_BlackTheme/>
                                            </telerik:StyleManager.Theme>
                                        </telerik:SelectionThumb>
                                        <telerik:ShadeControl EndDate="{TemplateBinding PeriodEnd}" StartDate="{Binding EndDate, ElementName=PART_SelectionThumb}"/>
                                    </telerik:TimeBarStackPanel>
                                    <telerik:TimeBarPanel Grid.Row="1" Slider="{Binding ElementName=PART_Slider}">
                                        <telerik:SelectionThumbPreview x:Name="PART_SelectionThumbPreview">
                                            <telerik:StyleManager.Theme>
                                                <telerik:Office_BlackTheme/>
                                            </telerik:StyleManager.Theme>
                                        </telerik:SelectionThumbPreview>
                                    </telerik:TimeBarPanel>
                                </Grid>
                                <telerik:RadSlider x:Name="PART_Slider" IsSelectionRangeEnabled="True" IsMouseWheelEnabled="False" Grid.Row="1" StepAction="MoveRange">
                                    <telerik:RadSlider.LargeChange>
                                        <Binding Path="LargeChange" RelativeSource="{RelativeSource TemplatedParent}">
                                            <Binding.Converter>
                                                <telerik:TimeSpanTicksConverter/>
                                            </Binding.Converter>
                                        </Binding>
                                    </telerik:RadSlider.LargeChange>
                                    <telerik:RadSlider.Maximum>
                                        <Binding Path="PeriodEnd" RelativeSource="{RelativeSource TemplatedParent}">
                                            <Binding.Converter>
                                                <telerik:DateTicksConverter/>
                                            </Binding.Converter>
                                        </Binding>
                                    </telerik:RadSlider.Maximum>
                                    <telerik:RadSlider.MinimumRangeSpan>
                                        <Binding Path="MinZoomRange" RelativeSource="{RelativeSource TemplatedParent}">
                                            <Binding.Converter>
                                                <telerik:TimeSpanTicksConverter/>
                                            </Binding.Converter>
                                        </Binding>
                                    </telerik:RadSlider.MinimumRangeSpan>
                                    <telerik:RadSlider.Minimum>
                                        <Binding Path="PeriodStart" RelativeSource="{RelativeSource TemplatedParent}">
                                            <Binding.Converter>
                                                <telerik:DateTicksConverter/>
                                            </Binding.Converter>
                                        </Binding>
                                    </telerik:RadSlider.Minimum>
                                    <telerik:RadSlider.SelectionStart>
                                        <Binding Mode="TwoWay" Path="VisiblePeriodStart" RelativeSource="{RelativeSource TemplatedParent}">
                                            <Binding.Converter>
                                                <telerik:DateTicksConverter/>
                                            </Binding.Converter>
                                        </Binding>
                                    </telerik:RadSlider.SelectionStart>
                                    <telerik:RadSlider.Style>
                                        <Style TargetType="{x:Type 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">
                                                <Setter.Value>
                                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                        <GradientStop Color="#FFF0F0F0" Offset="0.257"/>
                                                        <GradientStop Color="#FFBFBFBF" Offset="0"/>
                                                    </LinearGradientBrush>
                                                </Setter.Value>
                                            </Setter>
                                            <Setter Property="BorderBrush" Value="Transparent"/>
                                            <Setter Property="BorderThickness" Value="0"/>
                                            <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="{x:Type 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"/>
                                                                        <RowDefinition Height="Auto"/>
                                                                        <RowDefinition Height="Auto"/>
                                                                    </Grid.RowDefinitions>
                                                                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="3" CornerRadius="0" 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>
                                                                                <telerik:Office_BlackTheme/>
                                                                            </telerik:StyleManager.Theme>
                                                                        </telerik:SelectionIndicator>
                                                                    </telerik:TimeBarNonScrollingPanel>
                                                                    <Grid x:Name="HorizontalRangeTemplate" Grid.Column="1" Grid.Row="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" Fill="Transparent" Opacity="0"/>
                                                                        <Border BorderBrush="#FF848484" BorderThickness="1" Grid.ColumnSpan="3" Grid.Column="1" CornerRadius="0">
                                                                            <Border BorderBrush="White" BorderThickness="1" CornerRadius="0">
                                                                                <Border.Background>
                                                                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                                        <GradientStop Color="White"/>
                                                                                        <GradientStop Color="#FFD4D4D4" Offset="1"/>
                                                                                        <GradientStop Color="Gainsboro" Offset="0.42"/>
                                                                                        <GradientStop Color="#FFADADAD" Offset="0.43"/>
                                                                                    </LinearGradientBrush>
                                                                                </Border.Background>
                                                                            </Border>
                                                                        </Border>
                                                                        <Thumb x:Name="HorizontalRangeStartThumb" Background="Transparent" Cursor="SizeWE" Grid.Column="1" IsEnabled="{TemplateBinding IsEnabled}" Margin="0,2" Visibility="{TemplateBinding ThumbVisibility}">
                                                                            <Thumb.Template>
                                                                                <ControlTemplate TargetType="{x:Type Thumb}">
                                                                                    <Grid Background="{TemplateBinding Background}" Margin="{TemplateBinding Margin}" VerticalAlignment="Stretch">
                                                                                        <Grid Height="9" Margin="3,0" VerticalAlignment="Center">
                                                                                            <Path x:Name="Path" Data="M4,0L5,0 5,9 4,9z M2,0L3,0 3,9 2,9z M0,0L1,0 1,9 0,9z" RenderOptions.EdgeMode="Aliased" Fill="Black" HorizontalAlignment="Stretch" SnapsToDevicePixels="True" Width="5"/>
                                                                                            <Path Data="M4,0L5,0 5,9 4,9z M2,0L3,0 3,9 2,9z M0,0L1,0 1,9 0,9z" RenderOptions.EdgeMode="Aliased" Fill="White" Margin="2,0,0,0" SnapsToDevicePixels="True" Width="5"/>
                                                                                        </Grid>
                                                                                    </Grid>
                                                                                </ControlTemplate>
                                                                            </Thumb.Template>
                                                                        </Thumb>
                                                                        <Thumb x:Name="HorizontalRangeMiddleThumb" Cursor="Hand" Grid.Column="2" IsEnabled="{TemplateBinding IsEnabled}" Margin="0,2">
                                                                            <Thumb.BorderBrush>
                                                                                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                                                                    <GradientStop Color="Black" Offset="0"/>
                                                                                    <GradientStop Color="Gray" Offset="1"/>
                                                                                </LinearGradientBrush>
                                                                            </Thumb.BorderBrush>
                                                                            <Thumb.Background>
                                                                                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                                                                    <GradientStop Color="#FFFFBE32"/>
                                                                                    <GradientStop Color="White" Offset="1"/>
                                                                                </LinearGradientBrush>
                                                                            </Thumb.Background>
                                                                            <Thumb.Template>
                                                                                <ControlTemplate TargetType="{x:Type Thumb}">
                                                                                    <Grid>
                                                                                        <Border x:Name="border" BorderThickness="1" CornerRadius="0" Margin="{TemplateBinding Margin}" VerticalAlignment="Stretch">
                                                                                            <Border.BorderBrush>
                                                                                                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                                                                                    <GradientStop Color="Black" Offset="0"/>
                                                                                                    <GradientStop Color="Gray" Offset="1"/>
                                                                                                </LinearGradientBrush>
                                                                                            </Border.BorderBrush>
                                                                                            <Border.Background>
                                                                                                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                                                                                    <GradientStop Color="#FFFFBE32"/>
                                                                                                    <GradientStop Color="White" Offset="1"/>
                                                                                                </LinearGradientBrush>
                                                                                            </Border.Background>
                                                                                        </Border>
                                                                                    </Grid>
                                                                                    <ControlTemplate.Triggers>
                                                                                        <EventTrigger RoutedEvent="Thumb.DragStarted"/>
                                                                                    </ControlTemplate.Triggers>
                                                                                </ControlTemplate>
                                                                            </Thumb.Template>
                                                                        </Thumb>
                                                                        <Thumb x:Name="HorizontalRangeEndThumb" Background="Transparent" Cursor="SizeWE" Grid.Column="3" IsEnabled="{TemplateBinding IsEnabled}" Margin="0,2" Visibility="{TemplateBinding ThumbVisibility}">
                                                                            <Thumb.Template>
                                                                                <ControlTemplate TargetType="{x:Type Thumb}">
                                                                                    <Grid Background="{TemplateBinding Background}" Margin="{TemplateBinding Margin}" VerticalAlignment="Stretch">
                                                                                        <Grid Height="9" Margin="3,0" VerticalAlignment="Center">
                                                                                            <Path x:Name="Path" Data="M4,0L5,0 5,9 4,9z M2,0L3,0 3,9 2,9z M0,0L1,0 1,9 0,9z" RenderOptions.EdgeMode="Aliased" Fill="Black" HorizontalAlignment="Stretch" SnapsToDevicePixels="True" Width="5"/>
                                                                                            <Path Data="M4,0L5,0 5,9 4,9z M2,0L3,0 3,9 2,9z M0,0L1,0 1,9 0,9z" RenderOptions.EdgeMode="Aliased" Fill="White" Margin="2,0,0,0" SnapsToDevicePixels="True" Width="5"/>
                                                                                        </Grid>
                                                                                    </Grid>
                                                                                </ControlTemplate>
                                                                            </Thumb.Template>
                                                                        </Thumb>
                                                                        <Rectangle x:Name="HorizontalRangeLargeIncrease" Cursor="Hand" Grid.Column="4" Fill="Transparent" Opacity="0"/>
                                                                    </Grid>
                                                                    <RepeatButton x:Name="HorizontalDecreaseHandle" Delay="{TemplateBinding Delay}" IsTabStop="False" IsEnabled="{TemplateBinding IsEnabled}" Interval="{TemplateBinding RepeatInterval}" Grid.Row="1" Visibility="{TemplateBinding HandlesVisibility}">
                                                                        <RepeatButton.Style>
                                                                            <Style TargetType="{x:Type RepeatButton}">
                                                                                <Setter Property="Cursor" Value="Hand"/>
                                                                                <Setter Property="Width" Value="17"/>
                                                                                <Setter Property="VerticalAlignment" Value="Stretch"/>
                                                                                <Setter Property="Template">
                                                                                    <Setter.Value>
                                                                                        <ControlTemplate TargetType="{x:Type RepeatButton}">
                                                                                            <Grid x:Name="Root">
                                                                                                <Border x:Name="OuterBorder" CornerRadius="1">
                                                                                                    <Border x:Name="InnerBorder" Background="#01FFFFFF" CornerRadius="0">
                                                                                                        <Path x:Name="Path" Data="M6,0L8,0 8,14 6,14 6,12 4,12 4,10 2,10 2,8 0,8 0,6 2,6 2,4 4,4 4,2 6,2z" Fill="Black" HorizontalAlignment="Center" Height="7" Margin="-2,0,0,0" Stretch="Fill" VerticalAlignment="Center" Width="4"/>
                                                                                                    </Border>
                                                                                                </Border>
                                                                                            </Grid>
                                                                                            <ControlTemplate.Triggers>
                                                                                                <Trigger Property="IsMouseOver" Value="True">
                                                                                                    <Setter Property="BorderBrush" TargetName="OuterBorder" Value="#FFFFC92B"/>
                                                                                                    <Setter Property="BorderThickness" TargetName="OuterBorder" Value="1"/>
                                                                                                    <Setter Property="Background" TargetName="InnerBorder">
                                                                                                        <Setter.Value>
                                                                                                            <LinearGradientBrush 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>
                                                                                                        </Setter.Value>
                                                                                                    </Setter>
                                                                                                    <Setter Property="BorderThickness" TargetName="InnerBorder" Value="1"/>
                                                                                                    <Setter Property="BorderBrush" TargetName="InnerBorder" Value="White"/>
                                                                                                    <Setter Property="Fill" TargetName="Path" Value="Black"/>
                                                                                                </Trigger>
                                                                                            </ControlTemplate.Triggers>
                                                                                        </ControlTemplate>
                                                                                    </Setter.Value>
                                                                                </Setter>
                                                                            </Style>
                                                                        </RepeatButton.Style>
                                                                    </RepeatButton>
                                                                    <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" Visibility="{TemplateBinding HandlesVisibility}">
                                                                        <RepeatButton.RenderTransform>
                                                                            <ScaleTransform ScaleX="-1"/>
                                                                        </RepeatButton.RenderTransform>
                                                                        <RepeatButton.Style>
                                                                            <Style TargetType="{x:Type RepeatButton}">
                                                                                <Setter Property="Cursor" Value="Hand"/>
                                                                                <Setter Property="Width" Value="17"/>
                                                                                <Setter Property="VerticalAlignment" Value="Stretch"/>
                                                                                <Setter Property="Template">
                                                                                    <Setter.Value>
                                                                                        <ControlTemplate TargetType="{x:Type RepeatButton}">
                                                                                            <Grid x:Name="Root">
                                                                                                <Border x:Name="OuterBorder" CornerRadius="1">
                                                                                                    <Border x:Name="InnerBorder" Background="#01FFFFFF" CornerRadius="0">
                                                                                                        <Path x:Name="Path" Data="M6,0L8,0 8,14 6,14 6,12 4,12 4,10 2,10 2,8 0,8 0,6 2,6 2,4 4,4 4,2 6,2z" Fill="Black" HorizontalAlignment="Center" Height="7" Margin="-2,0,0,0" Stretch="Fill" VerticalAlignment="Center" Width="4"/>
                                                                                                    </Border>
                                                                                                </Border>
                                                                                            </Grid>
                                                                                            <ControlTemplate.Triggers>
                                                                                                <Trigger Property="IsMouseOver" Value="True">
                                                                                                    <Setter Property="BorderBrush" TargetName="OuterBorder" Value="#FFFFC92B"/>
                                                                                                    <Setter Property="BorderThickness" TargetName="OuterBorder" Value="1"/>
                                                                                                    <Setter Property="Background" TargetName="InnerBorder">
                                                                                                        <Setter.Value>
                                                                                                            <LinearGradientBrush 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>
                                                                                                        </Setter.Value>
                                                                                                    </Setter>
                                                                                                    <Setter Property="BorderThickness" TargetName="InnerBorder" Value="1"/>
                                                                                                    <Setter Property="BorderBrush" TargetName="InnerBorder" Value="White"/>
                                                                                                    <Setter Property="Fill" TargetName="Path" Value="Black"/>
                                                                                                </Trigger>
                                                                                            </ControlTemplate.Triggers>
                                                                                        </ControlTemplate>
                                                                                    </Setter.Value>
                                                                                </Setter>
                                                                            </Style>
                                                                        </RepeatButton.Style>
                                                                    </RepeatButton>
                                                                </Grid>
                                                            </Grid>
                                                        </Grid>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>
                                    </telerik:RadSlider.Style>
                                    <telerik:RadSlider.SelectionEnd>
                                        <Binding Mode="TwoWay" Path="VisiblePeriodEnd" RelativeSource="{RelativeSource TemplatedParent}">
                                            <Binding.Converter>
                                                <telerik:DateTicksConverter/>
                                            </Binding.Converter>
                                        </Binding>
                                    </telerik:RadSlider.SelectionEnd>
                                    <telerik:RadSlider.SmallChange>
                                        <Binding Path="SmallChange" RelativeSource="{RelativeSource TemplatedParent}">
                                            <Binding.Converter>
                                                <telerik:TimeSpanTicksConverter/>
                                            </Binding.Converter>
                                        </Binding>
                                    </telerik:RadSlider.SmallChange>
                                </telerik:RadSlider>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

 

Hope to get the solution soon. 

Thanks!

0
Dinko | Tech Support Engineer
Telerik team
answered on 28 Dec 2016, 04:46 PM
Hi Muhammad,

I examined the entire conversation you had with Evgenia and should note that the latest version of the UI for WPF components do not present this issue. As you’re using a very old version of the components (4 years old), I am afraid what you’ve requested is a custom implementation and a possible workaround to an issue in a product version which is no longer supported.

This is not a service available through the community forums. We, therefore, tried to provide you with guidance and advice on how to try and resolve it yourself. Additionally, you can take a look at the Installing UI for WPF from File help article in our documentation where you can read how you can get the default Themes of our controls before 2014 Q1 version. Have you tried the approach which Evgenia mentioned? You can navigate to a GroupContainer and ItemContainer elements and set their ItemsSource properties.
<telerik:GroupContainer Grid.Row="1"
                         Selection="{Binding Path=Selection, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                         ItemsSource="{TemplateBinding IntervalGroups}"
                         ItemHeaderStyle="{TemplateBinding GroupPeriodHeaderStyle}">
<telerik:ItemContainer Grid.Row="1"
                         Grid.RowSpan="2"
                         ItemsSource="{TemplateBinding IntervalItems}"
                         Selection="{Binding Selection, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">

In case you need dedicated support on this issue, I would suggest contacting our Professional Services team or upgrading your project to the latest version after associating your account with an active subscription.

Regards,
Dinko
Telerik by Progress
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allows you to write beautiful native mobile apps using a single shared C# codebase.
Tags
TimeBar
Asked by
Adi Constantin
Top achievements
Rank 2
Answers by
Tsvetie
Telerik team
Muhammad
Top achievements
Rank 1
Evgenia
Telerik team
Dinko | Tech Support Engineer
Telerik team
Share this question
or