TimeBar - slide till the end - Application break

[David]

Hello,

I have RadTimeBar

            <telerik:RadTimeBar x:Name="radTimeBar"
                            PeriodStart="{Binding StartDate}" 
                            PeriodEnd="{Binding EndDate}" 
                            VisiblePeriodStart="{Binding VisibleStartDate}" 
                            VisiblePeriodEnd="{Binding VisibleEndDate}"                            
                            SelectionStart="{Binding CurrentTime, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                            SelectionChanged="radTimeBar_SelectionChanged"                            
                            ScrollMode="ScrollAndZoom">
                <telerik:RadTimeBar.Intervals>
                    <telerik:MinuteInterval />
                </telerik:RadTimeBar.Intervals>
            </telerik:RadTimeBar>

When I slide the slider thumb to the end the aplication is broken

I don't know how to catch the exception before the crashed

I attached a print screen of the exception

Thanks

[Martin Ivanov]

Hi David,

Can you provide some additional information on the issue? More specifically:

• Can you show me the most inner details of the exception? You can see this by clicking on the "View details" button in the exception box, if one appears.
• Can you show me what happens in the SelectionChanged event handler?
• Can you isolate your set up and the issue as much as you can (using as less code as possible) and share runnable code snippets here?

Regards,
Martin Ivanov
Progress Telerik

[David]

Hello,

I don't have any more details of the exception, there isn't inner exception in view details

There is not event handle of selection changed, not to timebar and not to time line

I saw that the exception is because of setting SelectionThumbStyle in RadTimeBar style

<Setter Property="SelectionThumbStyle" Value="{StaticResource SelectionThumbStyle}"/>

but I don't know what in the style caused to the exception

Here is the code:

XAML

<Window x:Class="BarTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:datavizControls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.DataVisualization"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:timeBars="clr-namespace:Telerik.Windows.Controls.TimeBar;assembly=Telerik.Windows.Controls.DataVisualization"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <timeBars:DateTicksConverter x:Key="dateConverter"/>
        <timeBars:TimeSpanTicksConverter x:Key="timespanConverter"/>
        <timeBars:TimeSpanToMaximumRangeSpanConverter x:Key="timeSpanToMaximumRangeSpanConverter"/>
        <timeBars:SelectionRangeDateTicksConverter x:Key="selectionRangeConverter"/>
        <timeBars:ScrollModeToThumbVisibilityConverter x:Key="scrollModeToThumbVisibilityConverter"/>
        <timeBars:ScrollModeToVisibilityConverter x:Key="scrollModeToVisibilityConverter"/>
        <Style x:Key="BorderWithActualSize" TargetType="Border">
            <Setter Property="timeBars:ActualSizeProxy.IsEnabled" Value="True"/>
        </Style>
        <Style x:Key="TextBlockWithActualWidth" TargetType="TextBlock">
            <Setter Property="timeBars:ActualSizeProxy.IsEnabled" Value="True"/>
        </Style>
        <Style x:Key="SelectionRangeStyle" TargetType="Thumb">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Thumb">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <Canvas Grid.Row="1" Height="{Binding ElementName=TextWrapper, Path=(timeBars:ActualSizeProxy.ActualHeight)}">
                                <Border x:Name="TextWrapper" MinWidth="{Binding ElementName=Title,Path=(timeBars:ActualSizeProxy.ActualWidth)}"  BorderBrush="{TemplateBinding BorderBrush}"
                                        Style="{StaticResource BorderWithActualSize}" SnapsToDevicePixels="True">
                                    <TextBlock x:Name="Title" Text="{Binding ElementName=PART_SelectionThumb, Path=Title}" Style="{StaticResource TextBlockWithActualWidth}"/>
                                </Border>
                            </Canvas>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="SelectionThumbStyle" TargetType="timeBars:SelectionThumb">
            <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}"/>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="RadTimeBarStyle" TargetType="datavizControls:RadTimeBar">
            <Setter Property="SelectionThumbStyle" Value="{StaticResource SelectionThumbStyle}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="datavizControls:RadTimeBar">
                        <Border
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            SnapsToDevicePixels="True">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Grid Grid.Row="0">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="0"/>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="*"/>
                                    </Grid.RowDefinitions>
                                    <Border VerticalAlignment="Bottom" Height="4"/>
                                    <Border Grid.Row="1" Grid.RowSpan="2" Background="{TemplateBinding Background}"/>                                   
                                    <timeBars:TimeBarContentPanel
                                        Slider="{Binding ElementName=PART_Slider}" Grid.Row="2" Margin="0 2 0 0"
                                        SliderMinimum="{Binding ElementName=PART_Slider, Path=Minimum, Mode=TwoWay}"
                                        SliderMaximum="{Binding ElementName=PART_Slider, Path=Maximum, Mode=TwoWay}">
                                        <ContentPresenter/>
                                    </timeBars:TimeBarContentPanel>
                                    <timeBars:ItemContainer x:Name="PART_ItemContainer"  Grid.RowSpan="3"
                                        Selection="{Binding Path=Selection, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                        ItemsSource="{TemplateBinding IntervalItems}"
                                        ItemHeaderStyle="{TemplateBinding PeriodHeaderStyle}">
                                        <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:TimeBarStackPanel Grid.Row="1" Grid.RowSpan="2"
                                        Slider="{Binding ElementName=PART_Slider}"
                                        SliderMinimum="{Binding ElementName=PART_Slider, Path=Minimum, Mode=TwoWay}"
                                        SliderMaximum="{Binding ElementName=PART_Slider, Path=Maximum, Mode=TwoWay}">
                                        <timeBars:ShadeControl StartDate="{TemplateBinding PeriodStart}" EndDate="{Binding ElementName=PART_SelectionThumb, Path=StartDate}"/>
                                        <timeBars:SelectionThumb x:Name="PART_SelectionThumb"  Canvas.ZIndex="2"
                                            PeriodStart="{TemplateBinding PeriodStart}"
                                            PeriodEnd="{TemplateBinding PeriodEnd}"
                                            VisiblePeriodRange="{Binding Path=ActualVisiblePeriodRange, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                            IsSnapToIntervalEnabled="{TemplateBinding IsSnapToIntervalEnabled}"
                                            IntervalGroups="{TemplateBinding IntervalGroups}"
                                            IntervalItems="{TemplateBinding IntervalItems}"
                                            MinSelectionRange="{TemplateBinding MinSelectionRange}"
                                            MaxSelectionRange="{TemplateBinding MaxSelectionRange}"
                                            TitleFormatString="{TemplateBinding SelectionTitleFormatString}"
                                            Selection="{Binding Path=Selection, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                            StartDate="{Binding Path=ActualSelectionStart, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                            EndDate="{Binding Path=ActualSelectionEnd, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                            SelectionPreviewControl="{Binding ElementName=PART_SelectionThumbPreview}"
                                            Style="{TemplateBinding SelectionThumbStyle}"/>
                                        <timeBars:ShadeControl StartDate="{Binding ElementName=PART_SelectionThumb, Path=EndDate}" EndDate="{TemplateBinding PeriodEnd}"/>
                                    </timeBars:TimeBarStackPanel>
                                    <timeBars:TimeBarPanel Grid.Row="1" Grid.RowSpan="2"
                                        Slider="{Binding ElementName=PART_Slider}"
                                        SliderMinimum="{Binding ElementName=PART_Slider, Path=Minimum, Mode=TwoWay}"
                                        SliderMaximum="{Binding ElementName=PART_Slider, Path=Maximum, Mode=TwoWay}">
                                        <timeBars:SelectionThumbPreview x:Name="PART_SelectionThumbPreview"/>
                                    </timeBars:TimeBarPanel>
                                </Grid>
                                <telerik:RadSlider x:Name="PART_Slider" Grid.Row="1"
                                    Style="{TemplateBinding SliderStyle}"
                                    Minimum="{Binding Path=PeriodStart, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource dateConverter}}"
                                    Maximum="{Binding Path=PeriodEnd, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource dateConverter}}"
                                    MinimumRangeSpan="{Binding Path=ActualMinZoomRange, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource timespanConverter}}"
                                    MaximumRangeSpan="{Binding Path=MaxZoomRange, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource timeSpanToMaximumRangeSpanConverter}}"
                                    Selection="{Binding Path=ActualVisiblePeriodRange, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay, Converter={StaticResource selectionRangeConverter}}"
                                    SmallChange="{Binding Path=SmallChange, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource timespanConverter}}"
                                    LargeChange="{Binding Path=LargeChange, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource timespanConverter}}"
                                    ThumbVisibility="{Binding Path=ScrollMode, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource scrollModeToThumbVisibilityConverter}}"
                                    Visibility="{Binding Path=ScrollMode, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource scrollModeToVisibilityConverter}}"
                                    IsCoercionSuppressed="True"/>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="datavizControls:RadTimeBar" BasedOn="{StaticResource RadTimeBarStyle}"/>
    </Window.Resources>
    <Grid x:Name="LayoutRoot" Width="650">
        <telerik:RadTimeBar x:Name="radTimeBar" PeriodStart="{Binding StartDate}" PeriodEnd="{Binding EndDate}" VisiblePeriodStart="{Binding StartDate}" VisiblePeriodEnd="{Binding EndDate}" Height="100">
            <telerik:RadTimeline x:Name="radTimeline" PeriodStart="{Binding StartDate}" PeriodEnd="{Binding EndDate}"  StartPath="StartDate" DurationPath="Duration" ItemsSource="{Binding Events}" ScrollMode="None"/>
            <telerik:RadTimeBar.Intervals>
                <telerik:MinuteInterval />
            </telerik:RadTimeBar.Intervals>
        </telerik:RadTimeBar>
    </Grid>
</Window>

-------------------

CS

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Windows;

namespace BarTest
{
    public partial class MainWindow : Window
    {
        public List<Item> Events { get; set; }
        public DateTime StartDate { get; set; }
        public DateTime EndDate { get; set; }

        public MainWindow()
        {
            InitializeComponent();
            Events = new List<Item>(){new Item() {IsExercise=true,StartDate = new DateTime(2017,05,12,6,13,2), EndDate = new DateTime(2017,05,12,6,14,15), Duration = new TimeSpan(0,1,13) },
            new Item() {IsExercise=true,StartDate = new DateTime(2017,05,12,6,15,2), EndDate = new DateTime(2017,05,12,6,19,15), Duration = new TimeSpan(0,4,13) }};
            StartDate = new DateTime(2017, 05, 12, 6, 10, 2); EndDate = new DateTime(2017, 05, 12, 6, 54, 19);
            this.DataContext = this;
        }
    }
    public class Item : INotifyPropertyChanged
    {
        public DateTime StartDate { get; set; }
        public DateTime EndDate { get; set; }
        public TimeSpan Duration { get; set; }
        private bool isExercise;
        public bool IsExercise
        {
            get { return isExercise; }
            set { isExercise = value; OnPropertyChanged("IsExercise"); }
        }
        private void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
        public event PropertyChangedEventHandler PropertyChanged;
    }
}

Thanks

 

[Martin Ivanov]

Hello David,

Thank you for the runnable code. I've assembled it into a runnable project but I couldn't reproduce the exception. Can you please check out the attached project and let me know if I am missing something?

I noticed couple of things that could be improved in the custom styles. You can try those and see if they resolve the issue.

• The custom Template of the SelectionThumbStyle is missing 2 elements from its original template - PART_LeftHandle and PART_RightHandle. Note that the controls named with PART_ are template parted and are mandatory for the template. Removing them usually leads to issues. Can you try add them in the custom template and see if the issue still persists? Here is the default template for the Office_Black theme.
  

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

• I've noticed the same also for the custom RadTimeBar template. Some elements with "PART_" in their name are removed from the template.

Regards,
Martin Ivanov
Progress Telerik

[David]

Hi,

I ran the attached project without any changes (except to change the dlls references)

and I reproduced the exception, It happened by slide the slider quickly from start to end till outside the window

I tried to add 2 lines that you wrote, (I removed the style because I didn't have them) and there wasn't exception

I copied those lines to my code with visibility= collapsed for the left and right handles - and it works!!!

 

Thanks a lot