uwp隨機大小的縮略圖使看起來adaptiveGridView醜陋

在我的應用程序中，我只檢索視頻文件的縮略圖。我正在使用uwp社區工具包的AdaptiveGridview以及一些其他文件屬性在UI上顯示。uwp隨機大小的縮略圖使看起來adaptiveGridView醜陋

問題：

某些文件返回null縮略圖，所以我必須填補他們的BitmapImage與StoreLogo，然後將其綁定到UI上的圖像。 StoreLogo在屏幕上看起來很奇怪，因爲它的尺寸較大。
其他一些文件會返回相對較大的縮略圖大小，所以它在UI上看起來很奇怪。
storeLogo和較大的縮略圖都覆蓋更多空間，因此隱藏視頻文件的標題從UI（因爲圖像的高度和寬度是自動的，因爲它們必須與AdaptiveGridView響應）。

期望

我想在我可以在所有3例，即檢索縮略圖的大小相同的解決方案;正常的縮略圖，更大的縮略圖和storelogo選項。我希望所有這些都可以根據設備屏幕PPI進行統一填充和縮放。

試圖

我試圖設置decoderpixelheight和寬度的BitmapImage對象，但是，修復圖像的大小和它看起來收縮這不是用戶一個漂亮的外觀。我知道它可以通過在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>

< ... ...樣式>

<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。

欲解決這些2個場景和想要的圖像的尺寸是完全一樣的所有其它正常縮略圖（如圖中截圖）

來源

2017-06-07 touseef

這將是有益的，如果你能分享它現在爲n你想要的樣子看起來像。 –

@JustinXL請參閱問題的更新版本，我添加了一些屏幕截圖和一些說明:) – touseef

我想您的問題可以通過用Grid更換ItemTemplate內頂級StackPanel固定。

原因是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）。 :)請注意，圖像的大小各不相同，但它們在瓷磚上看起來是一樣的。

來源

2017-06-07 11:48:05

uwp隨機大小的縮略圖使看起來adaptiveGridView醜陋

回答

相關問題