CODEWITHSUNDEEP
xamlgridviewuwpuwp-xamlwindows-community-toolkit
Muhammad Touseef
Muhammad Touseef

Reputation: 4455

UWP Community Toolkit AdaptiveGridView control with one item only

I am making a media app with using UWP Community toolkit nuget package to use AdaptiveGridView Control, in order to show the video library contents.

Problem: When the items are very few or for example I have only 1 item it expands over the whole available width, which looks very bad, considering the fact its height is limited and doesn't changes and only width expands on whole screen, so the thumbnail of my item looks very bad. So when I have 4 or lesser items in a row (in this specific laptop resolution) they look bad due to width expansion, but more than 5 items in a row look good because they proportionate very good.

Attempt: I tried to set max width property of stackpanel in data template of my item so that the item doesn't expand more than a specific width and it works good, but now the problem is the distance between the items, my content of item (stackpanel) remains limited but whole gridviewitem expands hence covering a lot of useless space, as show in the image below.

  1. blue question marks show the useless space due to expansion of each item
  2. red line box show the actual boundary of one item with expanded extra space.

enter image description here

Obviously the space decreases if I resize the window to smaller screen, but this is not optimal for all screen sizes.

Summary: The default setting of adaptiveGridView (as in UWP community toolkit samples) works perfect if I have a lot of items, i.e: more than 5. But if item is one or 2 it expands all over the screen which looks bad because width becomes almost 700 at full expansion and height remains at 156 as I set it to be 156, if I remove the height of image one item will take whole screen, if there is 1 item only and that is not what I want because that will also look bad to the user (obviously).

here is my code.

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>

Styles

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

Upvotes: 2

Views: 495

Answers (1)

Justin XL
Justin XL

Reputation: 39006

There's already a property that helps you in this case. Try setting StretchContentForSingleRow to False on the control.

Upvotes: 2

Related Questions