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

Question

我正在开发 Windows 10 应用程序，我想在点击图像时从屏幕右侧打开弹出窗口。我不能使用 SplitView，因为我已经将它用于其他 purpose.Its 可见性应该先折叠，然后单击图像时应该是 Visible.Also，我不使用 Navigation/Settings 弹出窗口。我想实现如下

Answer 1

Its visibility should be Collapsed first and when to click on the image then it should be Visible.

您可以像这样设置您的布局：

<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;
}

还有商品class：

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

下面是这个demo的效果图：

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

How to open a flyout from right side of screen in Windows 10 UWP?

c#

flyout

windows-10-universal