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>
hello html + css AAA!
hello html + css BBB!
hello html + css CCC!
hello html + css DDD!
hello html + css EEE!
hello html + css FFF!
</template>二、StackPanel 纵向排列中的水平对齐
在 WPF 和 Avalonia 中的对齐我们在 Grid 中有进行介绍，我们来提供一个示例效果，其中 StackPanel 的前三项分别是左对齐、居中和右对齐。
图片：
代码：
<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 中，也是有一一对应关系的，只是样式默认的状态可能不一样，这个需要在统一样式的时候进行配置了。
页面的样式呈现：
vue 版本的 html css 代码是这样的：
<template>
hello html + css AAA!</span
>
hello html + css BBB!</span
>
hello html + css CCC!</span
>
hello html + css DDD!
hello html + css EEE!
hello html + css FFF!
</template>三、StackPanel 水平排列朝向的实现 Orientation Horizontal
WPF 和 Avalonia 中的水平排列可以用来实现很多效果，毕竟是横着排列，用来做菜单按钮也好，用来显示提示条也好，总之实现的方式很灵活。
你可以看到示例图中，水平排列的 "AAA!"、"BBB!"...
代码参考此处：
<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 中，需要将子成员的排列方式作出一些调整。
在 css 中请注意看 stack-panel-child 选择器的display: inline-block; 属性的设置，将其改为行块。
<template>
AAA!
BBB!
CCC!
DDD!
EEE!
FFF!
</template>四、StackPanel 水平排列中的竖直对齐
在 WPF 和 Avalonia 中，我们可以使用 VerticalAlignment 进行竖直对齐的控制。
具体的代码可以参考此处：
<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 中，我们可以使用 align-self 对子成员进行设置。
请看代码：
<template>
AAA!
BBB!
CCC!
DDD!
EEE!
FFF!
</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竖直、居中
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]