UI元素的扩展工具提示

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了UI元素的扩展工具提示相关的知识,希望对你有一定的参考价值。

我有工具提示的问题,需要一些帮助。我想为所有工具提示创建自定义设计,添加页眉和页脚。

因为它应该是我创建附加属性的默认工具提示样式/模板,所以在所有UI元素上设置页眉和页脚的值。

public class ToolTipExtensions
{
    public static readonly DependencyProperty HeaderProperty = DependencyProperty.RegisterAttached("Header",
        typeof(string), typeof(ToolTipExtensions), new PropertyMetadata(null));

    public static readonly DependencyProperty FooterProperty = DependencyProperty.RegisterAttached("Footer",
        typeof(string), typeof(ToolTipExtensions), new PropertyMetadata(null));

    public static void SetHeader(UIElement element, string value)
    {
        element.SetValue(HeaderProperty, value);
    }

    public static string GetHeader(UIElement element)
    {
        return (string)element.GetValue(HeaderProperty);
    }

    public static void SetFooter(UIElement element, string value)
    {
        element.SetValue(FooterProperty, value);
    }

    public static string GetFooter(UIElement element)
    {
        return (string)element.GetValue(FooterProperty);
    }
}

我使用以下风格。

<Style TargetType="{x:Type ToolTip}">
    <Setter Property="MinHeight" Value="150" />
    <Setter Property="Width" Value="350" />
    <Setter Property="Foreground" Value="Black" />
    <Setter Property="Background" Value="#ECEFF4" />
    <Setter Property="BorderBrush" Value="#394F6D" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToolTip}">
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,1">
                    <Grid Background="{TemplateBinding Background}">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="40" />
                            <RowDefinition Height="*" />
                            <RowDefinition Height="30" />
                        </Grid.RowDefinitions>

                        <Label
                            Grid.Row="0"
                            MinHeight="40"
                            Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(local:ToolTipExtensions.Header)}"
                            FontFamily="Arial"
                            FontSize="13"
                            FontWeight="Bold"
                            Foreground="{TemplateBinding Foreground}" />

                        <TextBlock
                            Grid.Row="1"
                            MinHeight="40"
                            Foreground="{TemplateBinding Foreground}"
                            Text="{Binding ToolTip, RelativeSource={RelativeSource Mode=TemplatedParent}}" />

                        <Label
                            Grid.Row="2"
                            MinHeight="30"
                            Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(local:ToolTipExtensions.Footer)}"
                            FontFamily="Arial"
                            FontSize="12"
                            FontStyle="Italic"
                            FontWeight="Regular" />
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我做错了,因为工具提示没有显示任何内容。没有工具提示,没有标题,没有页脚。问题是什么? ToolTip的DataContext错误?

继承人用法:

<Button
    local:ToolTipExtensions.Header="Button"
    local:ToolTipExtensions.Footer="To show additional Info"
    Content="Test"
    ToolTip="Some fancy Text"
    ToolTipService.InitialShowDelay="500"
    ToolTipService.ShowDuration="999999999" />

问候,

Syluu

答案

将更新每个控件的工具提示

改良风格

<VM:DependecnyObjectTypeConverter x:Key="ConverterPa"/>
    <Style TargetType="{x:Type ToolTip}">
        <Setter Property="MinHeight" Value="150" />
        <Setter Property="Width" Value="350" />
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="Background" Value="#ECEFF4" />
        <Setter Property="BorderBrush" Value="#394F6D" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,1">
                        <Grid Background="{TemplateBinding Background}">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="40" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="30" />
                            </Grid.RowDefinitions>

                            <Label
                        Grid.Row="0"
                        MinHeight="40"
                        Content="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},Converter={StaticResource ConverterPa},ConverterParameter=Header}"
                        FontFamily="Arial"
                        FontSize="13"
                        FontWeight="Bold"
                        Foreground="{TemplateBinding Foreground}" />

                            <TextBlock
                        Grid.Row="1"
                        MinHeight="40"
                        Foreground="{TemplateBinding Foreground}"
                        Text="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},Converter={StaticResource ConverterPa},ConverterParameter=ToolTip}"/>
                            <Label
                        Grid.Row="2"
                        MinHeight="30"
                       Content="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},Converter={StaticResource ConverterPa},ConverterParameter=Footer}"
                        FontFamily="Arial"
                        FontSize="12"
                        FontStyle="Italic"
                        FontWeight="Regular" />
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

的IValueConverter:

  public class DependecnyObjectTypeConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var plTarget = value as System.Windows.Controls.ToolTip;
            if (parameter.ToString() == "Header")
            {
                return plTarget.PlacementTarget.GetValue(ToolTipExtensions.HeaderProperty);
            }
            if (parameter.ToString() == "ToolTip")
            {
                return plTarget.PlacementTarget.GetValue(Control.ToolTipProperty);
            }
            if (parameter.ToString() == "Footer")
            {
                return plTarget.PlacementTarget.GetValue(ToolTipExtensions.HeaderProperty);
            } 
            return null;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

以上是关于UI元素的扩展工具提示的主要内容,如果未能解决你的问题,请参考以下文章

如何创建工具提示?

如何检查 JQuery UI 工具提示?

如何从 Android 中的 Fragment 访问 UI 元素?

从 fragmentActivity 刷新片段 UI

Angular UI-Select:如何为文本溢出添加工具提示?

jQuery UI 工具提示不支持 html 内容