Windows 10 UWPで画面の右側からフライアウトを開く方法は？

Question

私はWindows 10 Appで作業しています。画像がタップされているときに、画面の右側からフライアウトを開きたいとします。 SplitViewを使用することはできません。他の目的で既に使用しています。最初は折りたたまれている必要があります。画像をクリックすると、Visible.Alsoになります。また、Navigation/Settings Flyoutを使用しないでください。私は、その視認性を最初に折りたたまれるべき画像をクリックしたときに、それが表示されている必要があり、次の

Answer 1

として達成したいです。

あなたはこのように、たとえば、あなたのレイアウトを設定することができます：ここでは、レンダリング画像がある

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

：背後

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

とウェアズクラスこのデモの