WPF 和 Avalonia 开发者的 html css 前端指南 Grid 篇

WPF 和 Avalonia 开发者的 html css 前端指南 Grid 篇

笔者前端框架使用的是 Vue3 + Deno。
笔者主要会以 Avalonia 作为 C# 技术部分的示例。
本文主要是向大家列出 WPF 和 Avalonia 的 Grid 在 html 和 css 的实现方法。
你其实也完全可以使用纯原生的 html+css，或者是 React、Blazor 等等框架来实现，因为本质是 html + css。

一、Grid 的创建

在 Avalonia 中，我们创建了一个这样的 Grid，一个天蓝色的具有固定尺寸，内部具有一个 TextBlock 元素的布局。

<Grid
    Width="300"
    Height="300"
    Background="Aqua">
    <TextBlock Text="hello avalonia" />
</Grid>

在 WPF 中，内部的 TextBlock 理应会居中……但是 Avalonia 中是这样的，很是奇怪。

在前端的部分，我们可以以这样的方式创建一个同样效果的网格。

<template>
  <div class="grid-container">
    <span class="grid-child">hello html+css</span>
  </div>
</template>

<style lang="css" scoped>
  .grid-container {
    display: grid;
    background-color: aqua;
    width: 300px;
    height: 300px;
  }

  .grid-child {
    /* todo */
  }
</style>

在这边，你可以发现一些共通之处，于是我们来列一下对应关系吧。

WPF 和 Avalonia html + css 备注
<Grid> display:grid
Background background-color 事实上 background-color 只是 css 中代表纯色的样式，如果要填入图片得用另外的属性，我们会在 background 的地方详细说明
Width width 在 css 中要注意有单位，如 px
Height height 在 css 中要注意有单位，如 px

二、在网格中的对齐

你可以发现，我们默认创建出来的结构，样子根本不一样，原因是因为各个框架对于默认对齐的看法不一样，在前端中，水平居中比垂直居中要来的显眼很多……

那么我们来将内容进行居中吧。

在 Avalonia 中，我们为内部的 TextBlock 添加了 HorizontalAlignment="Center" 和 VerticalAlignment="Center"，通过这种方式实现了居中。

具体代码请看这里：

<Grid
    Width="300"
    Height="300"
    Background="Aqua">
    <TextBlock
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Text="hello avalonia" />
</Grid>

在前端的实现中，我们可以做成这样的效果：

我们使用了 justify-self: center 和 align-self: center 来让内容进行了居中。

其中 justify-self 代表水平对齐，参考 HorizontalAlignment ，align-self 代表垂直对齐，参考 VerticalAlignment。

详细的对应表我们可以来看一下这个：

WPF 和 Avalonia html + css 备注
HorizontalAlignment="Left" justify-self: self-start 水平、左对齐
HorizontalAlignment="Right" justify-self: self-end 水平、右对齐
HorizontalAlignment="Center" justify-self: center 水平、居中
VerticalAlignment="Top" align-self: self-start 竖直、顶对齐
VerticalAlignment="Bottom" align-self: self-end 竖直、底对齐
VerticalAlignment="Center" align-self: center 竖直、居中
VerticalAlignment="Stretch" align-self: stretch 水平、拉伸
VerticalAlignment="Stretch" align-self: stretch 竖直、拉伸

同样的，如果你使用 Stretch 拉伸，宽度和高度请不要指定。

我们来看一下在前端使用 stretch 和 margin 的例子：

这就是 具体代码请注意 .grid-child 的效果。

<template>
  <div class="grid-container">
    <div class="grid-child"></div>
  </div>
</template>

<style lang="css" scoped>
  .grid-container {
    display: grid;
    background-color: aqua;
    width: 300px;
    height: 300px;
  }

  .grid-child {
    background-color: yellow;
    margin: 5px 5px 5px 5px;
    align-self: stretch;
    justify-self: stretch;
  }
</style>

三、Grid 的网格切分

1. WPF 和 Avalonia 的网格切分

说到网格，必不可少的就是介绍网格的切分了。

我们虽然我使用的是 Avalonia，但是为了保证和 WPF 的兼容，我们还是使用符合 WPF 风格的网格切分来进行布局。

