WPFの他のコントロールの上にコントロールを浮動させよう

Question

この質問をするのは難しいです。

私はListBox内のUIでプレビュー画像をユーザーに表示しています。ユーザーが画像の上にカーソルを置くと、その画像を拡大して詳細を見ることができます。

私は画像を「ポップアップ」することができますが、レイアウトの通常の位置にあります。つまり、画像は近くの他のコントロールの上に表示されるのではなくそれは、その前にレンダリングされたコントロールの上に表示され、後にレンダリングされるコントロールの下にのみ表示されます。また、ListBoxの境界によって切り取られています。

ビジュアルレイアウトからそのイメージを一時的に削除し、それを他のすべての要素の上に置く簡単な（つまり、カスタムコントロール開発なし）方法はありますか？

ここで私が話しているかを示して安っぽいデモアプリケーションです：

は、ズーム画像は、リストボックスの境界でクリップさに注意してください（リストボックスの外側が赤です）。また、後で表示されるアイコンとアイテム名（「アイテム5」など、左下隅に表示されるアイコン）の両方にズームしたイメージの後にレンダリングされたUI要素が表示されます。

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は（「アイコン」という名前の）その画像に対して真になるまで、ポップアップが開いていません。マウスが画像に入ると、2つのことが起こります。ポップアップが開き（640x640）、画像が表示されます（48x48ピクセル）。この画像にはスケール変換があります。 「アイコン」イメージには、MouseEnterとMouseLeaveのストーリーボードもあります。このストーリーボードは、ポップアップ画像のScaleTransformを対象としたダブルアニメーションを使用します。このストーリーボードは、イージング機能が良好な状態でマウスが入ったり、収縮したりすると、イメージを拡大します。

ユースケースは次のようになります。「ユーザーには、リスト内の各アイテムの小さなイメージのリストボックスが表示されます。ユーザーが小さなイメージ（アイコン）の上を移動すると、前方に飛び出して拡大され、マウスが画像を離れると、元のサイズに縮小されます。

Answer 2

この効果は、しばしばフィッシュアイと呼ばれます。あなたは、その言葉を使ってリソースを探している方が良いかもしれません。ここに1つのサンプルがあります。 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