Implementieren responsiven Master/Detail in UWP mit nur einer Seite

Question

Ich würde gerne wissen, ob es eine Möglichkeit gibt, eine responsive Master/Detail Seite mit nur einer zu implementieren. Was ich will, ist etwas, genau wie das Projekt hier:

https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlMasterDetail

Außer das Detail, dass anstelle von zwei Seiten mit und von einem zum anderen navigieren ich nur eine Seite verwenden würde.

Gibt es eine Möglichkeit, es zu tun? Wenn ja, könntest du mir ein funktionierendes Beispiel geben?

Answer 1

Abgesehen von dem Detail, dass anstatt zwei Seiten zu verwenden und von einem zum anderen zu navigieren, ich nur eine Seite verwenden würde.

Nach dem Durch the project gehen, fand ich es basierend auf der Größe des Bildschirms eine reaktions Master/Detail-Erfahrung umgesetzt. Wenn die App-Ansicht weit reicht, sollten die Masterliste und die Detailansicht in derselben App-Seite nebeneinander angezeigt werden. Bei kleineren Bildschirmgrößen sollten die beiden UI-Elemente jedoch auf verschiedenen Seiten angezeigt werden, damit der Benutzer zwischen ihnen navigieren kann. Aus meiner Sicht denke ich, dass dies eine gute Lösung für die Implementierung einer responsiven Master/Detail-Erfahrung ist.

Gibt es eine Möglichkeit, es zu tun? Wenn ja, könntest du mir ein funktionierendes Beispiel geben?

The project bereits zeigt, wie reaktions Master/Detail-in UWP implementieren nur eine Seite verwenden, aber es setzt mehr und das macht es ein wenig komplex zu verstehen. Also mache ich ein einfaches Beispiel, das direkt zeigt, wie Responsive Master/Detail in UWP mit nur einer Seite zu implementieren ist.

Im Folgenden sind die wichtigsten Schritte ist:

Zuerst ein Listview erstellen Master Informationen in XAML-Seite anzuzeigen:

<!--Master VIEW--> 
<ListView x:Name="ItemListView" Margin="0,0,0,8"> 
    <ListView.ItemTemplate> 
     <DataTemplate> 
      <StackPanel HorizontalAlignment="Left" Margin="10,8,0,0"> 
       <TextBlock Text="{Binding Title}" FontSize="25" Width="400" /> 
      </StackPanel> 
     </DataTemplate> 
    </ListView.ItemTemplate> 
</ListView> 

Zweitens geben die Details zu sehen, dass zeigt die Details Artikel auf die Auswahl bezogen auf der Hauptliste in der gleichen xAML Seite:

<!--DETAILS VIEW--> 
<StackPanel Grid.Column="1" x:Name="ContentPanelDetail" Margin="10,0,0,0" DataContext="{Binding SelectedItem, ElementName=ItemListView}"> 
    <TextBlock Text="{Binding Title}" MaxHeight="80" FontSize="30" HorizontalAlignment="Left" Margin="0" /> 
    <TextBlock x:Name="DetailTextBlock" FontSize="35" Text="{Binding Content}" HorizontalAlignment="Left" Margin="0,18,40,0" Width="500" Height="Auto" TextWrapping="Wrap" /> 
</StackPanel> 

Stellen Sie dann die Itemssource, i für das Listview n Code hinter:

public MainPage() 
{ 
    this.InitializeComponent(); 
    //set the ItemsSource for the ListView 
    ItemDetails messageData = new ItemDetails(); 
    ItemListView.ItemsSource = messageData.Collection; 
    ItemListView.SelectedIndex = 0; 
} 

Last but not least stellte Master View und den Blick in eine Splitview und verwendet Visual es responsive mehr zu machen.

Hier ist die simple example und die output für Ihre Referenz.