Как добавить пользовательскую подсказку для элементов списка

Question

У меня есть меню гамбургеров со списком ListBox (Изображение и название элемента меню), я привязываю список этих данных (изображения и названия) к ListBox, Upto его прекрасный, Я хочу показать всплывающую подсказку с элементом. Текст заголовка (при наведении указателя мыши на изображение) с фоном Teal

Answer 1

Если вы хотите показать всплывающую подсказку в своем ListViewItem, добавьте ToolTipService Like Below.

<ListViewItem Content="Hello" ToolTipService.Placement="Bottom" > 
    <ToolTipService.ToolTip> 
     <Grid> 
      <Rectangle Fill="Teal" /> 
      <TextBlock Text="Hello" Foreground="White" Margin="10"/> 
     </Grid> 
    </ToolTipService.ToolTip> 
</ListViewItem> 

Если вы хотите сделать это в DataTemplate

<DataTemplate > 
    <ToolTipService.ToolTip> 
     <Grid> 
      <Rectangle Fill="Teal" /> 
      <TextBlock Text="Hello" Foreground="White" Margin="10"/> 
     </Grid> 
    </ToolTipService.ToolTip> 
</DataTemplate> 

Теперь вы можете заметить, что инструмент Совет покажет вам текст с Teal фона. Проблема в том, что у вас все еще есть выцветшая белая рамка вокруг фона Teal.

Чтобы это исправить, добавить below к вашему Application.Resources в App.xaml

<Application.Resources> 
    <!-- Default style for Windows.UI.Xaml.Controls.ToolTip --> 
    <Style TargetType="ToolTip"> 
     <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" /> 
     <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" /> 
     <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundChromeHighBrush}" /> 
     <Setter Property="BorderThickness" Value="{ThemeResource ToolTipBorderThemeThickness}" /> 
     <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" /> 
     <Setter Property="FontSize" Value="{ThemeResource ToolTipContentThemeFontSize}" /> 
     <Setter Property="Padding" Value="0" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="ToolTip"> 
        <ContentPresenter x:Name="LayoutRoot" 
        BorderThickness="{TemplateBinding BorderThickness}" 
        Background="{TemplateBinding Background}" 
        BorderBrush="{TemplateBinding BorderBrush}" 
        MaxWidth="320" 
        Content="{TemplateBinding Content}" 
        ContentTransitions="{TemplateBinding ContentTransitions}" 
        ContentTemplate="{TemplateBinding ContentTemplate}" 
        Padding="{TemplateBinding Padding}" 
        TextWrapping="Wrap" > 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="OpenStates"> 
           <VisualState x:Name="Closed"> 
            <Storyboard> 
             <FadeOutThemeAnimation TargetName="LayoutRoot" /> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Opened"> 
            <Storyboard> 
             <FadeInThemeAnimation TargetName="LayoutRoot" /> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
        </ContentPresenter> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</Application.Resources> 

Если вы заметили, я изменил Padding к 0.