Search code examples
c#xamltooltipwin-universal-app

UWP - Creating a data bound tooltip on an image in xaml


I have a data driven hub section that is populating the image just fine. The view model contains text I would like to show as a tooltip, but can't quite figure it out.

Here's the important snippet:

<HubSection x:Uid="MyHub" x:Name="MyHubSection" Width="311">
   <HubSection.Header>
      <TextBlock x:Uid="HubMSectionHeader" 
                 Style="{StaticResource MainHubSectionHeaderStyle}" Text="Friends"/>
   </HubSection.Header>
   <DataTemplate>
      <StackPanel>
         <Button x:Name="InviteButton" Content="Send Invite" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Click="InviteButton_Click"/>
         <StackPanel >
            <Grid>
               <GridView ItemsSource="{Binding Friends}"  Background="{ThemeResource HubBackground}" x:Name="FriendGrid" >
                   <GridView.ItemTemplate >
                       <DataTemplate>
                           <Image Source="{Binding ProfilePhotoBitmap, Mode=TwoWay}" Height="100" Opacity="1" Stretch="Uniform" Tapped="Friend_Tapped"/>
                            <ToolTipService.ToolTip>
                                <TextBlock Text="{Binding FullName}"/>
                            </ToolTipService.ToolTip>
                         </DataTemplate>
                     </GridView.ItemTemplate>
                  </GridView>
               </Grid>
            </StackPanel>
         </StackPanel>
      </DataTemplate>
   </HubSection>

Solution

  • I am wondering why the Tooltip service code is outside of the image control could you try inside image control and let me know whether it works or not? modified code snipet will be

    <Image Source="{Binding ProfilePhotoBitmap, Mode=TwoWay}" Height="100" Opacity="1" Stretch="Uniform" Tapped="Friend_Tapped">
                <ToolTipService.ToolTip>
                    <TextBlock Text="{Binding FullName}"/>
                </ToolTipService.ToolTip>
                </Image>