Change tool tip duration for appointment item

[Pinho]

Hi,

 I've got the following scenario:

- I'm using the ScheduleView and I customized the AppointmentItem (removed close button, changed most of the borders, etc, appointments now strait lines )
- I also customized the tooltip

The only thing I wasn't able to do was to set the tooltip duration:

Here's what I'm doing in XAML:

Definition of schedule View:

<telerik:RadScheduleView x:Name="scheduleView"
                                 AppointmentsSource="{Binding States}"
                                 CurrentDate="{Binding CurrentDate}"
                                 CategoriesSource="{Binding Categories}"
                                 ResourceTypesSource="{Binding AllResourceTypesInCurrentContext}"
                                 ShowDialog="scheduleView_ShowDialog"
                                 AllowDrop="False"
                                 AppointmentNavigationButtonsVisibility="Never"
                                 NavigationHeaderVisibility="Collapsed"
                                 ShowCurrentTimeIndicator="False"
                                 AppointmentStyleSelector="{StaticResource CustomAppointmentStyleSelector}"
                                 ToolTipTemplate="{StaticResource AppointmentToolTipTemplate}"
                                 SizeChanged="scheduleView_SizeChanged" >
                        <telerik:RadScheduleView.GroupDescriptionsSource>
                            <telerik:GroupDescriptionCollection>
                                <telerik:ResourceGroupDescription ResourceType="Equipment" />
                            </telerik:GroupDescriptionCollection>
                        </telerik:RadScheduleView.GroupDescriptionsSource>
                        <telerik:RadScheduleView.GroupHeaderContentTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding FormattedName}" Width="80" Margin="8 0" VerticalAlignment="Center" />
                            </DataTemplate>
                        </telerik:RadScheduleView.GroupHeaderContentTemplate>
                        <telerik:RadScheduleView.ViewDefinitions>
                            <telerik:TimelineViewDefinition  x:Name="timeLineViewDefinition" VisibleDays="{Binding NumberOfDays}" MinTimeRulerExtent="1" TimerulerGroupStringFormat="{}{0:MM/dd/yyyy}" TimerulerMajorTickStringFormat="{}{0:hh:mm tt}"></telerik:TimelineViewDefinition>
                        </telerik:RadScheduleView.ViewDefinitions>
                    </telerik:RadScheduleView>

Definition of tooltip template:

<DataTemplate x:Key="AppointmentToolTipTemplate">
                <Grid MaxWidth="700">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="43" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <TextBlock Text="{Binding Subject}" Grid.ColumnSpan="2" TextWrapping="Wrap" Margin="5 8 4 3" FontWeight="Bold" />
                    <Canvas Grid.Row="1"  x:Name="appbar_clock" Width="50" Height="50" Clip="F1 M 0,0L 50,0L 50,50L 0,50L 0,0">
                        <Path Width="34.8333" Height="34.8333" Canvas.Left="5" Canvas.Top="5" Stretch="Fill" Fill="#FF1e395b" Data="F1 M 38,23.75C 46.7445,23.75 53.8333,30.8388 53.8333,39.5833C 53.8333,48.3278 46.7445,55.4167 38,55.4167C 29.2555,55.4167 22.1667,48.3278 22.1667,39.5833C 22.1667,30.8388 29.2555,23.75 38,23.75 Z M 38,27.7083C 31.4416,27.7083 26.125,33.025 26.125,39.5833C 26.125,46.1417 31.4416,51.4583 38,51.4583C 44.5584,51.4583 49.875,46.1417 49.875,39.5833C 49.875,33.025 44.5584,27.7083 38,27.7083 Z M 37.6042,30.875C 38.4786,30.875 39.1875,31.5839 39.1875,32.4583L 39.1875,38.3959L 45.125,38.3959C 45.9994,38.3959 46.7083,39.1047 46.7083,39.9792L 46.7083,40.7708C 46.7083,41.6453 45.9994,42.3542 45.125,42.3542L 38,42.3542C 37.2083,42.2222 36.4167,42.0903 35.9548,41.6285C 35.493,41.1667 35.3611,40.375 35.2292,39.5833L 35.2292,32.4583C 35.2292,31.5839 35.938,30.875 36.8125,30.875L 37.6042,30.875 Z"/>
                    </Canvas>
                    <StackPanel Orientation="Vertical" Grid.Column="1" Grid.Row="1" Margin="5 0 0 0">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock FontWeight="Bold" Text="{Binding Path=StartAppointment, Source={StaticResource res}}" MinWidth="40" Margin="0 5" FontSize="10" />
                            <TextBlock Text="{Binding Start, StringFormat='yyyy/MM/dd hh:mm tt'}" Margin="0 5" FontSize="10" />
                        </StackPanel>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock FontWeight="Bold" Text="{Binding Path=EndAppointment, Source={StaticResource res}}" MinWidth="40" Margin="0" FontSize="10"/>
                            <TextBlock Text="{Binding End, StringFormat='yyyy/MM/dd hh:mm tt'}" Margin="0" FontSize="10" />
                        </StackPanel>
                    </StackPanel>
                    <TextBlock Grid.Row="2" Grid.ColumnSpan="2" Text="{Binding Body}" Margin="5 0 5 8" TextWrapping="Wrap" FontSize="10"  />
                </Grid>
            </DataTemplate>

