Question

我想制作一个工具提示，该提示将在用户聚焦几秒钟后自动扩展。

不知道如何准确地描述这一点，但是有了一个完美的例子。这是AutoCAD Architecture 2014中使用的工具提示。将鼠标移到任何按钮上时，都会出现一个典型的工具提示。但是在将鼠标按住此处2-3秒后，工具提示会自动扩展为更大的鼠标。这是屏幕截图之前和之后的内容：

之前：

之后：

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

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

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

Answer 1

首先为您的工具提示声明几个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>

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

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

在代码后面，您需要创建一个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;
}

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

Answer 2

尝试使用自定义样式，该样式会延迟显示控件。

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

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

几秒钟后展开工具提示

2 个答案: