2016-07-12 8 views
1

最近、いくつかの簡単なImageviewerで作業しています。WPFのAcrobat風ポップアップ

これで、ズームや回転などの文脈に敏感な操作を行うのは良い点です。

これらの機能を実装するのは私の問題ではありませんが、ContextMenuです。

私はContextMenu -Elementを使用しないことにしました。代わりにポップアップを使用します。ポップアップ用

理由:

  • 少ないスタイリング
  • より良いポジショニング
  • のIsOpenは、バインド可能な(のContextMenuこのに関するすべての記事に対してのIsOpenにバインド可能ではありません)

ここにありますトラブルが来る:

<Image x:Name="PART_ImgCurrent" VerticalAlignment="Center" HorizontalAlignment="Center" Stretch="Uniform" Grid.Row="0" Grid.Column="0" 
            Source="{Binding ElementName=PART_PreviewPanel, Path=SelectedItem.Source}">          
           <Image.LayoutTransform> 
            <RotateTransform Angle="0"></RotateTransform> 
           </Image.LayoutTransform> 
           <Image.Triggers> 
            <EventTrigger RoutedEvent="Loaded"> 
             <BeginStoryboard> 
              <Storyboard> 
               <DoubleAnimation Storyboard.TargetName="PART_ImgCurrent" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:3" /> 
              </Storyboard> 
             </BeginStoryboard> 
            </EventTrigger> 

           </Image.Triggers> 
           </Image> 
          <Popup IsHitTestVisible="False" Focusable="False" PlacementTarget="{Binding ElementName=PART_ImgCurrent}" AllowsTransparency="True" StaysOpen="True" 
            IsOpen="{Binding ElementName=PART_ImgCurrent, Path=IsMouseOver, Mode=OneWay}" 
            Placement="Right" HorizontalOffset="-42" VerticalOffset="2"> 
           <StackPanel Opacity="0.5" VerticalAlignment="Stretch"> 
            <Button Content="Ugly Button" Height="40" Width="40"></Button> 
            <Button Content="Ugly Button" Height="40" Width="40"></Button> 
            <Button Content="Ugly Button" Height="40" Width="40"></Button> 
           </StackPanel> 
          </Popup> 

あなたが見ることができるように、私はPopup内のボタンをクリックしようとすると、変なディスコ・ブリンケンライト・行動につながる画像上IsMouseOverPopupIsOpenを結合イム。

タイトルとは何が関係していますか?

のAcrobatReaderは、これはほぼ正確に動作イムが探しているこのthis thingy

を持っています。このことはどのように呼ばれますか?

誰かに似たような問題があって解決策を提供できましたか?

+0

あなたが見ているものは、実際には期待されるでしょう。カーソルをImageに渡すとPopUp IsOpen = Trueとなり、PopUpにカーソルが移動すると、PopUpはIsOpen = FalseをスローするZ-indexで取得したため、IsMouseOverはなくなります。それは、Imageはそれを取り戻し、IsOpen = Trueを投げて、あなたの点滅を引き起こすような振る舞いを繰り返します。あなたはちょうどそれが欲しいですか?あなたはあなたのメニューを取得し、相互作用することができます。マウスが画像を残すと、メニューは消えますか?ただ確実にする。 –

+0

まあ基本的にはい。私は知っている、私は 'CustomControl'以来、コードビハインドでこれを行うことができますが、Intellisense Tooltip(これは私には少なくともこのように聞こえる)として、' IsMouseOver'は私にこれをさせるべきです。しかし、PopUpはVisualTreeのImageの子ではないようですので、Code-Behindでこれを行うには唯一可能な解決策があるかもしれません....私は恐れていました – lokusking

+0

Hahahaの人間はそれをエンジニアリングしていません。あなたはあなたの人生をもっと難しくします。あなたはイベントを渡す必要があり、必要なのはxamlだけです。 1秒私は例を作ります。 :) –

答えて

2

遅れて申し訳ありませんが、すぐにもう一度私は思ったように、もう一度忙しくなりました。とにかく、ここで私はあなたの目標を達成すると考えることができるいくつかの方法の1つ、それを与える。私はこれがほしいイメージだけではないかもしれないと思っています。リソースの内容を辞書に投げ捨て、ネーミングの一貫性を保っていれば(あるいは、ネストされたUIElementをターゲットにしてください)、この例ではGridImageのように動作していることに注意してください。

私は一般的に、今後追加されたやりとりのために物事を開いています。この場合、おそらく画像ソースにGridの背景ブラシを作成するか、子として配置します。そうすれば、他のオブジェクトを追加したり、他のエフェクトや物事を言いたい場合は、適切な開始点があります。

とにかく私は脱走していますので、以下のコンセプトの例を試してみてください。そうでない場合は、私があなたの目標を達成するために考えることができるいくつかの他の方法があると言ったように、私に知らせてください。 :)

<!-- HitTestVisibility Area --> 
     <Grid x:Name="ImagePlaceholder" 
       Height="500" Width="500" 
       Background="LightBlue"> 
      <Grid.Resources> 
       <Storyboard x:Key="OnMouseEnter"> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" 
                Storyboard.TargetName="FakePopUp"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/> 
        </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
       <Storyboard x:Key="OnMouseLeave"> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" 
                Storyboard.TargetName="FakePopUp"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}"/> 
        </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
      </Grid.Resources> 
      <Grid.Triggers> 
       <EventTrigger RoutedEvent="UIElement.MouseEnter"> 
        <BeginStoryboard Storyboard="{StaticResource OnMouseEnter}"/> 
       </EventTrigger> 
       <EventTrigger RoutedEvent="UIElement.MouseLeave"> 
        <BeginStoryboard Storyboard="{StaticResource OnMouseLeave}"/> 
       </EventTrigger> 
      </Grid.Triggers> 


      <!-- Overlay --> 
      <Border Name="FakePopUp" Visibility="Collapsed" 
        Margin="0,0,0,25" Background="SlateGray" 
        Height="50" CornerRadius="20" Padding="10" 
        HorizontalAlignment="Center" VerticalAlignment="Bottom"> 

       <StackPanel Orientation="Horizontal"> 
        <Button Content="Eins Bier"/> 
        <Button Content="Zwei Bier" Margin="10,0"/> 
        <Button Content="Drei Bier"/> 
       </StackPanel> 

      </Border> 

     </Grid> 

私が言ったように私は他のインスタンスの機能の束と考えることができたので、私は理にかなっている追加したいかもしれませんが、代わりにTargetNameはとの直接のトリガーの親に取り付けたストーリーボードと一緒に行きました。素敵なフェード効果のためのトランジションデュレーションの追加や、フェードなどの間にスライドさせるような単純なものでも

とにかく、これが役立つことを願っています。乾杯!

+0

私はそのアイデアをラッパーとして 'Grid'で好きです。魅力のように動作します。その素晴らしいインスピレーションのおかげで男: – lokusking

+0

良い契約、うれしいあなたは救済を得ました。 :) –

関連する問題