custom tooltip with custom appointment collection

6 posts, 1 answers
  1. Dan
    Dan avatar
    22 posts
    Member since:
    Jun 2011

    Posted 09 Feb 2012 Link to this post

    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>

  2. Dan
    Dan avatar
    22 posts
    Member since:
    Jun 2011

    Posted 09 Feb 2012 Link to this post

    I'm using latest version of controls
  3. UI for WPF is Visual Studio 2017 Ready
  4. Dan
    Dan avatar
    22 posts
    Member since:
    Jun 2011

    Posted 12 Feb 2012 Link to this post

    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
  5. Konstantina
    Admin
    Konstantina avatar
    2332 posts

    Posted 16 Feb 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  6. Dan
    Dan avatar
    22 posts
    Member since:
    Jun 2011

    Posted 22 Feb 2012 Link to this post

    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:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 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>

  7. Answer
    Dani
    Admin
    Dani avatar
    848 posts

    Posted 24 Feb 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Back to Top
UI for WPF is Visual Studio 2017 Ready