Windows UWP - Wie GridView in einem HubSection wrap

Question

Ich habe ein Beispiel für eine funktionierende GridView und kann nicht scheinen, etwas Glück zu bewegen, um es in einem HubSection arbeiten. Meine echte App muss dies tun und dieses Beispiel ist mein Mule um zu verstehen, wie die Datenbindung funktioniert.

Die HubSection beschwert sich, dass es keine GridView als Kind haben kann.

Mein aktuelles Modell-Code sieht wie folgt aus:

namespace Quickstart { 
    public class Recording { 
    public string ArtistName { get; set; } 
    public string CompositionName { get; set; } 
    public DateTime ReleaseDateTime { get; set; } 
    public Uri ImageUri { get; set; } 

    public Recording(string name, string composition, DateTime when, string prefixedFilename) 
    { 
     this.ArtistName = name; 
     this.CompositionName = composition; 
     this.ReleaseDateTime = when; 
    // string prefixedFilename = "ms-appx://Quickstart/Assets/" + filename; 
     ImageUri = new Uri(prefixedFilename); 
    } 

    public string OneLineSummary { 
     get 
     { 
      return $"{this.CompositionName} by {this.ArtistName}, released: " 
       + this.ReleaseDateTime.ToString("d"); 
     } 
    } 
    } 

    public class RecordingViewModel { 
    List<Recording> recordings; 

    public RecordingViewModel() 
    { 
     recordings = new List<Quickstart.Recording>(); 
     recordings.Add(new Recording("Wolfgang Amadeus Mozart", "Andante in C for Piano", new DateTime(1761, 1, 1), "http://csimg.koopkeus.nl/srv/NL/29023839m56849/T/340x340/C/FFFFFF/url/mozart.jpg")); 
     recordings.Add(new Recording("Nickleback", "Gotta be Somebody", new DateTime(2003, 8, 21), "http://images4.fanpop.com/image/photos/16500000/n-nickelback-16579001-634-634.jpg")); 
    } 

    public List<Recording> RecordingList { get { return this.recordings; } } 
    } 

} 

und die XAML:

<Page 
x:Class="Quickstart.MainPage" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local="using:Quickstart" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
mc:Ignorable="d"> 
<GridView ItemsSource="{x:Bind recordings}" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" x:Name="RecordingGrid"> 
    <GridView.ItemTemplate> 
     <DataTemplate x:DataType="local:Recording"> 
      <StackPanel> 
       <Image Source="{Binding ImageUri, Mode=TwoWay}" Height="100" Opacity="1" Stretch="Uniform"/> 
       <TextBlock Text="{x:Bind ArtistName}"/> 
       <TextBlock Text="{x:Bind CompositionName}"/> 
       <TextBlock Text="{x:Bind ReleaseDateTime}"/> 
      </StackPanel> 
     </DataTemplate> 
    </GridView.ItemTemplate> 
    </GridView> 
</Page> 

schließlich die xaml.cs:

namespace Quickstart { 
    public sealed partial class MainPage : Page { 
    List<Recording> recordings; 
    public MainPage() { 
     this.InitializeComponent(); 
     recordings = new RecordingViewModel().RecordingList; 
    } 
    } 
} 

Wie Sie sehen, es geht um so einfach wie es geht! Danke für deine Zeit!

Answer 1

Der HubSection beschwert sich, dass es ein GridView als ein Kind nicht haben kann.

Für dieses Problem können Sie sich auf HubSection class beziehen. Für einen Hub-Abschnitt fügen wir keinen Inhalt direkt hinzu, wir definieren den Inhalt des HubSection in einem DataTemplate.

Also für Ihr Problem, können Sie es wie folgt tun:

<Page.DataContext> 
    <local:RecordingViewModel x:Name="vm" /> 
