我想提出一個媒體應用程序使用UWP社區工具 NuGet包使用AdaptiveGridView控制,爲了顯示視頻庫內容。UWP社區工具包AdaptiveGridView控制一個項目只有
問題: 當項目非常少,或者例如我只有1項是擴大在整個可用寬度,看起來非常糟糕,在考慮到它的高度是有限的,犯規的變化,只有變寬在整個屏幕上,所以我的項目的縮略圖看起來非常糟糕。所以當我在連續4個或更少的項目(在這個特定的筆記本電腦分辨率),他們看起來不好,因爲寬度擴展,但超過5個項目連續看起來不錯,因爲他們propsate非常好。
嘗試: 我試圖設置StackPanel中的最大寬度財產在我的項目的數據模板,這樣項犯規擴大超過一個特定的寬度和它的作品不錯,但現在的問題是物品之間的距離,我的內容(stackpanel)仍然有限,但整個gridviewitem擴展,因此覆蓋了很多無用的空間,如下圖所示。
- 藍色問號顯示無用的空間,由於每個項目
- 紅線框顯示一個項目時,首先擴大了額外的空間的實際邊界的擴張。
顯然空間減小,如果我調整窗口的大小,以較小的屏幕,但這不是最佳的所有屏幕尺寸。
摘要: 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>
謝謝你:)它像一個魅力:) – touseef