uwp 随机大小的缩略图使 adaptiveGridView 看起来很丑

Question

在我的应用程序中，我只检索视频文件的缩略图。我正在使用 uwp 社区工具包的 AdaptiveGridview 和一些其他文件属性以显示在 UI.

问题：

一些文件 return 空缩略图所以我必须用 StoreLogo 填充它们的 BitmapImage 然后将它绑定到图像在 UI 上。 StoreLogo在屏幕上看起来很奇怪，因为它的尺寸更大。
其他一些文件 return 缩略图尺寸相对较大，因此在 UI 上看起来很奇怪。
storeLogo 和更大的缩略图覆盖更多 space，因此从 UI 隐藏视频文件的标题（因为图像高度和宽度是自动的，因为它们必须响应 AdaptiveGridView） .

预期

我想做一个解决方案，在所有 3 种情况下我都可以检索到相同大小的缩略图，即；普通缩略图、较大缩略图和商店徽标替代方案。我希望所有这些都统一填充并根据设备屏幕 PPI 进行缩放。

尝试过

我尝试在 BitmapImage object 上设置 decoderpixelheight 和宽度，但这修复了图像的大小并且它看起来很窄，这对于用户。我知道这可以通过在 UI 上设置固定的图像高度和宽度来实现，但是它不会根据自适应 gridview 进行响应。

代码

XAML

<controls:AdaptiveGridView Name="AllVideosGridView" 
                           Style="{StaticResource MainGridView}"
                           ItemsSource="{x:Bind ViewModel.Videos}">
    <controls:AdaptiveGridView.ItemTemplate>
        <DataTemplate x:DataType="data:Video">
            <StackPanel Style="{StaticResource MainGridViewStack}" >
                <Grid>
                    <Image  Source="{x:Bind Display, Mode=OneWay}" x:Phase="3" Style="{StaticResource GridViewImage}" x:Name="ThumbImage"/>
                    <Border ... >
                        <TextBlock ..."/>
                    </Border>
                </Grid>
                <TextBlock .../>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" >
                    <TextBlock ...>
                    <TextBlock ..."/>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </controls:AdaptiveGridView.ItemTemplate>
</controls:AdaptiveGridView>

<...样式...>

<Style TargetType="Image" x:Key="GridViewImage">
    <Setter Property="Stretch" Value="UniformToFill"/>
    <Setter Property="HorizontalAlignment" Value="Center"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
</Style>

<Style TargetType="controls:AdaptiveGridView" x:Key="MainGridView">
    <Setter Property="OneRowModeEnabled" Value="False"/>
    <Setter Property="DesiredWidth" Value="220"/>
    <Setter Property="SelectionMode" Value="Single"/>
    <Setter Property="StretchContentForSingleRow" Value="False"/>
    <Setter Property="IsItemClickEnabled" Value="True"/>
</Style>

获取BitmapImage的函数

 public static async Task<BitmapImage> GetDisplay(StorageFile MyVideoFile)
    {
        var bitm = new BitmapImage();
        using (var imgSource = await MyVideoFile.GetScaledImageAsThumbnailAsync(ThumbnailMode.VideosView, 200, ThumbnailOptions.UseCurrentScale))
        {
            if (imgSource != null) { await bitm.SetSourceAsync(imgSource); }
            else
            {
                var storageLogoFile = await (await Windows.ApplicationModel.Package.Current.InstalledLocation.GetFolderAsync("Assets"))
                                             .GetFileAsync("StoreLogo.png");
                bitm.UriSource = new Uri(storageLogoFile.Path);
            }
        }
        return bitm;
    }

为图像元素赋值的代码

Display = await FileHelper.GetDisplay(file) // Display is property of type ImageSource and is bind to Image element in the datatemplate.

更新

这里有 2 个显示问题的屏幕截图，

截图1：在左下角显示一个标有红色箭头的缩略图，它比其他普通缩略图具有更高的高度，因此它与其他元素重叠，即：视频文件名和它下面的其他内容。

截图2：显示相同类型的问题，2 个缩略图 returned null 因此替换为资产中的 StoreLogo.png，它们也显示相同类型的丑陋 UI。

我想修复这两种情况，并希望图像的大小与所有其他普通缩略图完全一样（如屏幕截图所示）。

Answer 1

我认为可以通过将 ItemTemplate 中的顶级 StackPanel 替换为 Grid.

来解决您的问题

原因是 StackPanel 将提供 child 要求的任何内容，其中 Grid 可以将其 children 限制为成比例的大小。在您的情况下，无论每个图块有多大或多小，您都希望所有图像都具有相同的比例大小。一个例子是 -

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="3*" /> <!--This row will take 75% of the rest of the space (i.e. total height - the height of the 3rd row)-->
        <RowDefinition Height="1*" /> <!--This row will take 25% of the rest of the space (i.e. total height - the height of the 3rd row)-->
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Image Stretch="UniformToFill" Grid.Row="0" /> <!--0 is the default so you can safely remove Grid.Row="0" here-->
    <TextBlock Grid.Row="1" />
    <TextBlock Grid.Row="2" />
</Grid>

我实际上在我开发的一个应用程序中完全做到了 this(0:06)。 :) 请注意，所有图像的尺寸都不同，但它们在图块上看起来是一样的。

uwp 随机大小的缩略图使 adaptiveGridView 看起来很丑

uwp random sized thumbnails make look adaptiveGridView ugly

c#

scale

thumbnails

uwp-xaml

windows-community-toolkit