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。对于中心部分，我们不会直接向其添加内容，我们会在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>的内容。

所以对于你的问题，你可以这样做：

//private List<Recording> recordings;

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

执行此操作（在Xaml中添加DataContext）时，无需在MainPage.cs文件中添加任何代码：

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; } } }课程：

DataTemplate

如您所知，如果您想在x:DataType中使用{x：Bind}，您应该为绑定定义GridView，因为{x：Bind}的路径值是不是在页面的上下文中解释，而是在模板化的数据对象的上下文中。

正如我们在这里看到的那样，DataTemplate已经在DataTemplate内，因为只有一个datacontext（您的RecordingViewModel），但没有这个ItemSource的数据模型，我们可以这里不要使用{x：Bind}作为GridView内的DataTemplate。但我们可以使用{x：Bind}作为GridView的{{1}}内的控件，例如：

<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}方法相同。

Windows UWP - 如何在HubSection中包装GridView

1 个答案: