首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >几秒钟后展开工具提示

几秒钟后展开工具提示
EN

Stack Overflow用户
提问于 2018-08-03 16:45:25
回答 2查看 692关注 0票数 6

我想做一个工具提示,它会在用户聚焦几秒钟后自动扩展。

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

之前:

之后:

这里有我的一些测试代码。两个按钮,一个有一个标准的工具提示,我想放在开始位置,第二个有展开的内容。如何将其转换为一个?

代码语言:javascript
运行
复制
 <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>

最后一个问题,如何在转换工具提示的同时进行“扩展”转换?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-08-03 17:44:00

尝试使用带有延迟显示控件的自定义样式。

代码语言:javascript
运行
复制
    <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)之后,它显示图像。可以将样式更改为稍后要显示的其他控件所使用的样式。

票数 4
EN

Stack Overflow用户

发布于 2018-08-03 17:33:20

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

代码语言:javascript
运行
复制
<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事件添加一个处理程序:

代码语言:javascript
运行
复制
<Rectangle Width="1000" Height="800" Fill="Blue">
    <Rectangle.ToolTip>
        <ContentPresenter Name="theToolTip" Loaded="ToolTip_Loaded" />
    </Rectangle.ToolTip>
</Rectangle>

回到代码隐藏中,您需要创建一个DispatcherTimer,它将在调用Loaded函数时激活;此函数还会将模板设置为小模板。当计时器触发时,您只需停止它并设置更大的模板:

代码语言:javascript
运行
复制
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来解决这个问题)。

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51668669

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档