c# - UWP XAML中的YouTube风格的搜索结果

Question

我正在使用UWP和C#为Windows商店开发YouTube应用程序。我熟悉使用Google Data API和从YouTube获取结果的方法，但是我的XAML不太好。

谁能给我看一个数据模板，我可以用它来显示搜索结果，该结果将像YouTube一样显示，而最终不会导致搜索结果不在页面上。

下面的屏幕截图来自TubeCast，与我需要的类似。

https://imgur.com/a/rUSGYIJ

基本上，我知道如何使用数据模板，但是似乎无法正确显示XAML样式来显示类似内容，这些内容会根据屏幕大小自动调整。有人可以帮忙吗？

谢谢

Answer 1

I don't have any XAML code yet as my XAML knowledge is poor at best. I basically need a YouTube-style view where the user is shown results from YouTube including the video title and a thumbnail.

@ user3733885我已经检查了您对@touseefbsb的回复的问题和评论。正如touseefbsb所说，AdaptiveGridView控件将满足您有关“根据屏幕大小自动调整”的要求。您可以直接在官方document之后使用此控件。

然后，如何制作看起来像您的屏幕截图的DataTemplate？这只是基本的XAML布局技术。我制作了一个简单的代码示例供您引用:

<Page.Resources>
    <DataTemplate x:Key="PhotosTemplate" x:DataType="local:VideoDetail">
        <StackPanel>
            <Image Source="{x:Bind Videoimage}" Stretch="UniformToFill"></Image>
            <TextBlock Text="{x:Bind title}"></TextBlock>
            <StackPanel Orientation="Horizontal" Background="White">

                <Ellipse Width="30" Height="30" VerticalAlignment="Center">
                    <Ellipse.Fill>
                        <ImageBrush ImageSource="{x:Bind Header}"></ImageBrush>
                    </Ellipse.Fill>
                </Ellipse>
                <TextBlock Text="{x:Bind Name}" VerticalAlignment="Center" Margin="10 0 0 0"></TextBlock>
                <TextBlock Text="&#xE890;" FontFamily="Segoe MDL2 Assets" VerticalAlignment="Center" Margin="50 0 0 0"></TextBlock>
                <TextBlock Text="{x:Bind Views}" VerticalAlignment="Center" Margin="5 0 0 0"></TextBlock>
                <TextBlock Text="&#xE787;" FontFamily="Segoe MDL2 Assets" VerticalAlignment="Center" Margin="10 0 0 0"></TextBlock>
                <TextBlock Text="{x:Bind Time}" VerticalAlignment="Center" Margin="5 0 0 0"></TextBlock>
            </StackPanel>
        </StackPanel>
    </DataTemplate>
</Page.Resources>
<Grid>
    <controls:AdaptiveGridView Name="AdaptiveGridViewControl"
                               ItemsSource="{x:Bind VideoDetails}"
                               ItemHeight="220"
                               DesiredWidth="300"
                               OneRowModeEnabled="False"
                               SelectionMode="Single"
                               IsItemClickEnabled="True"
                               ItemTemplate="{StaticResource PhotosTemplate}"/>
</Grid>

public sealed partial class MainPage : Page
{
    public ObservableCollection<VideoDetail> VideoDetails { get; set; }
    public MainPage()
    {
        this.InitializeComponent();
        VideoDetails = new ObservableCollection<VideoDetail>();
        for (int i=0;i<100;i++)
        {
            VideoDetails.Add(new VideoDetail() {Videoimage=new BitmapImage(new Uri("ms-appx:///Assets/panda.jpg")),Header=new BitmapImage(new Uri("ms-appx:///Assets/monkey.jpg")),Name="author",title="this is a video from test website",Time=DateTime.Now.Day.ToString(),Views=9000 });

        }
    }
}

public class VideoDetail
{
    public BitmapImage Videoimage { get; set;}

    public BitmapImage Header { get; set; }

    public string title { get; set; }

    public string Name { get; set; }

    public int Views { get; set; }

    public string Time { get; set; }
}