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 中，你可以使用下面的写法创建一个堆叠的样式：

1. <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
2.     <TextBlock Text="hello avalonia AAA!" />
3.     <TextBlock Text="hello avalonia BBB!" />
4.     <TextBlock Text="hello avalonia CCC!" />
5.     <TextBlock Text="hello avalonia DDD!" />
6.     <TextBlock Text="hello avalonia EEE!" />
7.     <TextBlock Text="hello avalonia FFF!" />
8. </StackPanel>

复制代码

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

1. <template>
2.   
3.     hello html + css AAA!
4.     hello html + css BBB!
5.     hello html + css CCC!
6.     hello html + css DDD!
7.     hello html + css EEE!
8.     hello html + css FFF!
9.   
10. </template>

复制代码

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

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

代码：

1. <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
2.     <TextBlock Text="hello avalonia AAA!" />
3.     <TextBlock Text="hello avalonia BBB!" />
4.     <TextBlock Text="hello avalonia CCC!" />
5.     <TextBlock Text="hello avalonia DDD!" />
6.     <TextBlock Text="hello avalonia EEE!" />
7.     <TextBlock Text="hello avalonia FFF!" />
8. </StackPanel>

复制代码

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

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

1. <template>
2.   
3.     hello html + css AAA!</span
4.     >
5.     hello html + css BBB!</span
6.     >
7.     hello html + css CCC!</span
8.     >
9.     hello html + css DDD!
10.     hello html + css EEE!
11.     hello html + css FFF!
12.   
13. </template>

复制代码

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

WPF 和 Avalonia 中的水平排列可以用来实现很多效果，毕竟是横着排列，用来做菜单按钮也好，用来显示提示条也好，总之实现的方式很灵活。
你可以看到示例图中，水平排列的 "AAA!"、"BBB!"...

代码参考此处：

1. <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
2.     <TextBlock Text="hello avalonia AAA!" />
3.     <TextBlock Text="hello avalonia BBB!" />
4.     <TextBlock Text="hello avalonia CCC!" />
5.     <TextBlock Text="hello avalonia DDD!" />
6.     <TextBlock Text="hello avalonia EEE!" />
7.     <TextBlock Text="hello avalonia FFF!" />
8. </StackPanel>

复制代码

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

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

1. <template>
2.   
3.     AAA!
4.     BBB!
5.     CCC!
6.     DDD!
7.     EEE!
8.     FFF!
9.   
10. </template>

复制代码

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

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

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

1. <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
2.     <TextBlock Text="hello avalonia AAA!" />
3.     <TextBlock Text="hello avalonia BBB!" />
4.     <TextBlock Text="hello avalonia CCC!" />
5.     <TextBlock Text="hello avalonia DDD!" />
6.     <TextBlock Text="hello avalonia EEE!" />
7.     <TextBlock Text="hello avalonia FFF!" />
8. </StackPanel>

复制代码

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

请看代码：

1. <template>
2.   
3.     AAA!
4.     BBB!
5.     CCC!
6.     DDD!
7.     EEE!
8.     FFF!
9.   
10. </template>

复制代码

五、总结

WPF 和 Avaloniahtml + css备注Orientation="Vertical".stack-panel { display: block;} + .stack-panel-child { display: block; }Orientation="Horizontal".stack-panel { display: flex; } + .stack-panel-child { display: inline-block; }使用到了 flexHorizontalAlignment="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竖直、居中
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！