Windows UWP - Как обернуть GridView внутри HubSection

Question

У меня есть пример рабочего GridView и, похоже, не имеет смысла перемещать его для работы внутри HubSection. Моему реальному приложению нужно это сделать, и этот пример - мой мул, чтобы понять, как нужно работать с данными.

HubSection жалуется, что он не может иметь GridView в качестве ребенка.

Мой текущий код модели выглядит следующим образом:

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

} 

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

наконец xaml.cs:

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

Как вы можете видеть, это о так же просто, как это получается! Спасибо за ваше время!

Answer 1

HubSection жалуется, что он не может иметь GridView в качестве ребенка.

По этой проблеме вы можете обратиться к HubSection class. Для секции концентратора мы не добавляем контент непосредственно к нему, мы определяем содержание HubSection в DataTemplate.

Так что для вашей проблемы, вы можете сделать это следующим образом:

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

Когда вы сделаете это (добавление DataContext в Xaml), нет необходимости добавлять код в файле MainPage.cs:

//private List<Recording> recordings; 

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

И вам нужно будет изменить RecordingViewModel класс как это:

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

Как вы знаете, если вы хотите использовать {x: Bind} в DataTemplate, вы должны определить привязку x:DataType, потому что значение пути {x: Bind} не интерпретируется в контексте страницы, но в контексте шаблона данных.

Как мы можем видеть здесь, то GridView находится внутри DataTemplate уже, так как есть только DataContext (ваш RecordingViewModel), но ни одна модель данных для этого DataTemplate, мы не можем использовать {х: Bind} здесь для ItemSource из GridView внутри него. Но мы можем использовать {х: Bind} для управления внутри DataTemplate в GridView, например так:

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

И код за такое же, как {Binding} метод в верхней.