custom tooltip with custom appointment collection

[Dan]

I have a collection of custom appointment objects bound to my scheduleView.  I created a datatemplate for the custom tooltip and applied to the tooltiptemplate property, however, the default tooltip is still displaying and not my custom data template.

<telerik:RadScheduleView x:Name="_scheduleView" Margin="2,0,0,0"
                                  RenderTransformOrigin="0.5,0.5"
                                  SelectedAppointment="{Binding SelectedStreamingEpisodeAppointment, Mode=TwoWay}"
                                  AppointmentsSource="{Binding StreamingEpisodeAppointments}"
                                  telerik:StyleManager.Theme="Windows7"
                                  SnapAppointments="True"
                                  MinAppointmentWidth="60" ToolTipTemplate="{StaticResource AppointmentToolTipTemplate}">

             <telerik:RadScheduleView.RenderTransform>
                 <TransformGroup>
                     <ScaleTransform />
                     <SkewTransform />
                     <RotateTransform />
                     <TranslateTransform />
                 </TransformGroup>
             </telerik:RadScheduleView.RenderTransform>
             <telerik:RadScheduleView.ViewDefinitions>
                                     <telerik:TimelineViewDefinition  MinorTickLength="1day"
                                                  MajorTickLength="1day"
                                                  TimerulerGroupStringFormat="{}{0:MM/dd/yyyy}"
                                                  MinTimeRulerExtent="1" MaxTimeRulerExtent="Infinity"
                     StretchAppointments="True" StretchGroupHeaders="True" />
             </telerik:RadScheduleView.ViewDefinitions>
             <telerik:RadScheduleView.GroupDescriptionsSource>
                 <telerik:GroupDescriptionCollection>
                     <telerik:DateGroupDescription/>
                 </telerik:GroupDescriptionCollection>
             </telerik:RadScheduleView.GroupDescriptionsSource>

         </telerik:RadScheduleView>

<DataTemplate x:Key="AppointmentToolTipTemplate">

               <Grid MaxWidth="300">

                   <Grid.ColumnDefinitions>

                       <ColumnDefinition Width="43" />

                       <ColumnDefinition />

                   </Grid.ColumnDefinitions>

                   <Grid.RowDefinitions>

                       <RowDefinition />

                       <RowDefinition />

                       <RowDefinition />

                   </Grid.RowDefinitions>

                   <TextBlock Text="{Binding Subject}" 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="/Fox.Fbc.Vps.PL.Resources;component/Images/AcrossTime.png" Width="28" Height="29" />

                   <StackPanel Orientation="Vertical" Grid.Column="1" Grid.Row="1" Margin="0 5 0 0">

                       <StackPanel Orientation="Horizontal" Margin="0 0 0 0">

                           <TextBlock Text="{Binding Start, StringFormat='hh:mm tt'}" TextWrapping="Wrap" FontSize="10" />

                           <TextBlock Text=" - " FontSize="10" />

                           <TextBlock Text="{Binding End, StringFormat='hh:mm tt'}" TextWrapping="Wrap" FontSize="10" />

                       </StackPanel>

                       <TextBlock Text="{Binding Start, StringFormat='dddd dd MMM yyyy'}" Margin="0 3" FontSize="10" />

                   </StackPanel>

                   <TextBlock Grid.Row="2" Grid.ColumnSpan="2" Text="{Binding Body}" Margin="5 3 5 8" TextWrapping="Wrap"  />

               </Grid>

           </DataTemplate>



[Dan]

I'm using latest version of controls

[Dan]

It seems that even if you set a custom tooltip template, if you have a tooltip style defined in your application styles or theme etc, setting the tooltiptemplate does not override that implicit style.  Can someone shed some light on this

[Konstantina]

Hi Dan,

I tested your code and seems that the ToolTipTemplate applies correctly. If there are any implicit styles they should be overriden by the explicit you are setting through the property. Could you please send us your project, so that we can run it here locally and review it. In that way we will be able to provide you with solution in a timely manner.

Regards,
Konstantina
the Telerik team

[Dan]

If I have a content control with a custom tooltip resource defined and then I add a usercontrol (which contains my scheduleView with its own custom tooltip) the tooltip template that gets displayed comes from the content control and is not overriden by the custom tooltip on the schedule view. 

