WPF中类似Acrobat的PopUp

Question

我最近正在研究一些简单的Imageviewer。

现在想到，执行一些与上下文相关的操作（例如缩放和旋转）可能是一个不错的功能。

实现这些功能不是我的问题，而是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>

正如你可以看到，即时通讯结合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>

我选择将Storyboard附加到父级，而不是像我说的那样使用TargetName直接触发，因为我想到了可能需要添加很多其他实例的功能才有意义。 即使是简单的事情，例如添加过渡持续时间以获得良好的淡入淡出效果，或者可能是平移y使其在褪色等情况下向上滑动等等。

无论如何，希望这会有所帮助。 干杯!