如何在 Windows 10 UWP 中从屏幕右侧打开弹出窗口？答案

【问题标题】：How to open a flyout from right side of screen in Windows 10 UWP?如何在 Windows 10 UWP 中从屏幕右侧打开弹出窗口？
【发布时间】：2017-01-12 19:08:52
【问题描述】：

我正在使用 Windows 10 应用程序，我想在点击图像时从屏幕右侧打开一个弹出窗口。我不能使用 SplitView，因为我已经将它用于其他目的。它的可见性应该先折叠，然后什么时候点击图像，然后它应该是可见的。另外，我不使用导航/设置浮出控件。我想实现如下

【问题讨论】：

标签： c# windows-10-universal flyout

【解决方案1】：

它的可见性应该首先折叠，当点击图像时它应该是可见的。

您可以像这样设置布局：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <GridView ItemsSource="{x:Bind WaresCollection}">
        <GridView.ItemTemplate>
            <DataTemplate>
                <Image Source="{Binding WaresImage}" Tapped="Image_Tapped" Width="200" Height="300" />
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>
    <Grid x:Name="FilterGrid" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Visibility="Collapsed">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <StackPanel Background="#33000000" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
        <Grid Grid.Column="1" Padding="15" Background="White">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="5*" />
                <RowDefinition Height="2*" />
            </Grid.RowDefinitions>
            <TextBlock Text="Search Filter" FontSize="30" VerticalAlignment="Center" HorizontalAlignment="Left" />
            <Grid Grid.Row="1">
            </Grid>
            <Grid Grid.Row="2">
                <Button Content="DONE" Background="Yellow" VerticalAlignment="Center" HorizontalAlignment="Left" Click="Done_Button_Click" />
                <Button Content="RESET" Background="Yellow" VerticalAlignment="Center" HorizontalAlignment="Right" />
            </Grid>
        </Grid>
    </Grid>
</Grid>

后面的代码：

private ObservableCollection<Wares> WaresCollection = new ObservableCollection<Wares>();

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    WaresCollection.Clear();
    WaresCollection.Add(new Wares { WaresImage = "Assets/miao4.jpg" });
    WaresCollection.Add(new Wares { WaresImage = "Assets/miao5.jpg" });
    WaresCollection.Add(new Wares { WaresImage = "Assets/miao6.jpg" });
    WaresCollection.Add(new Wares { WaresImage = "Assets/miao4.jpg" });
    WaresCollection.Add(new Wares { WaresImage = "Assets/miao5.jpg" });
    WaresCollection.Add(new Wares { WaresImage = "Assets/miao6.jpg" });
    WaresCollection.Add(new Wares { WaresImage = "Assets/miao4.jpg" });
    WaresCollection.Add(new Wares { WaresImage = "Assets/miao5.jpg" });
    WaresCollection.Add(new Wares { WaresImage = "Assets/miao6.jpg" });
    WaresCollection.Add(new Wares { WaresImage = "Assets/miao4.jpg" });
    WaresCollection.Add(new Wares { WaresImage = "Assets/miao5.jpg" });
    WaresCollection.Add(new Wares { WaresImage = "Assets/miao6.jpg" });
    WaresCollection.Add(new Wares { WaresImage = "Assets/miao4.jpg" });
    WaresCollection.Add(new Wares { WaresImage = "Assets/miao5.jpg" });
    WaresCollection.Add(new Wares { WaresImage = "Assets/miao6.jpg" });
}

private void Image_Tapped(object sender, TappedRoutedEventArgs e)
{
    FilterGrid.Visibility = Visibility.Visible;
}

private void Done_Button_Click(object sender, RoutedEventArgs e)
{
    FilterGrid.Visibility = Visibility.Collapsed;
}

还有商品类：

public class Wares
{
    public string WaresImage { get; set; }
}

这是这个演示的渲染图：

【讨论】：

我想和你一样从右侧打开，但是当我设置过滤器网格的宽度时，它不会从屏幕一侧打开。你能建议吗？我想将320 设置为宽度
@KinjanBhavsar，您可以像这样<Grid.ColumnDefinitions><ColumnDefinition Width="*" /><ColumnDefinition Width="320" /></Grid.ColumnDefinitions> 将FilterGrid 的第二列设置为320。我看到你想编辑我的答案，但说真的，左侧的列定义和堆栈面板是用于覆盖项目，所以当过滤器网格打开时，项目无法再次选择，就像您在问题中显示的图片。
我正在使用 ContentPresenter，其中 Grid 是动态添加的，所以当我将其设为 Visible 时，另一个 Grid Visibility 变为 Collapsed，当我将其 Collapsed 时，另一个 Grid 再次变为 Visible。跨度>
@KinjanBhavsar，我不懂，我用GridView加载所有图片，你用ContentPresenter？我认为我的解决方案已经可以解决您的问题，但是如果您想使用其他方法，也许您可以发布您的代码，并使您的过滤器布局显示在右侧，您可以将HorizontalAlignment="Right" 添加到容器中您的过滤器布局。
@KinjanBhavsar，那么你可以把我的FilterGrid放在同一个地方，和你的细节ContentPresenter一样大小，然后把第二列定义改成320，让它先折叠，然后再折叠点击图片菜单中的ContentPresenter 显示FilterGrid?应该很容易吧？