Как автоматически настроить внешний вид и ширину элемента GridView в зависимости от ширины окна

Question

Я пытаюсь заставить свой GridView автоматически настраивать внешний вид своих элементов в зависимости от ширины экрана, но каждый раз, когда я привязываю окно своего приложения, элементы GridView продолжают собираться слишком близко друг к другу. Как я могу гарантировать, что каждый элемент GridView будет отображаться в отдельной строке и выделять всю строку, как элемент ListView, при наведении курсора, когда окно привязано к одной стороне или меньше определенной ширины (скажем, 720, что составляет часто используется для MasterDetailsView - CompactModeThresholdWidth = "720" )?

Широкое окно

Snapped window

Snapped window (expected result)

MainPage.xaml

Answer 1

Если вы хотите отображать элемент в каждой строке, когда размер окна меньше 720 пикселей, вы можете получить текущую ширину окна в методах ArrangeOverride и MeasureOverride, затем изменить размер элемента и изменить макет каждого элемента, чтобы отобразить их в каждом строка. Например:

MyGridViewPanel.cs

public class MyGridViewPanel : Panel
{
    private double _maxWidth;
    private double _maxHeight;
    protected override Size ArrangeOverride(Size finalSize)
    {
        var x = 0.0;
        var y = 0.0;
        double width = Window.Current.Bounds.Width;
        if (width <= 720)
        {
            foreach (var child in Children)
            {  
               
                var newpos = new Rect(0, y, width, _maxHeight);
                child.Arrange(newpos);
                y += _maxHeight;
            }
            return finalSize;
        }
        else {
            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)
    {
        double width = Window.Current.Bounds.Width;
        if (width <= 720)
        {
            foreach (var child in Children)
            {
                child.Measure(new Size(width, availableSize.Height));
                var desiredheight = child.DesiredSize.Height;
                if (desiredheight > _maxHeight)
                    _maxHeight = desiredheight;
            }
            return new Size(width, _maxHeight * Children.Count);
        }
        else {
            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);
        }
        
    }
}