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

Question

我正在使用Windows 10应用程序，并且当图像被点击时，我想从屏幕的右侧打开一个弹出窗口。我无法使用SplitView，因为我已经将它用于其他目的。它的可见性应该先是Collapsed，当点击图像时它应该是Visible。另外，我不使用Navigation/Settings Flyout。我想实现为以下

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

这里是渲染图像本演示：