c# - uwpのランダムなサイズのサムネイルは、adaptiveGridViewを醜く見せます

Question

私のアプリでは、ビデオファイルのみのサムネイルを取得しています。UIに表示するために、uwpコミュニティツールキットのAdaptiveGridviewを他のファイルプロパティとともに使用しています。

問題：

一部のファイルは null サムネイルを返すため、BitmapImageにStoreLogoを入力してから、UI の Image にバインドする必要があります。StoreLogo はサイズが大きいため、画面上では非常に奇妙に見えます。
他の一部のファイルは、比較的大きなサムネイルサイズを返すため、UI で奇妙に見えます。
storeLogo と大きなサムネイルはどちらもより多くのスペースをカバーするため、UI からビデオファイルのタイトルを非表示にします (画像の高さと幅は自動であり、AdaptiveGridView で応答する必要があるため)。

期待

3 つのケースすべてで同じサイズのサムネイルを取得できるソリューションを作成したいと考えています。通常のサムネイル、大きいサムネイル、ストアロゴの代替。そして、それらすべてを均一に塗りつぶし、デバイス画面の PPI に従ってスケーリングする必要があります。

試した

私は BitmapImage オブジェクトにデコーダーのピクセル高さと幅を設定しようとしましたが、それは画像のサイズを修正し、ユーザーにとって見栄えの悪いくびれたように見えます。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;
    }

コード Image 要素に値を代入する

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 つのシナリオを修正し、画像のサイズを他のすべての通常のサムネイルとまったく同じにしたい (スクリーンショットに示されているように)。

c# - uwpのランダムなサイズのサムネイルは、adaptiveGridViewを醜く見せます

1 に答える 1

Related

Reference