Question

我有一个带有ListBox的汉堡菜单，（菜单项的图像和标题），我将这些数据的列表（图像和标题）绑定到ListBox，它很好，我想显示一个带有项目的工具提示带有蓝绿色背景的标题文本（在鼠标悬停在图像上）

Answer 1

如果您想在ListViewItem上显示工具提示，请添加ToolTipService如下所示。

<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>

现在您可以注意到工具提示将显示带有深青色背景的文本。问题是你的蓝绿色背景周围仍然有一个褪色的白色边框。

要更正此问题，请将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。

如何为列表框项添加自定义工具提示

1 个答案: