我只需要一个显示多行的简单WPF工具提示样式

时间:2012-06-18 21:13:08

标签: wpf styles tooltip

由于所有关于花哨,超级,巨大和哇哇,哇哇,哇哇,工具提示的噪音,我找不到答案。

我只需要一个设置TextWrapping="Wrap"的简单样式,并允许我设置宽度。

复制现有/默认样式,但只是换行。

3 个答案:

答案 0 :(得分:8)

<Window.Resources>
    <Style TargetType="{x:Type ToolTip}">
        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <TextBlock TextWrapping="Wrap" Text="{Binding}" />
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Grid>
    <Rectangle Width="100" Height="100" Fill="Red">
        <Rectangle.ToolTip>
            <ToolTip Width="100">
                This is some text with text wrapping.
            </ToolTip>
        </Rectangle.ToolTip>
    </Rectangle>
</Grid>

此示例假设您希望能够基于每次使用设置宽度。如果要将其设置为样式的一部分,请将其添加到TextBlock元素。

答案 1 :(得分:3)

此样式可防止工具提示弹出空字符串。

<Style TargetType="ToolTip">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToolTip">
                <TextBlock Text="{TemplateBinding Content}"
                           MaxWidth="400"
                           TextWrapping="Wrap"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="Content" Value="">
            <Setter Property="Visibility" Value="Collapsed" />
        </Trigger>
    </Style.Triggers>
</Style>

或使用ContentTemplate:

<Style TargetType="{x:Type ToolTip}">
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <StackPanel>
                    <TextBlock Text="{Binding}"
                               MaxWidth="400"
                               TextWrapping='Wrap' />
                </StackPanel>
            </DataTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="Content" Value="">
            <Setter Property="Visibility" Value="Collapsed" />
        </Trigger>
    </Style.Triggers>
</Style>

答案 2 :(得分:2)

如果您只想获得以下效果,请阅读this post

enter image description here enter image description here enter image description here