几秒钟后扩展工具提示

I want to make a tooltip that will expand itself after a few seconds of users focus.

我想制作一个工具提示，在几秒钟的用户关注后会自我扩展。

Don't know how to exactly describe this, but got a perfect example. This is a tooltip that is used in AutoCAD Architecture 2014. When I move the mouse over any button, a typical tooltip appears. But after 2-3 seconds of holding the mouse here, the tooltip expands itself into a bigger one. Here are before and after screenshots:

不知道如何准确地描述这一点，但得到了一个完美的例子。这是AutoCAD Architecture 2014中使用的工具提示。当我将鼠标移到任何按钮上时，会出现典型的工具提示。但是在这里按住鼠标2-3秒后，工具提示会将自身扩展为更大的一个。以下是截图前后：

Before:

之前：

After:

后：

And some of my test code here. Two buttons, one with a standard tooltip that I want to be at the beginning and the second with its expanded content. How to convert it into one?

还有我的一些测试代码。两个按钮，一个带有标准工具提示，我想要在开头，第二个带有扩展内容。如何将其转换为一个？

 <StackPanel>
    <Button Content="Advanced" Height="50" Width="150" TextBlock.FontSize="20">
        <Button.ToolTip>
            <TextBlock Text="Test"/>
        </Button.ToolTip>
    </Button>
    <Button Height="50" Width="150" Content="Advanced 2" TextBlock.FontSize="20">
        <Button.ToolTip>
            <StackPanel Height="200" Width="200">
                <StackPanel Height="30" Width="200" Orientation="Horizontal"/>
                <Image VerticalAlignment="Top" Width="30" Height="30" Source="C:\tmp\ask.png" Name="image1"/>
                <TextBlock Text="Here will be some more text."/>
            </StackPanel>
        </Button.ToolTip>
    </Button>

</StackPanel>

And the last one, how to make an 'expanding' transition while transforming the tooltip?

最后一个，如何在转换工具提示的同时进行“扩展”转换？

2 个解决方案

#1

Start by declaring a couple of DataTemplates for your tooltips:

首先为您的工具提示声明几个DataTemplates：

<Window.Resources>

    <DataTemplate x:Key="SmallToolTip">
        <TextBlock Text="Hello World!" FontSize="12" />
    </DataTemplate>

    <DataTemplate x:Key="LargeToolTip">
        <TextBlock Text="Hello World!" FontSize="50" />
    </DataTemplate>

</Window.Resources>

Now set the tooltip on your control to be a ContentPresenter, and add a handler for the Loaded event:

现在将控件上的工具提示设置为ContentPresenter，并为Loaded事件添加处理程序：

<Rectangle Width="1000" Height="800" Fill="Blue">
    <Rectangle.ToolTip>
        <ContentPresenter Name="theToolTip" Loaded="ToolTip_Loaded" />
    </Rectangle.ToolTip>
</Rectangle>

Back in your code-behind you need to create a DispatcherTimer which you'll activate when the Loaded function is invoked; this function will also set the template to the small one. When the timer fires you simply stop it and set the larger template:

回到代码隐藏中，你需要创建一个DispatcherTimer，当调用Loaded函数时你将激活它;此功能还将模板设置为小模板。当计时器触发时，您只需将其停止并设置较大的模板：

private DispatcherTimer Timer;

public MainWindow()
{
    InitializeComponent();

    // set up the timer
    this.Timer = new DispatcherTimer();
    this.Timer.Interval = TimeSpan.FromSeconds(3);
    this.Timer.Tick += Timer_Tick;
}

private void ToolTip_Loaded(object sender, RoutedEventArgs e)
{
    theToolTip.ContentTemplate = this.Resources["SmallToolTip"] as DataTemplate;
    this.Timer.Start();
}

private void Timer_Tick(object sender, EventArgs e)
{
    this.Timer.Stop();
    theToolTip.ContentTemplate = this.Resources["LargeToolTip"] as DataTemplate;
}

I'm using plain-vanilla WPF here, but it's also easy to do in MVVM. In that case you simply bind the Loaded event to a command in your viewmodel (EventToCommand or whatever) and have both that handler and the timer handler toggle a boolean property indicating whether the tooltip should be large or small. Then back in your view you simply use a DataTrigger to set the appropriate template. (In practice it's a little bit more tricky, because tooltips aren't actually part of the "regular" visual tree and thus don't inherit the parent control's DataContent, but you can usually work around that by using a BindingProxy).

我在这里使用普通的WPF，但在MVVM中也很容易。在这种情况下，您只需将Loaded事件绑定到viewmodel中的命令（EventToCommand或其他），并让该处理程序和计时器处理程序切换一个布尔属性，指示工具提示应该是大还是小。然后返回到您的视图中，您只需使用DataTrigger设置适当的模板。（实际上它有点棘手，因为工具提示实际上并不是“常规”可视化树的一部分，因此不会继承父控件的DataContent，但是你通常可以通过使用BindingProxy来解决这个问题）。

#2

Try using a custom style that displays the control with a delay.

尝试使用显示控件的自定义样式。

    <Window.Resources>

    <Style TargetType="Image" x:Key="DelayShowImage">
        <Setter Property="Visibility" Value="Collapsed"/>
        <Style.Triggers>
            <DataTrigger Binding="{Binding IsVisible, RelativeSource={RelativeSource AncestorType=StackPanel}}" Value="true">
                <DataTrigger.EnterActions>
                    <BeginStoryboard x:Name="VisibleStory">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
                                   Duration="0"
                                   BeginTime="0:0:02">
                                <DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
                <DataTrigger.ExitActions>
                    <RemoveStoryboard BeginStoryboardName="VisibleStory"/>
                </DataTrigger.ExitActions>
            </DataTrigger>
        </Style.Triggers>
    </Style>

</Window.Resources>

 <StackPanel>
        <Button Content="Advanced" Height="50" Width="150" TextBlock.FontSize="20">
            <Button.ToolTip>
                <TextBlock Text="Test"/>
            </Button.ToolTip>
        </Button>
        <Button Height="50" Width="150" Content="Advanced 2" TextBlock.FontSize="20">

            <Button.ToolTip>
                <StackPanel Height="200" Width="200">
                    <StackPanel Height="30" Width="200" Orientation="Horizontal"/>
                    <Image VerticalAlignment="Top" Width="30" Height="30" Source="C:\tmp\ask.png"  Name="image1"
                           Style="{StaticResource DelayShowImage}"/>
                    <TextBlock Text="Here will be some more text."/>
                </StackPanel>
            </Button.ToolTip>
        </Button>
    </StackPanel>

The code from above, displays the Tooltip in the second button, and after 2000ms(0:0:02), it displays the image. You can change the style to be used by a different control that you want to display later.

上面的代码在第二个按钮中显示工具提示，在2000ms（0：0：02）之后显示图像。您可以更改要在以后显示的其他控件使用的样式。

#1