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

Posted

技术标签:

【中文标题】uwp 随机大小的缩略图使adaptiveGridView看起来很丑【英文标题】:uwp random sized thumbnails make look adaptiveGridView ugly 【发布时间】:2017-11-08 11:55:27 【问题描述】:

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

问题:

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

期待

我想制定一个解决方案,在所有 3 种情况下,我都可以检索相同大小的缩略图,即;普通缩略图、更大的缩略图和 storelogo 替代品。而且我希望它们都统一填充并根据设备屏幕 PPI 进行缩放。

试过

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

代码

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

我想修复这两种情况,并希望图像的大小与所有其他正常缩略图完全相同(如屏幕截图所示)。

【问题讨论】:

如果你能分享一下它现在的样子和你想要的样子,那将会很有帮助。 @JustinXL 请查看问题的更新版本,我添加了一些截图和一些描述:) 【参考方案1】:

我认为您的问题可以通过将ItemTemplate 中的***StackPanel 替换为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 随机大小的缩略图使adaptiveGridView看起来很丑的主要内容,如果未能解决你的问题,请参考以下文章

uwp StorageFile 没有得到简单的缩略图

UWP 文件缩略图保存在 SQL Server 数据库中

DEDECMS教程:列表页缩略图随机调用

5为你的页面增加图像

dedecms有缩略图则显示缩略图,没有则显示随机缩略图

UWP 应用程序从系统上的随机位置访问文件