浮動對WPF中其他控件的控制

Question

即使表達了這個問題，我也很難。

我在ListBox中的用戶界面中向用戶顯示預覽圖像。當用戶懸停在圖像上時，我想展開它，以便用戶可以看到更多細節。

我已經到了可以「彈出」圖像的位置，但它當然仍然處於其佈局中的正常位置，這意味着圖像不會顯示在靠近其他控件的頂部它只會出現在它之前呈現的控件之上，以及它之後呈現的那些控件之下。它也被ListBox的邊界所裁剪。

是否有一種簡單的（即沒有自定義控件開發）方式來臨時從視覺佈局中移除該圖像，並將其放在所有其他元素之上？

這裏是一個蹩腳的演示應用程序，顯示了我說的：

通知縮放圖像通過列表框的邊界裁剪（外面的列表框爲紅色）。此外，請注意，縮放後的圖像覆蓋它後面的UI元素仍然存在 - 後來的圖標和項目名稱（「項目5」以及其他在左下角顯示的圖標）。

Answer 1

最適合我的解決方案是使用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）。該圖像對其進行縮放變換。 「圖標」圖片還有一個MouseEnter和MouseLeave的故事板。該故事板使用雙重動畫，針對彈出圖像的ScaleTransform。這個故事板在鼠標進入和收縮時會放大圖像，並且具有良好的緩動功能。

用例爲：「用戶在列表中顯示一個列表框，列表中的每個項目都有小圖片，當用戶將鼠標懸停在小圖片（圖標）上時，它向前彈出並放大，爲用戶提供更好的視圖當鼠標離開圖像時，它會縮回原來的大小。「

Answer 2

這種效果通常被稱爲魚眼。使用該術語搜索資源可能會更好。這裏是一個樣本。 http://www.codeproject.com/KB/menus/FishEyeMenu.aspx

Answer 3

如果您正在尋找簡單的東西，您還可以爲圖像（或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