Grid items not fitting to contents + keep getting partially covered

Apptacular Apps 386 Reputation points
2020-07-05T20:45:04.733+00:00

I'm trying to show a bunch of prime numbers in my Grid but the results are showing some visual obstructions (particularly for numbers above 1000). Changing the margin and padding values didn't have any effect. How can I stop this from happening?

Full screen mode

11366-ewide.png

Snapped mode

11348-esnapped.png

XAML

                <GridView Name="MyAdaptiveGridView"  
                                           SelectionMode="None"  
                                           IsItemClickEnabled="False"  
                                           ItemsSource="{x:Bind GridItems, Mode=OneWay}">  
                    <GridView.ItemTemplate>  
                        <DataTemplate x:DataType="x:String">  
                            <Grid  
                                    Margin="20">  
                                <TextBlock  
                                    Text="{Binding}"  
                                    TextWrapping="NoWrap"  
                                    Style="{StaticResource TitleTextBlockStyle}"/>  
                            </Grid>  
                        </DataTemplate>  
                    </GridView.ItemTemplate>  
                </GridView>  
Universal Windows Platform (UWP)
{count} votes

Accepted answer
  1. Fay Wang - MSFT 5,206 Reputation points
    2020-07-06T03:18:12.133+00:00

    Hello,

    Welcome to Microsoft Q&A!

    The size of each GridViewItem depends on the first item, so we could try to custom a panel to replace the GridView's ItemsPanel to show the items based on the longest item. Or using WrapPanel from Windows Community Toolkit to show the different widths, for example:

    .cs:

    public class CustomPanel : Panel  
    {  
        private double _maxWidth;  
        private double _maxHeight;  
    
        protected override Size ArrangeOverride(Size finalSize)  
        {  
            var x = 0.0;  
            var y = 0.0;  
            foreach (var child in Children)  
            {  
                if ((_maxWidth + x) > finalSize.Width)  
                {  
                    x = 0;  
                    y += _maxHeight;  
                }  
                var newpos = new Rect(x, y, _maxWidth, _maxHeight);  
                child.Arrange(newpos);  
                x += _maxWidth;  
            }  
            return finalSize;  
        }  
    
        protected override Size MeasureOverride(Size availableSize)  
        {  
            foreach (var child in Children)  
            {  
                child.Measure(availableSize);  
    
                var desirtedwidth = child.DesiredSize.Width;  
                if (desirtedwidth > _maxWidth)  
                    _maxWidth = desirtedwidth;  
    
                var desiredheight = child.DesiredSize.Height;  
                if (desiredheight > _maxHeight)  
                    _maxHeight = desiredheight;  
            }  
            var itemperrow = Math.Floor(availableSize.Width / _maxWidth);  
            var rows = Math.Ceiling(Children.Count / itemperrow);  
            return new Size(itemperrow * _maxWidth, _maxHeight * rows);  
        }  
    }  
    

    .xaml:

    <GridView Name="MyAdaptiveGridView" SelectionMode="None"  
                                            IsItemClickEnabled="False"  
                                            ItemsSource="{x:Bind GridItems, Mode=OneWay}">  
        <GridView.ItemsPanel>  
            <ItemsPanelTemplate>  
                <local:CustomPanel/>  
            </ItemsPanelTemplate>  
        </GridView.ItemsPanel>  
        <GridView.ItemTemplate>  
            <DataTemplate x:DataType="x:String">  
                <Grid Margin="20">  
                    <TextBlock Text="{Binding}" TextWrapping="NoWrap" Style="{StaticResource TitleTextBlockStyle}"/>  
                </Grid>  
            </DataTemplate>  
        </GridView.ItemTemplate>  
    </GridView>
    

0 additional answers

Sort by: Most helpful