2017-05-06 59 views
2

我想提出一個媒體應用程序使用UWP社區工具 NuGet包使用AdaptiveGridView控制,爲了顯示視頻庫內容。UWP社區工具包AdaptiveGridView控制一個項目只有

問題: 當項目非常少,或者例如我只有1項是擴大在整個可用寬度,看起來非常糟糕,在考慮到它的高度是有限的,犯規的變化,只有變寬在整個屏幕上,所以我的項目的縮略圖看起來非常糟糕。所以當我在連續4個或更少的項目(在這個特定的筆記本電腦分辨率),他們看起來不好,因爲寬度擴展,但超過5個項目連續看起來不錯,因爲他們propsate非常好。

嘗試: 我試圖設置StackPanel中的最大寬度財產在我的項目的數據模板,這樣項犯規擴大超過一個特定的寬度和它的作品不錯,但現在的問題是物品之間的距離,我的內容(stackpanel)仍然有限,但整個gridviewitem擴展,因此覆蓋了很多無用的空間,如下圖所示。

  1. 藍色問號顯示無用的空間,由於每個項目
  2. 紅線框顯示一個項目時,首先擴大了額外的空間的實際邊界的擴張。

enter image description here

顯然空間減小,如果我調整窗口的大小,以較小的屏幕,但這不是最佳的所有屏幕尺寸。

摘要: adaptiveGridView的默認設置(如UWP社區工具包樣本)的作品完美的,如果我有很多的項目,即:超過5個。但是,如果產品的一個或2所有上展開屏幕看起來很糟糕,因爲在完全展開時寬度幾乎變爲700並且高度保持在156,因爲我將它設置爲156,如果我移除圖像的高度,則一個項目將佔用整個屏幕,如果僅有一個項目並且不是什麼我想,因爲這對用戶來說也很不好(顯然)。

這是我的代碼。

gridview的

<controls:AdaptiveGridView Name="SuggestionGridView" 
          Style="{StaticResource MainGridView}"        
          SelectionChanged="SelectionChanged" 
          ItemsSource="{x:Bind Suggestions, Mode=OneWay}"> 
    <controls:AdaptiveGridView.ItemTemplate> 
     <DataTemplate x:DataType="data:Video"> 
      <StackPanel Margin="4" MaxWidth="276"> 
       <Grid> 
        <Image  Source="{x:Bind Thumbnail}" Style="{StaticResource GridViewImage}"/> 
        <Border Style="{StaticResource TimeBorder}"> 
          <TextBlock Text="{x:Bind Duration}" Foreground="White"/> 
        </Border> 
       </Grid> 
       <TextBlock Text="{x:Bind Name}" Style="{StaticResource GridViewVideoName}"/> 
       <TextBlock Text="{x:Bind ParentName}" Style="{StaticResource GridViewParentName}"/> 
       <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch"> 
        <TextBlock Text="{x:Bind Views}" Style="{StaticResource GridViewViews}"/> 
        <TextBlock Text="Views" HorizontalAlignment="Right"/> 
       </StackPanel> 
      </StackPanel> 
     </DataTemplate> 
    </controls:AdaptiveGridView.ItemTemplate> 
</controls:AdaptiveGridView> 

樣式

<Style TargetType="controls:AdaptiveGridView" x:Key="MainGridView"> 
    <Setter Property="Grid.Row" Value="1"/> 
    <Setter Property="OneRowModeEnabled" Value="False"/> 
    <Setter Property="DesiredWidth" Value="264"/> 
    <Setter Property="SelectionMode" Value="Single"/> 
</Style> 

<Style TargetType="Image" x:Key="GridViewImage"> 
    <Setter Property="Height" Value="156"/> <!--if I remove this property then one item expands to full availble height and width and looks really bad specially with the thumbnail.--> 
    <Setter Property="Stretch" Value="UniformToFill"/> 
    <Setter Property="HorizontalAlignment" Value="Center"/> 
    <Setter Property="VerticalAlignment" Value="Center"/> 
</Style> 

回答

2

有已經可以幫助你在這種情況下的屬性。嘗試在控件上設置StretchContentForSingleRowFalse

+1

謝謝你:)它像一個魅力:) – touseef

相關問題