65.9K
CodeProject 正在变化。 阅读更多。
Home

Silverlight 的 Grid960 布局

Dave Kerr
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.94/5 (12投票s)

2012年4月29日

CPOL

3分钟阅读

viewsIcon

46959

downloadIcon

1478

960 网格系统是网站非常流行的布局系统 - Grid960 让您可以在 Silverlight 中使用它！

引言

如果您从未听说过 960 网格系统，请浏览此页面：http://960.gs/。 它的理念是您的页面内容宽度不超过 960 像素 - 然后您将内容一致地布局在 960 像素的十二列中。 例如，在下面的页面中，我们有：

  1. 第一行，三个列被“公司”占用，三个列是空格，六个列被菜单占用。
  2. 第二行，所有十二列被标语占用。
  3. 第三行，两个六列的框。
  4. 第四行和第五行，四个三列的框。

960gs 是一个基于 CSS 的布局系统，适用于设计为水平固定和垂直固定或流动的网页。 为什么是 960？ 好吧，我们将 960 个水平像素（对于大多数屏幕来说是一个舒适的宽度）除以 12 列 - 然后使用跨越这些列中的一个或多个的元素来布局我们的页面。 Grid960 组件可以用于 12、16、24 列或自定义列数的布局。 960 是网页布局的一个好数字 - 因为它具有很高的可除性 - 960 可以被 2、3、4、5、6、8、10、12、15、16、20、24、30、32、40、48、60、64、80、96、120、160、192、240、320 和 480 整除。

使用 Grid960

使用 Grid960 非常简单。 首先，您必须添加对 Grid960 的引用

xmlns:g960="clr-namespace:Grid960;assembly=Grid960"

现在，我们可以将网格添加到页面

<!-- Create a Grid960... -->
<g960:Grid960> 
</g960:Grid960>

接下来，我们将 Grid960Row 行添加到 Grid960

<!-- Create a Grid960... -->
<g960:Grid960>

    <!-- First row. -->
    <g960:Grid960Row>
    </g960:Grid960Row>

    <!-- Second row. -->
    <g960:Grid960Row>
    </g960:Grid960Row>
    
</g960:Grid960>

最后一步是将 Grid960Element 元素添加到行中。 在下面，我们有一个三列的行和一个两列的行

<!-- Create a Grid960... -->
<g960:Grid960>

    <!-- First row. -->
    <g960:Grid960Row>
        <g960:Grid960Element ColumnSpan="4">
        </g960:Grid960Element>
        <g960:Grid960Element ColumnSpan="4">
        </g960:Grid960Element>
        <g960:Grid960Element ColumnSpan="4">
        </g960:Grid960Element>
    </g960:Grid960Row>

    <!-- Second row. -->
    <g960:Grid960Row>
        <g960:Grid960Element ColumnSpan="6">
        </g960:Grid960Element>
        <g960:Grid960Element ColumnSpan="6">
        </g960:Grid960Element>
    </g960:Grid960Row>
    
</g960:Grid960>

从本质上讲，这就是 Grid960 布局系统的全部内容！

当您访问 960gs 主页时，您可以看到许多常见站点（例如 Drupal！）如何实际使用 960gs 进行布局的示例。

示例应用程序

示例应用程序显示了基于该系统的两个示例布局。 它还提供了两种最流行的布局（12 列和 16 列）的快速参考图。

自定义 Grid960

以下是 Grid960 系统的每个主要部分的关键属性。

Grid960

核心布局选项

  • int Columns - 列数 - 默认为 12。
  • double ColumnMargin - 每列左右的边距。 默认为 10 像素 - 使用 12 列，这使得每列的宽度为 60 像素。
  • double ColumnWidth - 每列的宽度。正是这三个属性的组合使网格的总宽度达到 960 像素。

预设

  • Preset Preset - 预设可以是 Grid960_12_Columns、Grid960_16_Columns 或 Grid960_24_Columns。 设置这些预设中的任何一个都会更改上面的所有三个属性。

Grid960Row

  • FrameworkElement FullWidthContent - 可以将其设置为任何框架元素，它将占据行的高度和屏幕的完整宽度（对于布局背景非常有用）。
  • FrameworkElement RowWidthContent - 可以将其设置为任何框架元素，它将占据屏幕的行宽度（几乎总是 960 像素）。
  • bool FillAvailableSpace - 如果设置为 true，则如果完整的 Grid960 没有填充屏幕上的垂直空间，则将拉伸此行以填充可用空间。

Grid960Element

  • int ColumnSpan - Grid 元素最重要的属性 - 它跨越的列数。
  • int ColumnOffset - 允许您将 grid 元素偏移特定数量的列。 默认为零。

谢谢

我要感谢 Nathan Smith，他慷慨地允许我将 960gs 移植到 Silverlight。

炫耀一下！

如果你们中的任何一个使用它创建了一个很棒的布局，请告诉我 - 我很乐意在此页面上放置一些示例！

和往常一样，欢迎提出任何意见或建议！

历史

  • 2013 年 6 月 11 日：初始版本
© . All rights reserved.