HandyControl - Grid 栅格

参考 https://handyorg.github.io/handycontrol/extend_controls/grid/

属性

Row行

属性	描述	默认值
Gutter	栅格间隔	0

Col 列

属性	描述	默认值
Layout	布局方式
Offset	栅格左侧的间隔格数	0
Span	栅格占据的列数	24
IsFixed	该列是否固定	false

Span 必须大于等于1，小于等于24

Layout属性

xaml中 Layout 写法的3种方式：

1. Layout="{extension:ColLayout Xs=4, Sm=6, Md=8, Lg=9, Xl=11}"
2. Layout=“4,6,8,9,11”
3. Layout=“4 6 8 9 11”

上面5个值分别对应5个分辨率宽度:

XsMaxWidth = 768;

SmMaxWidth = 992;

MdMaxWidth = 1200;

LgMaxWidth = 1920;

XlMaxWidth = 2560;

就是说如果Row元素宽度小于768则Span=4；大于等于768、小于992，Span=6；依此类推。大于等于2560时，Span=11。

IsFixed属性

<hc:Col Layout="0" IsFixed="True" Width="200">
    <Border Background="Gray" Height="36" CornerRadius="4"/>
</hc:Col>

Row计算每个Col宽度比例的代码如下

internal int GetLayoutCellCount(ColLayoutStatus status)
{
    var result = 0;

    if (Layout != null)
    {
        if (!IsFixed)
        {
            switch (status)
            {
                case ColLayoutStatus.Xs:
                    result = Layout.Xs;
                    break;
                case ColLayoutStatus.Sm:
                    result = Layout.Sm;
                    break;
                case ColLayoutStatus.Md:
                    result = Layout.Md;
                    break;
                case ColLayoutStatus.Lg:
                    result = Layout.Lg;
                    break;
                case ColLayoutStatus.Xl:
                    result = Layout.Xl;
                    break;
                case ColLayoutStatus.Xxl:
                    result = Layout.Xxl;
                    break;
                case ColLayoutStatus.Auto:
                    break;
                default:
                    throw new ArgumentOutOfRangeException(nameof(status), status, null);
            }
        }
    }
    else
    {
        result = Span;
    }

    return result;
}

switch-case部分是根据Row的宽度，取相应的Layout元素值。如Layout=“4 6 8 9 11”，宽度大于768、小于992时取Layout.Sm（值为6）。

如果Layout为空，返回Span（默认为24）。因为每行最多24个单元格，因此，Row在下一行安排该Col。

所以如果想设置一个固定宽度的Col，应该让其他Col的Span之和为24，并设置其Layout值（不为空即可，可以设置Layout=“0”）。