Acrobat-like PopUp в WPF

Question

Недавно я работал над некоторым простым Imageviewer.

Теперь мне показалось, что это может быть приятной особенностью, чтобы сделать некоторые действия с контекстно-чувствительным действием, такие как Масштабирование и вращение.

Для реализации этих функций не является моей проблемой, но ContextMenu есть.

Я решил не использовать ContextMenu -Element, вместо этого я собираюсь использовать всплывающее окно.

Причины всплывающий:

• Менее Styling
• Лучше Позиционирование
• IsOpen является Bindable (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> 

Как вы можете видеть, им связывание IsOpen из Popup к IsMouseOver на изображения, что приводит к смешным диско-Blinkenlights-поведение, когда я пытаюсь нажать на кнопку внутри Popup.

Как это связано с заголовком?

AcrobatReader имеет этот

Это почти точно поведение им в поисках. Как называется эта вещь?

У кого-то были подобные проблемы и могли бы предложить решение?

Answer 1

Извините за задержку, как только я подумал, что у меня есть секунда, я снова занят. В любом случае, вот один из нескольких способов, я могу думать о достижении вашей цели, дать ему шанс. Я предположил, что это не просто изображения, которые вы хотите для этого, и если вы бросили материал ресурсов в словаре и сохранили ваше именование согласованным (или даже лучше, просто нацелили на вложенный UIElement), вы могли бы использовать его повсюду. Обратите внимание, что Grid действует как то, что было бы Image в этом примере.

Я вообще делаю вещи открытыми для будущих добавленных взаимодействий и т. Д., Поэтому в этом случае я, вероятно, просто сделаю источник изображения фоновой щеткой для 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> 

Я пошел с раскадровкой прикрепленной к родителю вместо прямых триггеров с Имя_целевого_объектом, как я сказал, потому что я мог придумать кучу других случаев признаков, возможно, захотите добавить, что будет иметь смысл. Даже что-то простое, например, добавление продолжительности перехода для хорошего эффекта затухания или, может быть, перевода y, чтобы сдвинуть его вверх, в то время как исчезновение и т. Д. И т. Д. И т. Д.

В любом случае, надеюсь, что это поможет. Ура!