从右上角弹出显示

Question

我在 WPF 中有一个应用程序，它使用弹出窗口向用户显示其他数据（在本例中是 link 以提供一些帮助）。我把它放在我想要的位置； link 打开它位于右上角，因此它在 link 下方右对齐。但是，我也想为它制作动画，基本上从弹出窗口的右上角飞出。

我有这样的工作，但这不是我想要的。通过设置宽度和水平偏移量的动画，我能够让整个弹出窗口像我想要的那样沿对角线进入。然而，里面的内容仍然基于左上角的布局，所以当弹出窗口向左移动时，它会不断重绘弹出内容，就好像它也在移动一样。我想要的是弹出内容保持静态，弹出内容的边缘在打开时 'reveal' 内容（以及在关闭时 'cover' 内容）。这是我的弹出代码：

                    <Popup PlacementTarget="{Binding ElementName=ImgHelp}" Placement="Left" VerticalOffset="48"
                           x:Name="PuHelp" AllowsTransparency="True" IsOpen="True">
                        <Popup.Tag>
                            <system:Double>0.0</system:Double>
                        </Popup.Tag>
                        <Popup.Width>
                            <MultiBinding Converter="{StaticResource CvMultiply}">
                                <Binding Path="ActualWidth" ElementName="GdHelpContent" />
                                <Binding Path="Tag" RelativeSource="{RelativeSource Self}" />
                            </MultiBinding>
                        </Popup.Width>
                        <Popup.Height>
                            <MultiBinding Converter="{StaticResource CvMultiply}">
                                <Binding Path="ActualHeight" ElementName="GdHelpContent" />
                                <Binding Path="Tag" RelativeSource="{RelativeSource Self}" />
                            </MultiBinding>
                        </Popup.Height>
                        <Popup.HorizontalOffset>
                            <MultiBinding Converter="{StaticResource CvNegate}">
                                <Binding Path="ActualWidth" ElementName="GdHelpContent" />
                                <Binding Path="Tag" RelativeSource="{RelativeSource Self}" />
                            </MultiBinding>
                        </Popup.HorizontalOffset>
                        <Popup.Style>
                            <Style TargetType="Popup">
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding IsHelpOpen, RelativeSource={RelativeSource AncestorType={x:Type local:UC_ApplicationWindow}}}" Value="True">
                                        <DataTrigger.EnterActions>
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <DoubleAnimation Duration="0:0:0.25" To="1" Storyboard.TargetProperty="Tag" />
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </DataTrigger.EnterActions>
                                        <DataTrigger.ExitActions>
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <DoubleAnimation Duration="0:0:0.25" To="0" Storyboard.TargetProperty="Tag" />
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </DataTrigger.ExitActions>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Popup.Style>
                        <Grid x:Name="GdHelpContent" RenderTransformOrigin="1,1">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Grid.RenderTransform>
                                <TranslateTransform x:Name="tfGrid" X="0" Y="0" />
                            </Grid.RenderTransform>

                            <Grid Background="{StaticResource BrApplicationHeader}">
                                <ContentControl Margin="15" Content="{Binding HelpContent, RelativeSource={RelativeSource AncestorType={x:Type local:UC_ApplicationWindow}}}" />
                            </Grid>
                        </Grid>
                    </Popup>

有什么好的方法吗？

Answer 1

好吧，在经历了很多令人沮丧的工作之后，我让它以一种完全不同的方式工作。您可以使用不透明遮罩属性在渲染时将控件部分的不透明度设置为任何形状，在这种情况下我只想要一个矩形。但是，由于直线矩形大小等不是依赖属性，因此您无法为它们设置动画...

我最终要做的是在主要内容边框后面创建另一个边框并为其设置动画。然后将主要的不透明蒙版设置为视觉画笔，使用该边框作为视觉对象。不仅如此，它不会为边界外的东西设置不透明度，所以我必须有一个透明的外部边界，然后是一个纯色的内部边界，然后你对内部边界的比例进行动画处理......

代码如下：

    <Grid x:Name="GdHelpContent" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,45,20,0">
        <Border x:Name="RectHelpClip" Background="Transparent">
            <Border Background="{StaticResource BrHelpBackground}" RenderTransformOrigin="1,0">
                <Border.RenderTransform>
                    <ScaleTransform ScaleX="0" ScaleY="0" />
                </Border.RenderTransform>
                <Border.Style>
                    <Style TargetType="Border">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding IsHelpOpen, RelativeSource={RelativeSource AncestorType={x:Type local:UC_ApplicationWindow}}}" Value="True">
                                <DataTrigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Duration="0:0:0.25" To="1" 
                                                                                 Storyboard.TargetProperty="RenderTransform.ScaleX" />
                                            <DoubleAnimation Duration="0:0:0.25" To="1" 
                                                                                 Storyboard.TargetProperty="RenderTransform.ScaleY" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </DataTrigger.EnterActions>
                                <DataTrigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Duration="0:0:0.25" To="0" 
                                                                                 Storyboard.TargetProperty="RenderTransform.ScaleX" />
                                            <DoubleAnimation Duration="0:0:0.25" To="0" 
                                                                                 Storyboard.TargetProperty="RenderTransform.ScaleY" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </DataTrigger.ExitActions>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Border.Style>
            </Border>
        </Border>
        <Border Style="{StaticResource StHelpPanel}">
            <Border.OpacityMask>
                <VisualBrush Visual="{Binding ElementName=RectHelpClip}" />
            </Border.OpacityMask>
            <ContentControl Margin="15" Content="{Binding HelpContent, RelativeSource={RelativeSource AncestorType={x:Type local:UC_ApplicationWindow}}}" />
        </Border>
    </Grid>

希望对某人有所帮助...

从右上角弹出显示

Popup reveal from top right

wpf

animation

popup