Wie öffne ich ein Flyout von der rechten Seite des Bildschirms in Windows 10 UWP?

Question

Ich arbeite an Windows 10 App und ich möchte ein Flyout von der rechten Seite des Bildschirms öffnen, wenn das Bild angetippt wird. Ich kann SplitView nicht verwenden, da ich es bereits für einen anderen Zweck verwende. Seine Sichtbarkeit sollte zuerst kollabiert werden, und wenn auf das Bild geklickt wird, sollte es sichtbar sein. Außerdem verwende ich nicht Navigation/Einstellungen Flyout. Ich möchte wie die folgende

Answer 1

Seine Sichtbarkeit erste Komprimiert werden und sollte erreichen, wenn auf das Bild klicken, dann sollte es sichtbar sein.

Sie können Ihr Layout zum Beispiel so eingestellt:

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

Code hinter:

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

Und die Wares Klasse:

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

Hier ist die Rendering-Bild dieser Demo: