uwp 随机大小的缩略图使 adaptiveGridView 看起来很丑
uwp random sized thumbnails make look adaptiveGridView ugly
在我的应用程序中,我只检索视频文件的缩略图。我正在使用 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。
我想修复这两种情况,并希望图像的大小与所有其他普通缩略图完全一样(如屏幕截图所示)。
我认为可以通过将 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 和一些其他文件属性以显示在 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。
我想修复这两种情况,并希望图像的大小与所有其他普通缩略图完全一样(如屏幕截图所示)。
我认为可以通过将 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)。 :) 请注意,所有图像的尺寸都不同,但它们在图块上看起来是一样的。