代码之家 › 专栏 › 技术社区 › Will

在WPF中对其他控件浮动一个控件

order controls wpf .net

Will · 技术社区 · 15 年前

我连这个问题的措词都很难。

我正在列表框中向我的用户界面中的用户显示预览图像。当用户将鼠标悬停在图像上时,我想展开它,以便用户可以看到更多细节。

我已经到了可以“弹出”图像的位置,但是它在布局中仍然处于其正常位置,这意味着它不会显示在它附近其他控件的顶部,而是只显示在它之前呈现的控件的顶部和之后呈现的控件的下面。它也被列表框的边界裁剪。

是否有一种简单的(即没有自定义控件开发)方法临时从可视布局中删除该图像并将其置于所有其他元素之上?

下面是一个蹩脚的演示应用程序,它显示了我所说的内容:

Description of the issue

请注意,缩放后的图像被列表框的边界剪切(列表框外部为红色)。另外,请注意,在缩放图像之后呈现的UI元素仍然会覆盖它——包括后面出现的图标和项目名称(“项目5”和其他在左下角看到的图标)。

3 回复 | 直到 13 年前

Ben Collier 15 年前

如果要查找简单的内容,还可以为包含较大版本图像的图像(或ListBoxItem)创建工具提示。当用户将鼠标悬停在图像的较小版本上时,它将像普通工具提示一样显示。下面是一个例子:

<Image Width="100">
    <Image.Source>
        <BitmapImage UriSource="pack://application:,,/smiley.jpg"/>
    </Image.Source>
    <Image.ToolTip>
        <Image Width="500">
            <Image.Source>
                <BitmapImage UriSource="pack://application:,,/smiley.jpg"/>
            </Image.Source>
        </Image>
    </Image.ToolTip>
</Image>

效果与您描述的类似,只是菜单项仍然存在,但也显示了更大的版本,如下所示:

alt text http://img695.imageshack.us/img695/4525/tooltipenlarge.png

Will 14 年前

最适合我的解决方案是使用popup原语。在动画方面,它没有提供太多的控制方式(它附带了股票动画),但您可以根据自己的喜好对其内容进行动画制作。

<Image
    Name="icon"
    Source="{Binding MaiImaeg}">
  <Image.Triggers>
    <EventTrigger
        RoutedEvent="Image.MouseEnter">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
              Storyboard.TargetName="tranny"
              Storyboard.TargetProperty="ScaleX"
              To="6"
              Duration="0:0:1">
            <DoubleAnimation.EasingFunction>
              <ElasticEase
                  Oscillations="1"
                  Springiness="8" />
            </DoubleAnimation.EasingFunction>
          </DoubleAnimation>
          <DoubleAnimation
              Storyboard.TargetName="tranny"
              Storyboard.TargetProperty="ScaleY"
              To="6"
              Duration="0:0:1">
            <DoubleAnimation.EasingFunction>
              <ElasticEase
                  Oscillations="1"
                  Springiness="8" />
            </DoubleAnimation.EasingFunction>
          </DoubleAnimation>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
    <EventTrigger
        RoutedEvent="Image.MouseLeave">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
              Storyboard.TargetName="tranny"
              Storyboard.TargetProperty="ScaleX"
              To="0"
              Duration="0:0:0" />
          <DoubleAnimation
              Storyboard.TargetName="tranny"
              Storyboard.TargetProperty="ScaleY"
              To="0"
              Duration="0:0:0" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Image.Triggers>
</Image>
<Popup
    Name="popup"
    IsOpen="{Binding IsMouseOver, ElementName=icon, Mode=OneWay}"
    PlacementTarget="{Binding ElementName=icon}"
    Placement="Left"
    Width="640"
    Height="640"
    StaysOpen="true"
    AllowsTransparency="True">
    <Image
       Width="48"
       Height="48"
       Source="{Binding MaiImaeg}">
       <Image.RenderTransform>
           <ScaleTransform
                x:Name="tranny"
                CenterX="48"
                CenterY="24"
                ScaleX="1"
                ScaleY="1" />
        </Image.RenderTransform>
    </Image>
</Popup>

在这段代码中,弹出窗口直到 IsMouseOver 它的图像(名为“图标”)为真。当鼠标进入图像时,会发生两件事。弹出窗口打开(640x640),显示图像(48px×48px)。此图像上有一个比例变换。“icon”图像还有一个用于mouseenter和mouseleave的故事板。这个故事板使用双动画,针对弹出图像的缩放转换。这个故事板在鼠标进入时放大图像,在鼠标离开时缩小图像,具有很好的放松功能。

用例是:“向用户提供了一个列表框,其中为列表中的每个项目提供了小图像。当用户将鼠标悬停在小图像(图标)上时,它会向前移动并放大,从而为用户提供更好的图像视图。当鼠标离开图像时,它会缩小回原来的大小。”

regentgal 15 年前

这种效应经常被称为鱼眼。使用该术语搜索资源可能会有更好的运气。这是一个样品。 http://www.codeproject.com/KB/menus/FishEyeMenu.aspx