将控件浮动到 WPF 中的其他控件之上答案

【问题标题】：Float a control over other controls in WPF将控件浮动到 WPF 中的其他控件之上
【发布时间】：2010-12-25 18:31:23
【问题描述】：

我什至很难说出这个问题。

我在我的 UI 中的 ListBox 中向用户显示预览图像。当用户将鼠标悬停在图像上时，我想将其展开以便用户可以看到更多细节。

我已经到了可以“弹出”图像的地步，但它当然仍在布局中的正常位置内，这意味着图像不会显示在它附近的其他控件之上，它只出现在它之前呈现的控件之上和之后呈现的控件之下。它也被 ListBox 的边界裁剪。

是否有一种简单（即不开发自定义控件）的方法可以暂时从视觉布局中移除该图像并将其置于所有其他元素之上？

这是一个糟糕的演示应用程序，它显示了我在说什么：

请注意，缩放后的图像被 ListBox 的边界裁剪（列表框外部为红色）。此外，请注意，在缩放图像之后呈现的 UI 元素仍然覆盖它——后面出现的图标和项目名称（“项目 5”和左下角的其他内容）。

【问题讨论】：

标签： .net wpf controls

【解决方案1】：

如果您正在寻找简单的东西，您还可以为包含较大版本的图像的图像（或 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

【讨论】：

老兄……太棒了。现在打算试试这个。

【解决方案2】：

最适合我的解决方案是使用 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>

在这个 sn-p 中，直到 IsMouseOver 为其图像（命名为“图标”）为真时才会打开弹出窗口。当鼠标进入图像时，会发生两件事。弹出窗口打开（640x640）并显示图像（48 像素 x 48 像素）。这张图片上有一个比例变换。 “图标”图像还有一个用于 MouseEnter 和 MouseLeave 的故事板。此情节提要使用双重动画，针对弹出图像的 ScaleTransform。这个情节提要在鼠标进入时放大图像，在鼠标离开时缩小图像，并具有很好的缓动功能。

用例是：“用户会看到一个列表框，其中包含列表中每个项目的小图像。当用户将鼠标悬停在小图像（图标）上时，它会向前弹起并放大，让用户更好地查看图像。当鼠标离开图像时，它会缩小到原来的大小。"

【讨论】：

【解决方案3】：

这种效果通常被称为鱼眼。使用该术语搜索资源可能会更好。这是一个示例。 http://www.codeproject.com/KB/menus/FishEyeMenu.aspx

【讨论】：