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

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

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

一、StackPanel 的创建

在 WPF 和 Avalonia 中，你可以使用下面的写法创建一个堆叠的样式：

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
    <TextBlock Text="hello avalonia AAA!" />
    <TextBlock Text="hello avalonia BBB!" />
    <TextBlock Text="hello avalonia CCC!" />
    <TextBlock Text="hello avalonia DDD!" />
    <TextBlock Text="hello avalonia EEE!" />
    <TextBlock Text="hello avalonia FFF!" />
</StackPanel>

而像这样的布局在 html css 中其实是最为基础的内容：

<template>
  <div class="stack-panel">
    <span class="stack-panel-child">hello html + css AAA!</span>
    <span class="stack-panel-child">hello html + css BBB!</span>
    <span class="stack-panel-child">hello html + css CCC!</span>
    <span class="stack-panel-child">hello html + css DDD!</span>
    <span class="stack-panel-child">hello html + css EEE!</span>
    <span class="stack-panel-child">hello html + css FFF!</span>
  </div>
</template>

<style lang="css" scoped>
  .stack-panel {
    display: block;
  }

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

二、StackPanel 纵向排列中的水平对齐

在 WPF 和 Avalonia 中的对齐我们在 Grid 中有进行介绍，我们来提供一个示例效果，其中 StackPanel 的前三项分别是左对齐、居中和右对齐。

图片：

代码：

<StackPanel
    Width="200"
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    Background="Aqua">
    <TextBlock HorizontalAlignment="Left" Text="hello avalonia AAA!" />
    <TextBlock HorizontalAlignment="Center" Text="hello avalonia BBB!" />
    <TextBlock HorizontalAlignment="Right" Text="hello avalonia CCC!" />
    <TextBlock Text="hello avalonia DDD!" />
    <TextBlock Text="hello avalonia EEE!" />
    <TextBlock Text="hello avalonia FFF!" />
</StackPanel>

实际上在 html css 中，也是有一一对应关系的，只是样式默认的状态可能不一样，这个需要在统一样式的时候进行配置了。

页面的样式呈现：

vue 版本的 html css 代码是这样的：

<template>
  <div class="stack-panel">
    <span class="stack-panel-child horizontal-alignment-left"
      >hello html + css AAA!</span
    >
    <span class="stack-panel-child horizontal-alignment-center"
      >hello html + css BBB!</span
    >
    <span class="stack-panel-child horizontal-alignment-right"
      >hello html + css CCC!</span
    >
    <span class="stack-panel-child">hello html + css DDD!</span>
    <span class="stack-panel-child">hello html + css EEE!</span>
    <span class="stack-panel-child">hello html + css FFF!</span>
  </div>
</template>

<style lang="css" scoped>
  .stack-panel {
    display: block;
    width: 200px;
    background: aqua;
  }

  .stack-panel-child {
    display: block;
  }

  .horizontal-alignment-left {
    justify-self: self-start;
  }

  .horizontal-alignment-center {
    justify-self: center;
  }

  .horizontal-alignment-right {
    justify-self: self-end;
  }
</style>

三、StackPanel 水平排列朝向的实现 Orientation Horizontal

WPF 和 Avalonia 中的水平排列可以用来实现很多效果，毕竟是横着排列，用来做菜单按钮也好，用来显示提示条也好，总之实现的方式很灵活。

你可以看到示例图中，水平排列的 "AAA!"、"BBB!"...

代码参考此处：

<StackPanel
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    Orientation="Horizontal">
    <TextBlock Text="AAA!" />
    <TextBlock Text="BBB!" />
    <TextBlock Text="CCC!" />
    <TextBlock Text="DDD!" />
    <TextBlock Text="EEE!" />
    <TextBlock Text="FFF!" />
</StackPanel>

在 html css 中，需要将子成员的排列方式作出一些调整。

在 css 中请注意看 stack-panel-child 选择器的display: inline-block; 属性的设置，将其改为行块。

<template>
  <div class="stack-panel">
    <span class="stack-panel-child">AAA!</span>
    <span class="stack-panel-child">BBB!</span>
    <span class="stack-panel-child">CCC!</span>
    <span class="stack-panel-child">DDD!</span>
    <span class="stack-panel-child">EEE!</span>
    <span class="stack-panel-child">FFF!</span>
  </div>
</template>

<style lang="css" scoped>
  .stack-panel {
    display: flex;
  }

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

四、StackPanel 水平排列中的竖直对齐

在 WPF 和 Avalonia 中，我们可以使用 VerticalAlignment 进行竖直对齐的控制。

具体的代码可以参考此处：

<StackPanel
    Height="150"
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    Background="Aqua"
    Orientation="Horizontal">
    <TextBlock VerticalAlignment="Top" Text="AAA!" />
    <TextBlock VerticalAlignment="Center" Text="BBB!" />
    <TextBlock VerticalAlignment="Bottom" Text="CCC!" />
    <TextBlock Text="DDD!" />
    <TextBlock Text="EEE!" />
    <TextBlock Text="FFF!" />
</StackPanel>

在 html css 中，我们可以使用 align-self 对子成员进行设置。

请看代码：

<template>
  <div class="stack-panel">
    <span class="stack-panel-child vertical-alignment-top">AAA!</span>
    <span class="stack-panel-child vertical-alignment-center">BBB!</span>
    <span class="stack-panel-child vertical-alignment-bottom">CCC!</span>
    <span class="stack-panel-child">DDD!</span>
    <span class="stack-panel-child">EEE!</span>
    <span class="stack-panel-child">FFF!</span>
  </div>
</template>

<style lang="css" scoped>
  .stack-panel {
    display: flex;
    background: aqua;
    height: 150px;
  }

  .stack-panel-child {
    display: inline-block;
  }

  .vertical-alignment-top {
    align-self: flex-start;
  }

  .vertical-alignment-center {
    align-self: center;
  }

  .vertical-alignment-bottom {
    align-self: flex-end;
  }
</style>

五、总结

WPF 和 Avalonia	html + css	备注
Orientation="Vertical"	.stack-panel { display: block;} + .stack-panel-child { display: block; }
Orientation="Horizontal"	.stack-panel { display: flex; } + .stack-panel-child { display: inline-block; }	使用到了 flex
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	竖直、居中