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

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

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

一、WrapPanel 在 WPF 和 Avalonia 中的创建

WrapPanel 最重要的性质是换行，当长度不够的时候，WrapPanel 能够将控件项放到新的一行。

比如以下效果：

对应于下面的 xaml 描述：

<WrapPanel
    Width="100"
    Height="300"
    Background="Aqua">
    <TextBlock Text="Hello!" />
    <TextBlock Text="Avalonia!" />
    <TextBlock Text="AAA!" />
    <TextBlock Text="AAA!" />
    <TextBlock Text="AAA!" />
    <TextBlock Text="AAA!" />
    <TextBlock Text="AAA!" />
    <TextBlock Text="AAA!" />
    <TextBlock Text="AAA!" />
    <TextBlock Text="AAA!" />
</WrapPanel>

二、WrapPanel 在 html css 前端中的实现方式

个人研究出来的效果是这样的：

对应代码如下：

<template>
  <div class="container">
    <div class="wrap-panel">
      <span class="wrap-panel-child">Hello!</span>
      <span class="wrap-panel-child">HTML!</span>
      <span class="wrap-panel-child">CSS!</span>
      <span class="wrap-panel-child">AAA!</span>
      <span class="wrap-panel-child">AAA!</span>
      <span class="wrap-panel-child">AAA!</span>
      <span class="wrap-panel-child">AAA!</span>
      <span class="wrap-panel-child">AAA!</span>
      <span class="wrap-panel-child">AAA!</span>
      <span class="wrap-panel-child">AAA!</span>
      <span class="wrap-panel-child">AAA!</span>
    </div>
  </div>
</template>

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

  .wrap-panel {
    flex-wrap: wrap;
    display: flex;
  }

  .wrap-panel-child {
    display: inline-block;
  }
</style>

三、结论

在 flex 容器中使用 flex-wrap:wrap; 属性，配合内部项的 display: inline-block; 可以实现自动换行，但是在 flex 容器中直接指定尺寸会存在问题，因为 wrap 的行距是按照容器的高度来的，如果指定了高度，那么就会将高度均分，我们希望换行的时候就紧贴着，为此使用了在最外面再套一个 container ，去指定 .container 的外观，实现和 Avalonia 中的等效样式。