我们希望在每个网格上提供一个 TextBlock，来看看怎么样吧。

    <Grid
        Width="300"
        Height="300"
        Background="Aqua">

        <Grid.RowDefinitions>
            <RowDefinition Height="80" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="2*" />
            <RowDefinition Height="auto" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="3*" />
            <ColumnDefinition Width="2*" />
        </Grid.ColumnDefinitions>

        <TextBlock
            Grid.Row="0"
            Grid.Column="0"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Text="0,0" />
        <TextBlock
            Grid.Row="0"
            Grid.Column="1"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Text="1,0" />
        <TextBlock
            Grid.Row="0"
            Grid.Column="2"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Text="2,0" />
        <TextBlock
            Grid.Row="1"
            Grid.Column="0"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Text="0,1" />
        <TextBlock
            Grid.Row="1"
            Grid.Column="1"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Text="1,1" />
        <TextBlock
            Grid.Row="1"
            Grid.Column="2"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Text="2,1" />
        <TextBlock
            Grid.Row="2"
            Grid.Column="0"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Text="0,2" />
        <TextBlock
            Grid.Row="2"
            Grid.Column="1"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Text="1,2" />
        <TextBlock
            Grid.Row="2"
            Grid.Column="2"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Text="2,2" />
        <TextBlock
            Grid.Row="3"
            Grid.Column="0"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Text="0,3" />
        <TextBlock
            Grid.Row="3"
            Grid.Column="1"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Text="1,3" />
        <TextBlock
            Grid.Row="3"
            Grid.Column="2"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Text="2,3" />

    </Grid>

我知道这个写法很长，事实上，因为我们没有办法照顾到 WPF 和 Avalonia 的样式的写法，为此选择了最为冗长的写法。
我们的网格划分照顾到了 Grid 的 3 种划分方式：

  1. 像素
  2. 星*
  3. Auto

在 WPF 和 Avalonia 中，这几个的意思是：

  1. <RowDefinition Height="80" /> 这里指定了第一行就是 80 像素
  2. <RowDefinition Height="1*" /> 和 <RowDefinition Height="2*" /> 可以将除了像素 和 Auto 分完后剩下的东西，再进行比例的拆分，这里的 1* 和 2* 的意思就是将剩下的内容，其中 1* 占 1/(1+2) 份，而 2* 占 2/(1+2)份。
  3. Auto 的高度取决于内部的控件，如果内部控件很大，那 Auto 也会很大。

好了，下面我们来看前端的实现。

2. html + css 前端的网格切分

在 html 和 css 中，你可以使用 grid-template-rows 和 grid-template-columns 以及在容器中，使用 grid-row 和 grid-column 。

具体的效果是这样的：

<template>
  <div class="grid-container">
    <span class="grid-child grid-child-0-0">0,0</span>
    <span class="grid-child grid-child-1-0">1,0</span>
    <span class="grid-child grid-child-2-0">2,0</span>
    <span class="grid-child grid-child-0-1">0,1</span>
    <span class="grid-child grid-child-1-1">1,1</span>
    <span class="grid-child grid-child-2-1">2,1</span>
    <span class="grid-child grid-child-0-2">0,2</span>
    <span class="grid-child grid-child-1-2">1,2</span>
    <span class="grid-child grid-child-2-2">2,2</span>
    <span class="grid-child grid-child-0-3">0,3</span>
    <span class="grid-child grid-child-1-3">1,3</span>
    <span class="grid-child grid-child-2-3">2,3</span>
  </div>
</template>

<style lang="css" scoped>
  .grid-container {
    display: grid;
    background-color: aqua;
    width: 300px;
    height: 300px;

    grid-template-rows: 80px 1fr 2fr auto;
    grid-template-columns: 1fr 3fr 2fr;
  }

  .grid-child {
    align-self: center;
    justify-self: center;
  }

  .grid-child-0-0 {
    grid-row: 1;
    grid-column: 1;
  }

  .grid-child-1-0 {
    grid-row: 1;
    grid-column: 2;
  }

  .grid-child-2-0 {
    grid-row: 1;
    grid-column: 3;
  }

  .grid-child-0-1 {
    grid-row: 2;
    grid-column: 1;
  }

  .grid-child-1-1 {
    grid-row: 2;
    grid-column: 2;
  }

  .grid-child-2-1 {
    grid-row: 2;
    grid-column: 3;
  }

  .grid-child-0-2 {
    grid-row: 3;
    grid-column: 1;
  }

  .grid-child-1-2 {
    grid-row: 3;
    grid-column: 2;
  }

  .grid-child-2-2 {
    grid-row: 3;
    grid-column: 3;
  }

  .grid-child-0-3 {
    grid-row: 4;
    grid-column: 1;
  }

  .grid-child-1-3 {
    grid-row: 4;
    grid-column: 2;
  }

  .grid-child-2-3 {
    grid-row: 4;
    grid-column: 3;
  }
</style>

你需要看到的是，你可以用类似 80px 表示 WPF 和 Avalonia 中的像素写法。

关于 WPF 和 Avalonia 的星号相对比例写法，你可以使用 fr 单位来表示，而 Auto 在 css 里面也是支持的。

3. html + css 前端的差别

差异表可以在这里看到。

WPF 和 Avalonia html + css 备注
Grid.RowDefinitions 和一系列定义 grid-template-rows 同样支持像素、星号和 Auto 的写法，其中像素在 css 里面要带单位 px，星号在 css 里面会写成 fr，如 1fr,2fr，Auto 写成 auto
Grid.ColumnDefinitions 和一系列定义 grid-template-columns 同样支持像素、星号和 Auto 的写法，其中像素在 css 里面要带单位 px，星号在 css 里面会写成 fr，如 1fr,2fr，Auto 写成 auto
Grid.Row grid-row WPF 和 Avalonia 里面从 0 开始，但是 css 里面从 1 开始，不用带单位！
Grid.Column grid-column WPF 和 Avalonia 里面从 0 开始，但是 css 里面从 1 开始，不用带单位！

我们在这里没有讨论 Grid.ColumnSpan 和 Grid.RowSpan 的状况，实际上你可以使用 grid-column-start、grid-column-end、grid-row-start和grid-row-end来进行相关配置。

四、网格内容的层叠

在 Avalonia 中，如果你没有划分网格，只有层叠的需求。
Avalonia 会推荐你使用 Panel 来实现同样的效果，Panel 不具有划分网格的能力，
但是足够简单，如果为了性能而优化的话，使用 Panel 是一个更好的选择。

在 WPF 和 Avalonia 中，我们会使用 Grid 在同一个格点堆叠一些 Border 或者是 TextBlock 这样的内容实现卡片的效果。
总之，网格的层叠是我们实现样式外观的一种方式。

我们来看一下 WPF 和 Avalonia 中，我们会使用这种技巧做怎样的事情。

如你所见，虽然你可以使用 Border 内部的 Child 实现嵌套，但是 Grid 本身也是支持层叠的。

Grid 的层叠在很多时候，可以帮助你实现一些特殊的效果，比如右上角的装饰。

注意右上角的 New!!!!!!!!。

代码请看下面这样。

    <Grid
        Width="300"
        Height="300"
        Background="Aqua">

        <TextBlock
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Text="Hello, Avalonia!" />

        <TextBlock
            HorizontalAlignment="Right"
            VerticalAlignment="Top"
            Text="New!!!!!!!!" />

    </Grid>

那么我们可以如何在前端 html 和 css 中实现对应效果呢？

4.1 错误的实现

在前端中，grid 系统内部存在自动分格子的机制，所以，下面的这种效果就是你想当然的做法，作为错误示例，希望你能够看到。

完全和上面不一样吧。

错误的代码是这样的。

<template>
  <div class="grid-container">
    <span class="grid-child">Hello, html+css!</span>
    <span class="corner-tag">new!!!!!!!</span>
  </div>
</template>

<style lang="css" scoped>
  .grid-container {
    display: grid;
    background-color: aqua;
    width: 300px;
    height: 300px;
  }

  .grid-child {
    align-self: center;
    justify-self: center;
  }

  .corner-tag {
    align-self: self-start;
    justify-self: self-end;
  }
</style>

4.2 正确的实现，对与错其实很近

其实你离正确的实现只差几步，下面是你要做的事情：

  1. 指定网格要划分几格
  2. 为元素指定放置在哪个格子

其实在 WPF 和 Avalonia 里面，你也完全可以指定要划分多少格子以及放置在哪里。

<template>
  <div class="grid-container">
    <span class="grid-child">Hello, html+css!</span>
    <span class="corner-tag">new!!!!!!!</span>
  </div>
</template>

<style lang="css" scoped>
  .grid-container {
    display: grid;
    background-color: aqua;
    width: 300px;
    height: 300px;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }

  .grid-child {
    align-self: center;
    justify-self: center;
    grid-row: 1;
    grid-column: 1;
  }

  .corner-tag {
    align-self: self-start;
    justify-self: self-end;
    grid-row: 1;
    grid-column: 1;
  }
</style>

五、结论

WPF 和 Avalonia 的 Grid 完全可以在 html css 上直接迁移，虽然会有一些名字上的差异，但是完全对迁移没有任何影响。
WPF 和 Avalonia 的 Grid 可以说是 UI 的基础逻辑，虽然前端也有 flex 这样更为经典的布局容器，但是我认为，如果你更擅长 WPF 和 Avalonia，使用 Grid 也同样能够做出一样的效果，完全没有使用 flex 的必要。

posted @ 2025-03-20 13:48  fanbal  阅读(221)  评论(0)    收藏  举报