Definition of CustomAppointmentStyleSelected in XAML:

<local:CustomAppointmentStyleSelector x:Key="CustomAppointmentStyleSelector">
                <local:CustomAppointmentStyleSelector.CustomHorizontalStyle>
                    <Style TargetType="telerik:AppointmentItem" BasedOn="{StaticResource AppointmentItemBaseStyle}">
                        <Setter Property="telerik:RadToolTipService.ShowDuration" Value="20000"/>
                        <Setter Property="Template" Value="{StaticResource AppointmentItemHorizontalControlTemplate}" />
                        <Setter Property="Foreground" Value="Transparent" />
                    </Style>
                </local:CustomAppointmentStyleSelector.CustomHorizontalStyle>
            </local:CustomAppointmentStyleSelector>

In code behind:

/// <summary>
   /// Helper class to set custom appointment style
   /// </summary>
   public class CustomAppointmentStyleSelector : OrientedAppointmentItemStyleSelector
   {
       public Style CustomHorizontalStyle { get; set; }

       public Style CustomVerticalStyle { get; set; }

       public override Style SelectStyle(object item, DependencyObject container, ViewDefinitionBase activeViewDefinition)
       {
           if (activeViewDefinition.GetOrientation() == Orientation.Horizontal)
           {
               CustomHorizontalStyle.SetValue(RadToolTipService.ShowDurationProperty, 20000);
               return this.CustomHorizontalStyle;
           }
           else if (activeViewDefinition.GetOrientation() == Orientation.Vertical)
           {
               return this.CustomVerticalStyle;
           }

           return base.SelectStyle(item, container, activeViewDefinition);
       }
   }

So, I want to show the tooltip when the mouse is over the appointment and I want it to be open for 20 seconds with the format defined in the template. Is this possible?

The example that almost worked was when I set this on the schedule View:

ToolTipTemplate="{x:Null}"

and then:

<local:CustomAppointmentStyleSelector x:Key="CustomAppointmentStyleSelector">
                <local:CustomAppointmentStyleSelector.CustomHorizontalStyle>
                    <Style TargetType="telerik:AppointmentItem" BasedOn="{StaticResource AppointmentItemBaseStyle}">
                        <Setter Property="telerik:RadToolTipService.ShowDuration" Value="20000"/>
                        <Setter Property="Template" Value="{StaticResource AppointmentItemHorizontalControlTemplate}" />
                        <Setter Property="Foreground" Value="Transparent" />
                       <Setter Property="telerik:RadToolTipService.ToolTipContent" Value="{Binding Subject}"/>
                    </Style>
                </local:CustomAppointmentStyleSelector.CustomHorizontalStyle>
            </local:CustomAppointmentStyleSelector>

this solution will show the tooltip for 20 seconds but without the information that I want and how I want it (don't know how to set the format of the tooltip using this Setter and Value) and worst of all, the tooltip appears on the top left of the screen, not where the mouse exists.

Could you please help me?

Thanks,

L. Pinho

[Rogério Ferreira]

Hi L.Pinho,

 I got a similar problem, we defined a custom appointment item to remove the delete button (according to the documentation), removed the parts related to re sizing the appointment, and some other parts regarding drag'n'drop.

 Since the text and images in the tooltips might be lengthy we need the tooltip to be active for about 30 seconds (or more, it would be nice for the user to set this value at configuration time).

 Did you solved your problem?

Thanks,

Rogério

[Håkan]

Hi!

I'm also interested in a solution to this problem.

I sometimes have a very long tooltip that I want to display for at least 20 seconds.

Regards,
Håkan

[Kalin]

Hello guys,

In order to change the duration of the Appointment ToolTip you will need to set the ToolTipTemplate property of the ScheduleView to x:Null and implement a custom AppointmentStyleSelector. Inside of which styles you will need to set telerik:RadToolTipService.ToolTipContent and the telerik:RadToolTipService.ShowDuration attached properties to the desired. Check the following code snippet:

<telerik:OrientedAppointmentItemStyleSelector x:Key="AppointmentStyleSelector">
    <telerik:OrientedAppointmentItemStyleSelector.VerticalStyle>
        <Style TargetType="telerik:AppointmentItem" BasedOn="{StaticResource AppointmentItemBaseStyle}">
            <Setter Property="telerik:RadToolTipService.ToolTipContent" Value="{Binding}" />
            <Setter Property="telerik:RadToolTipService.ShowDuration" Value="20000" />
        </Style>
    </telerik:OrientedAppointmentItemStyleSelector.VerticalStyle>
</telerik:OrientedAppointmentItemStyleSelector>

Hope this helps.

Regards,
Kalin
Telerik

[Håkan]

OK, that worked fine for me with my custom appointment.
But I have another custom appointment template that is a little bit more advanced that I use in the month view.
The appointment contains a couple of borders with textblocks inside. Each textblock has it's own tooltip.
Here I use the standard ToolTipService attached properties. Is there some way I can use the RadToolTipService here to be able to set the duration. I don't seem to get it to work.

<DataTemplate x:Key="CustomMonthViewAppointmentItemTemplate">
      <Grid>
          <Grid.Resources>
              <Style TargetType="Border">
                  <Setter Property="BorderBrush" Value="{StaticResource ContentBorderBrush}" />
                  <Setter Property="BorderThickness" Value="1" />
                  <Setter Property="CornerRadius" Value="2" />
                  <Setter Property="Margin" Value="0,0,1,1" />
              </Style>
              <Style x:Key="NbrOfShiftsText" BasedOn="{StaticResource DefaultTextBlock}" TargetType="TextBlock">
                  <Setter Property="FontSize" Value="10" />
                  <Setter Property="TextAlignment" Value="Center" />
                  <Setter Property="HorizontalAlignment" Value="Center" />
                  <Setter Property="VerticalAlignment" Value="Center" />
                  <Setter Property="Padding" Value="2" />
              </Style>
          </Grid.Resources>
          <Grid.ColumnDefinitions>
              <ColumnDefinition Width="24" />
              <ColumnDefinition Width="*" />
              <ColumnDefinition Width="24" />
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
              <RowDefinition Height="18" />
              <RowDefinition Height="18" />
              <RowDefinition Height="18" />
              <RowDefinition Height="18" />
              <RowDefinition Height="*" />
          </Grid.RowDefinitions>
          <Border Grid.Column="0" Grid.Row="0" Background="{StaticResource ShiftOpenBrush}" Visibility="{Binding Appointment.Open, Converter={StaticResource NumberToVisibilityConverter}}">
              <TextBlock Text="{Binding Appointment.Open}" Style="{StaticResource NbrOfShiftsText}">
                  <ToolTipService.ToolTip>
                      <ToolTip Content="{Binding Appointment.OpenToolTip}" Style="{StaticResource MultiLine_ToolTip}" Visibility="{Binding Appointment.ShowToolTip, Converter={StaticResource VisibilityConverter}}" />
                  </ToolTipService.ToolTip>
              </TextBlock>
          </Border>
          <Border Grid.Column="0" Grid.Row="1" Background="{StaticResource ShiftAssignedBrush}" Visibility="{Binding Appointment.Assigned, Converter={StaticResource NumberToVisibilityConverter}}">
              <TextBlock Text="{Binding Appointment.Assigned}" Style="{StaticResource NbrOfShiftsText}">
                  <ToolTipService.ToolTip>
                      <ToolTip Content="{Binding Appointment.AssignedToolTip}" Style="{StaticResource MultiLine_ToolTip}" Visibility="{Binding Appointment.ShowToolTip, Converter={StaticResource VisibilityConverter}}" />
                  </ToolTipService.ToolTip>
              </TextBlock>
          </Border>
          <Border Grid.Column="0" Grid.Row="2" Background="{StaticResource ShiftWantedBrush}" Visibility="{Binding Appointment.Wanted, Converter={StaticResource NumberToVisibilityConverter}}">
              <TextBlock Text="{Binding Appointment.Wanted}" Style="{StaticResource NbrOfShiftsText}">
                  <ToolTipService.ToolTip>
                      <ToolTip Content="{Binding Appointment.WantedToolTip}" Style="{StaticResource MultiLine_ToolTip}" Visibility="{Binding Appointment.ShowToolTip, Converter={StaticResource VisibilityConverter}}" />
                  </ToolTipService.ToolTip>
              </TextBlock>
          </Border>
          <Border Grid.Column="0" Grid.Row="3" Background="{StaticResource ShiftUnwantedBrush}" Visibility="{Binding Appointment.Unwanted, Converter={StaticResource NumberToVisibilityConverter}}">
              <TextBlock Text="{Binding Appointment.Unwanted}" Style="{StaticResource NbrOfShiftsText}">
                  <ToolTipService.ToolTip>
                      <ToolTip Content="{Binding Appointment.UnwantedToolTip}" Style="{StaticResource MultiLine_ToolTip}" Visibility="{Binding Appointment.ShowToolTip, Converter={StaticResource VisibilityConverter}}" />
                  </ToolTipService.ToolTip>
              </TextBlock>
          </Border>
          <Border Grid.Column="2" Grid.Row="0" Background="{StaticResource StripedRedBrush}" Visibility="{Binding Appointment.AbsenceRequested, Converter={StaticResource NumberToVisibilityConverter}}">
              <TextBlock Text="{Binding Appointment.AbsenceRequested}" Style="{StaticResource NbrOfShiftsText}">
                  <ToolTipService.ToolTip>
                      <ToolTip Content="{Binding Appointment.AbsenceRequestedToolTip}" Style="{StaticResource MultiLine_ToolTip}" Visibility="{Binding Appointment.ShowToolTip, Converter={StaticResource VisibilityConverter}}" />
                  </ToolTipService.ToolTip>
              </TextBlock>
          </Border>
          <Border Grid.Column="2" Grid.Row="1" Background="{StaticResource ShiftAbsenceBrush}" Visibility="{Binding Appointment.AbsenceApproved, Converter={StaticResource NumberToVisibilityConverter}}">
              <TextBlock Text="{Binding Appointment.AbsenceApproved}" Style="{StaticResource NbrOfShiftsText}">
                  <ToolTipService.ToolTip>
                      <ToolTip Content="{Binding Appointment.AbsenceApprovedToolTip}" Style="{StaticResource MultiLine_ToolTip}" Visibility="{Binding Appointment.ShowToolTip, Converter={StaticResource VisibilityConverter}}" />
                  </ToolTipService.ToolTip>
              </TextBlock>
          </Border>
          <Border Grid.Column="2" Grid.Row="2" Background="{StaticResource StripedGrayBrush}" Visibility="{Binding Appointment.Preliminary, Converter={StaticResource NumberToVisibilityConverter}}">
              <TextBlock Text="{Binding Appointment.Preliminary}" Style="{StaticResource NbrOfShiftsText}">
                  <ToolTipService.ToolTip>
                      <ToolTip Content="{Binding Appointment.PreliminaryToolTip}" Style="{StaticResource MultiLine_ToolTip}" Visibility="{Binding Appointment.ShowToolTip, Converter={StaticResource VisibilityConverter}}" />
                  </ToolTipService.ToolTip>
              </TextBlock>
          </Border>

          <TextBlock Grid.Column="1" Grid.Row="0" Grid.RowSpan="4" Text="{Binding Appointment.DayDescription}" TextAlignment="Center" FontSize="10" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,45,0,0" Foreground="{StaticResource DarkRedBrush}" Opacity="0.75" />

          <!-- If ShowSummary setting is false, PlannedMinutes is set to 0, therefore we can use it to hide the summary information-->
          <StackPanel Orientation="Vertical" Grid.Column="1" Grid.Row="4" HorizontalAlignment="Center" VerticalAlignment="Bottom" Visibility="{Binding Appointment.PlannedMinutes, Converter={StaticResource NumberToVisibilityConverter}}">
              <TextBlock Text="{Binding Appointment.PlannedMinutes, Converter={StaticResource MinutesToTimeSpanConverter}}" HorizontalAlignment="Center" />
              <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                  <TextBlock Text="{Binding Appointment.GrossTime, Converter={StaticResource TimeSpanConverter}}" Visibility="{Binding Appointment.GrossTime, Converter={StaticResource NumberToVisibilityConverter}}" />
                  <TextBlock Text="/" Visibility="{Binding Appointment.TotalCost, Converter={StaticResource NumberToVisibilityConverter}}" />
                  <TextBlock Text="{Binding Appointment.TotalCost, Converter={StaticResource DecimalConverter}, ConverterParameter='0'}" Visibility="{Binding Appointment.TotalCost, Converter={StaticResource NumberToVisibilityConverter}}" />
              </StackPanel>
              <ToolTipService.ToolTip>
                  <ToolTip Content="{Binding Appointment.SummaryToolTip}" Style="{StaticResource MultiLine_ToolTip}" Visibility="{Binding Appointment.SummaryToolTip, Converter={StaticResource TextToVisibilityConverter}}" />
              </ToolTipService.ToolTip>
          </StackPanel>
      </Grid>
  </DataTemplate>

Regards,
Håkan

[Kalin]

Hello Håkan,

Yes, you could use the RadToolTipService instead of the regular one the following way:

<TextBlock Text="{Binding ...}"
            telerik:RadToolTipService.ToolTipContent="Test"
            telerik:RadToolTipService.ShowDuration="20000"
            telerik:RadToolTipService.IsEnabled="{Binding ...}" />

Also in order to style it you would need to set the following Style:

<Window.Resources>
    <Style TargetType="telerik:RadToolTip">
            ...
    </Style>
</Window.Resources>

Hope this helps.

Regards,
Kalin
Telerik

[Håkan]

Thanks Kalin, that worked fine!

One question though, how does the IsEnabled propery work?
If I bind it to an object that is false, it still shows the tooltip.

Regards,
Håkan

[Kalin]

Hello Håkan,

The property should be enabling/disabling the ToolTip. I have tested in a sample project, bound it to a property in the ViewModel and it was working as expected. Please check whether the binding is working correctly.

Hope this helps.

Regards,
Kalin
Telerik