Question

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

现在我想起了一个很好的功能，就是做一些上下文敏感的动作，如缩放和旋转。

实现这些功能不是我的问题，但ContextMenu是。

我决定不使用ContextMenu - 元素，而是使用弹出窗口。

PopUp的原因：

较少造型
更好的定位
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绑定Popup，当我尝试点击{{{}内的按钮时，会导致一个有趣的Disco-BlinkenLights-Behavior 1}}。

这与标题有什么关系？

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的直接触发器，因为我可以想到可能想要添加的一些其他实例功能是有意义的。甚至可以简单地添加转换持续时间以获得漂亮的淡入淡出效果，也可以转换为在衰落等时将其向上滑动等等。

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

WPF

1 个答案: