Question

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

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

我已经达到可以“弹出”图像的程度，但当然它仍处于布局中的正常位置，这意味着图像显示在其附近的其他控件的顶部，它只出现在它之前渲染的控件的顶部和它之后渲染的控件之上。它也被ListBox的边界裁剪。

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

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

Description of the issue

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

Answer 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

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

在此代码段中，只有IsMouseOver为其图像（名为“图标”）为真，弹出窗口才会打开。当鼠标进入图像时，会发生两件事。 Popup打开（640x640）并显示图像（48px×48px）。该图像具有缩放变换。 “icon”图像还有一个MouseEnter和MouseLeave的故事板。这个故事板使用双动画，针对弹出图像的ScaleTransform。这个故事板在鼠标进入时会放大图像，当它离开时会有一个很好的缓动功能缩小它。

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

Answer 3

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

浮动控制WPF中的其他控件

3 个答案: