UWP XAML 中的 YouTube 样式搜索结果

Question

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

谁能给我一个数据模板，我可以用它来显示搜索结果，它会像 YouTube 那样显示，不会导致搜索结果离开页面。

下面的截图来自 TubeCast，和我需要的差不多。

https://imgur.com/a/rUSGYIJ

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

谢谢

Answer 1

为了更好地适应你的网格视图，请使用 uwp 社区工具包中的 AdaptiveGridView (https://docs.microsoft.com/en-us/windows/communitytoolkit/controls/adaptivegridview)

其次是一些文档，可以帮助您使用您想要的数据模板

https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/item-containers-templates

https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/item-templates-listview

Answer 2

我还没有任何 XAML 代码，因为我的 XAML 知识充其量是很差的。我基本上需要一个 YouTube 风格的视图，其中向用户显示来自 YouTube 的结果，包括视频标题和缩略图。

@user3733885 我在@touseefbsb 的回复中检查了您的问题和cmets。正如 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; }
}