Question

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

问题：

有些文件会返回null缩略图，因此我必须用 StoreLogo 填充 BitmapImage ，然后将其绑定到UI上的Image。 StoreLogo在屏幕上看起来很奇怪，因为它的尺寸更大。
其他一些文件会返回相对较大的缩略图大小，因此在UI上看起来很奇怪。
storeLogo和较大的缩略图都会占用更多空间，因此会从UI隐藏视频文件的标题（因为图像高度和宽度是自动的，因为它们必须使用AdaptiveGridView进行响应）。

期望

我想提出一个解决方案，我可以在所有3种情况下检索相同大小的缩略图，即;普通缩略图，更大的缩略图和storelogo替代方案。我希望所有这些都是Uniform to Fill并根据设备屏幕PPI进行缩放。

试过

我尝试在BitmapImage对象上设置 decoderpixelheight 和宽度，但这会修复图像的大小，并且它看起来有限，这对用户来说不是很漂亮。我知道可以通过在UI上的图像上设置固定的高度和宽度来实现，但是根据自适应网格视图它不会响应。

提前感谢您阅读这篇长篇文章。

CODE

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>

＆LT; ...样式...＆GT;

<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个缩略图返回null，因此从资产中替换为StoreLogo.png，它们也显示相同类型的丑陋UI。

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

Answer 1

我认为可以使用StackPanel替换ItemTemplate内的顶级Grid来解决您的问题。

StackPanel的原因会给出孩子要求的任何内容，Grid可以将其子项限制为比例大小。在您的情况下，无论每个图块有多大或多小，您都希望所有图像具有相同的比例尺寸。一个例子是 -

<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随机大小的缩略图使selfGridView看起来很难看

1 个答案: