如何在图像点击事件中创建从屏幕右侧显示的弹出窗口？答案

【问题标题】：How to create a flyout which appears from right side of screen on image tap event?如何在图像点击事件中创建从屏幕右侧显示的弹出窗口？
【发布时间】：2015-10-06 11:59:56
【问题描述】：

我正在开发 Windows Store 应用程序，当用户点击过滤器图标时，它需要向用户提供一些过滤器选项。我知道如何使用弹出窗口，但我被困在如何满足我的要求上。请建议。我想做类似下图所示的事情

当用户点击过滤器时，弹出窗口必须从屏幕右侧打开，类似于下图。

请提出建议。

【问题讨论】：

标签： c# xaml windows-store-apps windows-8.1

【解决方案1】：

您可以像 Nasser 对您说的那样，通过 Blend 将一些故事板添加到网格中，或者通过添加自定义 SettingFlyout，因为此示例显示了如何做到这一点https://code.msdn.microsoft.com/windowsapps/App-settings-sample-1f762f49

【讨论】：

谢谢 Riadh，我会检查一下，但我有一个疑问，当我点击应用程序设置时，它会打开我为过滤器选项创建的同一个自定义弹出窗口吗？
是的，它会在一些选择后打开，您也可以在单击按钮或 event_hanldler 后打开自定义布局。查看示例，您可以找到所有可能的场景。我希望该示例对您有所帮助。
感谢 Riadh 的回复。您还可以建议如何为控件设置动画，例如：当我单击 + 时，将在该区域中打开一个带有单选按钮的下拉菜单，并且（+ 将更改为 -）然后当我单击时 - 该区域应该隐藏但值应该除非他按下 RESET 按钮，否则将被选中。

【解决方案2】：

您可以在 XAML 中做到这一点，只需正确的 Main XAML 代码，然后编写 Right Grid 并通过 Blend 做一些 Storyboard :)。

<Grid>
        <!-- Your main xaml code.. -->
            <!-- right side menu -->
        <Grid Width="400"  RenderTransformOrigin="0.5,0.5" >
            <Grid.RenderTransform>
                <CompositeTransform TranslateX="400"/>
            </Grid.RenderTransform>
            <!-- some filters -->
        </Grid>

    </Grid>

更新：

参考：Storyboard for XAML

【讨论】：

谢谢纳赛尔。但到目前为止我从未使用过 StoryBoard。你能分享一些有用的链接吗？这将是很大的帮助
可以在你给出的答案码中加入StoryBoard吗？