Schedule view + Transition Control

[Bert]

Hi,

I have a schedule view combined with a transition control, but when an appointment is created the silverlight application crashes.

Unhandled exceptions are catched by the DOM of my browser:

1. Uncaught Error: Unhandled Error in Silverlight Application Code: 4004 Category: ManagedRuntimeError Message: System.Collections.Generic.KeyNotFoundException: The given key was not present in the dictionary. bij System.Collections.Generic.Dictionary`2.get_Item(TKey key) bij System.Windows.ResourceManagerWrapper.GetResourceForUri(Uri xamlUri, Type componentType)  
2. onSilverlightError

When I remove the transition control, creating an appointment works like a charm. This is the code of my XAML

<UserControl x:Class="Cevi.Cebas.Bezettingstabel.Views.BezettingstabelView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:schedule="clr-namespace:Telerik.Windows.Controls.ScheduleView;assembly=Telerik.Windows.Controls.ScheduleView"
    xmlns:scheduleView="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.ScheduleView"
    xmlns:qsf="clr-namespace:Telerik.Windows.Controls.QuickStart;assembly=Telerik.Windows.Controls"
    xmlns:local="clr-namespace:Cevi.Cebas.Bezettingstabel.ViewModels"
             xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
             xmlns:TransitionEffects="clr-namespace:Telerik.Windows.Controls.TransitionEffects;assembly=Telerik.Windows.Controls"
             xmlns:cal="clr-namespace:Caliburn.Micro;assembly=Caliburn.Micro" xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit" mc:Ignorable="d"
             d:DataContext="{d:DesignInstance Type=local:BezettingstabelViewModel}">

    <qsf:QuickStart.ExampleHeader>
        <TextBlock Text="Grouping and Filtering" Margin="8" />
    </qsf:QuickStart.ExampleHeader>

    <UserControl.Resources>
        <SolidColorBrush x:Key="AccentBrush" telerik:MetroColors.Color="Accent" />
        <SolidColorBrush x:Key="BasicBrush" telerik:MetroColors.Color="Basic" />
        <SolidColorBrush x:Key="StrongBrush" telerik:MetroColors.Color="Strong" />
        <SolidColorBrush x:Key="MarkerBrush" telerik:MetroColors.Color="Marker" />
        <SolidColorBrush x:Key="MainBrush" telerik:MetroColors.Color="Main" />
        <DataTemplate x:Key="ReservatieToolTipTemplate">
            <Grid MaxWidth="500">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="43" />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <TextBlock Text="Reservatie" Grid.ColumnSpan="2" TextWrapping="Wrap" Margin="5 8 4 3" FontWeight="Bold" />
                <Image Grid.Row="1"  VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5 5 0 0" Source="../../Images/ScheduleView/CustomStyles/clock.png" Width="28" Height="29" />
                <StackPanel Orientation="Vertical" Grid.Column="1" Grid.Row="1" Margin="0 5 0 0">
                    <TextBlock Text="{Binding Start, StringFormat='dddd dd MMM yyyy'}" Margin="0 3" FontSize="10" />
                    <StackPanel Orientation="Horizontal" Margin="0 0 0 0">
                        <TextBlock Text="{Binding Start, StringFormat='HH:mm'}" TextWrapping="Wrap" FontSize="10" />
                        <TextBlock Text=" - " FontSize="10" />
                        <TextBlock Text="{Binding End, StringFormat='HH:mm'}" TextWrapping="Wrap" FontSize="10" />
                    </StackPanel>
                </StackPanel>
                <TextBlock Grid.Row="2" Grid.ColumnSpan="2" Text="Lorem Ipsum ..." Margin="5 3 5 8" TextWrapping="Wrap"  />
            </Grid>
        </DataTemplate>

        <scheduleView:NullToVisibilityConverter x:Key="NullToVisibilityConverter" />
        <scheduleView:InvertedNullToVisibilityConverter x:Key="InvertedNullToVisibilityConverter" />
    </UserControl.Resources>
    <Controls:DockPanel FlowDirection="LeftToRight" HorizontalAlignment="Stretch" Height="Auto" VerticalAlignment="Stretch" Margin="10">
        <StackPanel FlowDirection="LeftToRight" Orientation="Vertical">
                <qsf:HeaderedContentControl Grid.Column="0" Grid.Row="0" Header="Filter op locatie">
                <Grid Grid.Column="0" Margin="1 0 1 1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="94*" />
                        <ColumnDefinition Width="124*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <ComboBox Grid.ColumnSpan="2" SelectedItem="{Binding Path=SelectedLocation, Mode=TwoWay}" ItemsSource="{Binding Path=Locations}" Grid.Row="1" DisplayMemberPath="Omschrijving" >

                    </ComboBox>
                </Grid>
            </qsf:HeaderedContentControl>
            <qsf:HeaderedContentControl Grid.Column="0" Grid.Row="1" Header="Filter op middel">
                    <ListBox x:Name="lbMiddelen"  ItemsSource="{Binding Middelen}">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <StackPanel x:Name="spMiddelen">
                                    <Border BorderThickness="0,0,0,1" VerticalAlignment="Top" Width="205" Height="45" BorderBrush="#FFFBFDFF" Background="#FFEEF0F1">
                                        <StackPanel Orientation="Horizontal" Margin="1">
                                            <CheckBox cal:Message.Attach="[Event Click] = [Action GroupReservations()]" IsChecked="{Binding Checked, Mode=TwoWay}" telerik:StyleManager.Theme="Metro" Foreground="#FFA9A9A9" VerticalAlignment="Center" Margin="10" Padding="10 0 0 0">
                                                <TextBlock Text="{Binding Middel.Omschrijving}" FontFamily="Segoe UI" FontSize="12" Foreground="#FF1E395B" FontWeight="Bold" />
                                            </CheckBox>
                                        </StackPanel>
                                    </Border>
                                </StackPanel>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
            </qsf:HeaderedContentControl>
            <qsf:HeaderedContentControl Grid.Column="0" Grid.Row="2" Header="Legende">
                        <ListBox ItemsSource="{Binding Categories}">
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel>
                                        <Border BorderThickness="0,0,0,1" VerticalAlignment="Top" Width="205" Height="45" BorderBrush="#FFFBFDFF" Background="#FFEEF0F1">
                                            <StackPanel Orientation="Horizontal" Margin="1">
                                            <Rectangle Width="10" Height="10" Fill="{Binding CategoryBrush}" VerticalAlignment="Center" Margin="10" />
                                                <TextBlock VerticalAlignment="Center" Text="{Binding DisplayName}" FontFamily="Segoe UI" FontSize="12" Foreground="#FF1E395B" FontWeight="Bold" />
                                            </StackPanel>
                                        </Border>
                                    </StackPanel>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>

                </qsf:HeaderedContentControl>


        </StackPanel>
        <StackPanel Orientation="Vertical" HorizontalAlignment="Stretch">
            <scheduleView:RadScheduleView
                CategoriesSource="{Binding Categories}"
                ResourceTypesSource="{Binding ResourceTypeCollection}"
                AppointmentsSource="{Binding Reservaties}"
                GroupDescriptionsSource="{Binding GroupDescriptions}"
                cal:Message.Attach="[Event AppointmentCreated] = [Action AppointmentCreated($dataContext)]; [Event AppointmentSaving] = [Action AppointmentCreated($eventArgs)]"
                ToolTipTemplate="{StaticResource ReservatieToolTipTemplate}"
                Name="svReservaties" MinHeight="500" MaxHeight="600" MinWidth="600" SnapAppointments="True"
                ActiveViewDefinitionIndex="1" FirstVisibleTime="13:00">
                <scheduleView:RadScheduleView.AppointmentItemContentTemplate>
                    <DataTemplate>
                        <StackPanel Margin="4 2">
                            <TextBlock Text="{Binding Subject}" FontWeight="Bold" />
                            <TextBlock Text="{Binding Appointment.Body}" TextWrapping="Wrap" />
                        </StackPanel>
                    </DataTemplate>
                </scheduleView:RadScheduleView.AppointmentItemContentTemplate>
                <scheduleView:RadScheduleView.ViewDefinitions>
                    <scheduleView:DayViewDefinition x:Name="DayVD" Title="Dag" Orientation="Horizontal" TimerulerMajorTickStringFormat="{}{0:HH:mm}" MinTimeRulerExtent="2750" MaxTimeRulerExtent="2750" MinorTickLength="15min" MajorTickLength="1h" GroupFilter="{Binding GroupFilter}" />
                </scheduleView:RadScheduleView.ViewDefinitions>
            </scheduleView:RadScheduleView>
            <telerik:RadTransitionControl Content="{Binding ElementName=svReservaties, Path=SelectedAppointment}"
                        Duration="0:0:0.3" FontFamily="Portable User Interface" >
                <telerik:RadTransitionControl.Transition>
                    <TransitionEffects:FadeTransition />
                </telerik:RadTransitionControl.Transition>
                <telerik:RadTransitionControl.ContentTemplate>
                    <DataTemplate>
                        <Grid>
                            <StackPanel Margin="4 4 4 8">
                                <TextBlock Text="{Binding Path=Resources[0].DisplayName}" Margin="4 0" FontSize="16"
                                            Foreground="{StaticResource AccentBrush}" />
                                <TextBlock Text="Time Range" Margin="4 2" Foreground="{StaticResource StrongBrush}" />
                                <StackPanel Orientation="Horizontal" Margin="4 0">
                                    <TextBlock Text="{Binding Path=Start, StringFormat='MMM dd'}"
                                                FontWeight="SemiBold" Foreground="{StaticResource AccentBrush}" />
                                    <TextBlock Text=" - " Foreground="{StaticResource AccentBrush}" />
                                    <TextBlock Text="{Binding Path=End, StringFormat='MMM dd, yyyy'}"
                                                FontWeight="SemiBold" Foreground="{StaticResource AccentBrush}" />
                                </StackPanel>

                                <Grid Margin="2">
                                    <Border Background="{Binding Category.CategoryBrush}" Padding="2 0"
                                                Margin="0 0 0 4">
                                        <TextBlock Text="{Binding Subject}" Foreground="{StaticResource MainBrush}" />
                                    </Border>
                                    <Rectangle Height="3" VerticalAlignment="Bottom"
                                                Fill="{Binding TimeMarker.TimeMarkerBrush}" />
                                </Grid>

                                <TextBlock Text="{Binding Body}" Margin="4" TextWrapping="Wrap"
                                            Foreground="{StaticResource StrongBrush}" />

                            </StackPanel>
                            <Border Background="{StaticResource MainBrush}"
                                        Visibility="{Binding Converter={StaticResource InvertedNullToVisibilityConverter}}">
                                <TextBlock Text="Selecteer een reservatie om de details te zien."
                                            Foreground="{StaticResource StrongBrush}" Margin="5 40"
                                            HorizontalAlignment="Center" VerticalAlignment="Top" TextWrapping="Wrap" />
                            </Border>
                        </Grid>
                    </DataTemplate>
                </telerik:RadTransitionControl.ContentTemplate>
            </telerik:RadTransitionControl>
        </StackPanel>
    </Controls:DockPanel>
</UserControl>

Can you help me?
Greetings


Edit

Curiously enough, this only happes the second time you add an appointment. So when a new appointment is created, it renders fine on the view. Afterwards, you can drag & drop the appointment to different resources and adjusting the appointment info works fine. But adding a new appointment after the first ones generates the error.

[Konstantina]

Hello Bert,

I was able to observe the issue, but I am not quite sure yet what might be causing the issue. Meanwhile, could you please share with us for what purpose you want to use the TransitionControl, what it is supposed to do? In that way we will be able to provide you with a work-around until we find the source of the problem.

Regards,
Konstantina
the Telerik team

[Bert]

Edit: I used the example from the 'Time Bar Schedule' created by Telerik (ScheduleView\TimeBar). There I found the TransitionControl wich displayed information of an appointment ;)

I used the 'AppointmentSelectionChanged' method on the schedule view to create some kind of 'master-detail':

<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch">

    <scheduleView:RadScheduleView

        CategoriesSource="{Binding Categories}"

        ResourceTypesSource="{Binding ResourceTypeCollection}"

        AppointmentsSource="{Binding Reservaties}"

        GroupDescriptionsSource="{Binding GroupDescriptions}"

        cal:Message.Attach="[Event AppointmentCreated] = [Action AppointmentCreated($dataContext)]; [Event AppointmentSaving] = [Action AppointmentCreated($eventArgs)]; [Event AppointmentSelectionChanged] = [Action AppointmentSelectionChanged($source,$eventArgs)]"

        Name="svReservaties" MinHeight="500" MaxHeight="600" MinWidth="600" SnapAppointments="True"

        ActiveViewDefinitionIndex="1" FirstVisibleTime="13:00"

        ToolTipTemplate="{StaticResource ReservatieToolTipTemplate}">

        <scheduleView:RadScheduleView.AppointmentItemContentTemplate>

            <DataTemplate>

                <StackPanel Margin="4 2">

                    <TextBlock Text="{Binding Subject}" FontWeight="Bold" />

                    <TextBlock Text="{Binding Appointment.Body}" TextWrapping="Wrap" />

                </StackPanel>

            </DataTemplate>

        </scheduleView:RadScheduleView.AppointmentItemContentTemplate>

        <scheduleView:RadScheduleView.ViewDefinitions>

            <scheduleView:DayViewDefinition x:Name="DayVD" Title="Dag" Orientation="Horizontal" TimerulerMajorTickStringFormat="{}{0:HH:mm}" MinTimeRulerExtent="2750" MaxTimeRulerExtent="2750" MinorTickLength="15min" MajorTickLength="1h" GroupFilter="{Binding GroupFilter}" />

        </scheduleView:RadScheduleView.ViewDefinitions>

    </scheduleView:RadScheduleView>

    <ContentControl x:Name="ReservatieDetail"></ContentControl>

</StackPanel>     

ViewModel

public void AppointmentSelectionChanged(object sender, Telerik.Windows.Controls.SelectionChangedEventArgs e)
{

    ReservatieDetail = new ReservatieDetailViewModel
                           {
                              Reservatie = (sender as RadScheduleView).SelectedAppointment as Reservatie
                           };
}

The ReservatieDetail object is a VM that gets loaded when you click on an appointment. In that ViewModel I display the correct information.
It works and is as clean as the transition control with a data template.

However, if you find a solution I would be glad to hear about :)

Greetings
Bert Persyn