</Page.DataContext> 

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <Hub> 
     <HubSection x:Name="section1" Width="600"> 
      <DataTemplate> 
       <Grid> 
        <GridView ItemsSource="{Binding recordings}" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" x:Name="RecordingGrid"> 
         <GridView.ItemTemplate> 
          <DataTemplate> 
           <StackPanel> 
            <Image Source="{Binding ImageUri, Mode=TwoWay}" Height="100" Opacity="1" Stretch="Uniform" /> 
            <TextBlock Text="{Binding ArtistName}" /> 
            <TextBlock Text="{Binding CompositionName}" /> 
            <TextBlock Text="{Binding ReleaseDateTime}" /> 
           </StackPanel> 
          </DataTemplate> 
         </GridView.ItemTemplate> 
        </GridView> 
       </Grid> 
      </DataTemplate> 
     </HubSection> 
    </Hub> 
</Grid> 

Wenn Sie dies tun (Hinzufügen der Datacontext in XAML), gibt es keine Notwendigkeit, einen Code in der MainPage.cs Datei hinzuzufügen:

//private List<Recording> recordings; 

public MainPage() 
{ 
    this.InitializeComponent(); 
    //recordings = new RecordingViewModel().RecordingList; 
} 

Und Sie müssen Ihre RecordingViewModel Klasse wie folgt ändern:

public class RecordingViewModel 
{ 
    public List<Recording> recordings 
    { 
     get; set; 
    } 

    public RecordingViewModel() 
    { 
     recordings = new List<Recording>(); 
     recordings.Add(new Recording("Wolfgang Amadeus Mozart", "Andante in C for Piano", new DateTime(1761, 1, 1), "http://csimg.koopkeus.nl/srv/NL/29023839m56849/T/340x340/C/FFFFFF/url/mozart.jpg")); 
     recordings.Add(new Recording("Nickleback", "Gotta be Somebody", new DateTime(2003, 8, 21), "http://images4.fanpop.com/image/photos/16500000/n-nickelback-16579001-634-634.jpg")); 
    } 

    public List<Recording> RecordingList { get { return this.recordings; } } 
} 

Wie Sie wissen, wenn Sie {x: Bind} in einer DataTemplate verwenden möchten, sollten Sie die x:DataType für die Bindung definieren, da der Wert des Pfads von {x: Bind} nicht im Kontext der Seite interpretiert wird, sondern im Zusammenhang mit dem zu formulierenden Datenobjekt.

Wie wir hier sehen können, ist die GridView in einem DataTemplate schon, da es nur ein Datacontext (Ihr RecordingViewModel) ist, aber kein Datenmodell für diese DataTemplate, können wir verwenden nicht {x: Bind} hier für die ItemSource von GridView innerhalb davon. Aber wir können verwenden {x: Bind} für die Kontrollen innerhalb des DataTemplate des GridView, zum Beispiel wie folgt aus:

<Page.Resources> 
    <DataTemplate x:DataType="local:Recording" x:Key="recordingitem"> 
     <StackPanel> 
      <Image Source="{Binding ImageUri, Mode=TwoWay}" Height="100" Opacity="1" Stretch="Uniform" /> 
      <TextBlock Text="{x:Bind ArtistName}" /> 
      <TextBlock Text="{x:Bind CompositionName}" /> 
      <TextBlock Text="{x:Bind ReleaseDateTime}" /> 
     </StackPanel> 
    </DataTemplate> 
</Page.Resources> 
<Page.DataContext> 
    <local:RecordingViewModel x:Name="vm" /> 
</Page.DataContext> 

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <Hub> 
     <HubSection x:Name="section1" Width="600"> 
      <DataTemplate> 
       <Grid> 
        <GridView ItemsSource="{Binding recordings}" ItemTemplate="{StaticResource recordingitem}" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" x:Name="RecordingGrid"> 
        </GridView> 
       </Grid> 
      </DataTemplate> 
     </HubSection> 
    </Hub> 
</Grid> 

Und der Code hinter ist die gleiche wie {Binding} Methode in der oberen.