<ContentControl x:Name="_contentControl" >
       <ContentControl.Resources>
           <Style TargetType="ToolTip">
               <Setter Property="Foreground"
                               Value="White" />
               <Setter Property="Padding"
                               Value="5,0" />
               <Setter Property="BorderBrush"
                               Value="Black" />
               <Setter Property="Placement"
                               Value="Top" />
               <Setter Property="Content"
                               Value="ToolTip" />
               <Setter Property="Template">
                   <Setter.Value>
                       <ControlTemplate TargetType="ToolTip">
                           <Grid x:Name="RootElement">
                               <VisualStateManager.VisualStateGroups>
                                   <VisualStateGroup x:Name="CommonStates">
                                       <VisualState x:Name="Normal" />
                                       <VisualState x:Name="MouseOver" />
                                       <VisualState x:Name="Disabled" />
                                       <VisualState x:Name="ReadOnly" />
                                   </VisualStateGroup>
                                   <VisualStateGroup x:Name="FocusStates">
                                       <VisualState x:Name="Focused" />
                                       <VisualState x:Name="Unfocused" />
                                   </VisualStateGroup>
                               </VisualStateManager.VisualStateGroups>

                               <Path Width="80"
                                               Height="46"
                                               Stroke="Black"
                                               StrokeThickness="2"
                                               Stretch="Fill"
                                               Data="M0,21.1 A21.1,21.1,0,0,1,21.1,0 L31.66,0 79.14,0 168.83,0 A21.1,21.1,0,
                               0,1,189.93,21.1 L189.93,73.86 189.93,105.52 A21.1,21.1,0,0,1,168.83,126.62 L79.14,
                               126.62 37.410453,176.59819 31.66,126.62 21.1,126.62 A21.1,21.1,0,0,1,0,105.52 L0,105.52 0,73.86 z">

                                   <Path.Fill>
                                       <LinearGradientBrush EndPoint="0.5,1"
                                                                       StartPoint="0.5,0">
                                           <GradientStop Color="Black"
                                                                   Offset="0" />
                                           <GradientStop Color="#FF2F2F2F"
                                                                   Offset="1" />
                                       </LinearGradientBrush>
                                   </Path.Fill>

                                   <Path.Effect>
                                       <DropShadowEffect ShadowDepth="4"
                                                                   Opacity="0.5"
                                                                   BlurRadius="4" />
                                   </Path.Effect>
                               </Path>


                               <ContentPresenter x:Name="contentPresenter"
                                                           HorizontalAlignment="Center"
                                                           VerticalAlignment="Center"
                                                           TextBlock.Foreground="White"
                                                           RenderTransformOrigin="0.5,0.5"
                                                           Content="{TemplateBinding Content}"
                                                           Margin="10,10,10,25" />

                           </Grid>
                       </ControlTemplate>
                   </Setter.Value>
               </Setter>
           </Style>
       </ContentControl.Resources>
   </ContentControl>

Content property of contentcontrol gets set to usercontrol that has schedule view

<UserControl x:Class="CustomToolTipTest.ScheduleView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.ScheduleView"
             xmlns:Controls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls" mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>
        <DataTemplate x:Key="AppointmentToolTipTemplate">

            <Grid MaxWidth="300">

                <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="43" />

                    <ColumnDefinition />

                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>

                    <RowDefinition />

                    <RowDefinition />

                    <RowDefinition />

                </Grid.RowDefinitions>

                <TextBlock Text="{Binding Subject}" 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="/Fox.Fbc.Vps.PL.Resources;component/Images/AcrossTime.png" Width="28" Height="29" />-->

                <StackPanel Orientation="Vertical" Grid.Column="1" Grid.Row="1" Margin="0 5 0 0">

                    <StackPanel Orientation="Horizontal" Margin="0 0 0 0">

                        <TextBlock Text="{Binding Start, StringFormat='hh:mm tt'}" TextWrapping="Wrap" FontSize="10" />

                        <TextBlock Text=" - " FontSize="10" />

                        <TextBlock Text="{Binding End, StringFormat='hh:mm tt'}" TextWrapping="Wrap" FontSize="10" />

                    </StackPanel>

                    <TextBlock Text="{Binding Start, StringFormat='dddd dd MMM yyyy'}" Margin="0 3" FontSize="10" />

                </StackPanel>

                <TextBlock Grid.Row="2" Grid.ColumnSpan="2" Text="{Binding Body}" Margin="5 3 5 8" TextWrapping="Wrap"  />

            </Grid>

        </DataTemplate>
    </UserControl.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="20"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="20"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="20"/>
        </Grid.RowDefinitions>
        <TextBlock Text="Appointments"/>
        <telerik:RadScheduleView Grid.Row="1" x:Name="_scheduleView" Margin="2,0,0,0"

                                  RenderTransformOrigin="0.5,0.5"

                                  AppointmentsSource="{Binding Appointments}"

                                  Controls:StyleManager.Theme="Windows7"

                                  SnapAppointments="True"

                                  MinAppointmentWidth="60" ToolTipTemplate="{StaticResource AppointmentToolTipTemplate}">



            <telerik:RadScheduleView.RenderTransform>

                <TransformGroup>

                    <ScaleTransform />

                    <SkewTransform />

                    <RotateTransform />

                    <TranslateTransform />

                </TransformGroup>

            </telerik:RadScheduleView.RenderTransform>

            <telerik:RadScheduleView.ViewDefinitions>

                <telerik:TimelineViewDefinition  MinorTickLength="1day"

                                                  MajorTickLength="1day"

                                                  TimerulerGroupStringFormat="{}{0:MM/dd/yyyy}"

                                                  MinTimeRulerExtent="1" MaxTimeRulerExtent="Infinity"

                     StretchAppointments="True" StretchGroupHeaders="True" />

            </telerik:RadScheduleView.ViewDefinitions>

            <telerik:RadScheduleView.GroupDescriptionsSource>

                <telerik:GroupDescriptionCollection>

                    <telerik:DateGroupDescription/>

                </telerik:GroupDescriptionCollection>

            </telerik:RadScheduleView.GroupDescriptionsSource>



        </telerik:RadScheduleView>


        <Button Content="Load Data" Grid.Row="4" Click="Button_Click"/>
    </Grid>
</UserControl>

[Dani]

Hello Dan,

Your style and data template are correctly placed. The problem comes from the fact that your style is missing a TemplateBinding for the ContentTemplate. Since this binding is missing, the ContentPresenter of the style simply displays the content without applying your custom ContentTemplate.

The ContentPresenter should look like this:

<ContentPresenter x:Name="contentPresenter"
     HorizontalAlignment="Center"
     VerticalAlignment="Center"
     TextBlock.Foreground="{TemplateBinding Foreground}"
     RenderTransformOrigin="0.5,0.5"
     Content="{TemplateBinding Content}"
     ContentTemplate="{TemplateBinding ContentTemplate}"
     Margin="10,10,10,25" />

I hope this will be helpful.


Kind regards,
Dani
the Telerik team