哔哩哔哩---P2 WPF基础入门视频(布局)

Dear 丶 2022-12-10 07:12 262阅读 0赞

*  [P1 WPF入门基础视频(前言)][P1_WPF]
 *  [P2 WPF基础入门视频(布局)][P2_WPF]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R4cHA1MjA_size_16_color_FFFFFF_t_70][]  2.10  只能设置一个元素，如 grid ，为什么常用grid，参考末尾的那篇文章有提，即 grid 可以取得 大部分的容器控件 一样的功能。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R4cHA1MjA_size_16_color_FFFFFF_t_70 1][]

2 不应该使用坐标设置元素的位置。如下，不要用 Margin 去固定 位置，因为，在不同的分辨率屏幕里，控件的位置，不会是绝对的，一般的实际开发当中，不会这样子去设置一个 Margin 位置。

Margin="12 111 222 111"  Margin 是设置控件到每条边的一个像素距离，从左边 顺时针 旋转

![20200924153927408.png][] 下面这样子弄，会自动缩放到你文字的大小 ![20200924155307714.png][]

![20200924155237177.png][]

3 设置 width 后，如果 content 设置的内容超过了 控件的长度的时候，就显示不全了。

![20200924154304133.png][]

![20200924154410226.png][]

4 元素过多的时候，可以放到一个嵌套的容器里。

![20200924154524939.png][] 比如 grid 里面 继续创建一个 grid 容器。或者其他的容器 。

最后![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R4cHA1MjA_size_16_color_FFFFFF_t_70 2][]

设置控件的 长宽。如下。

![20200924155902974.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R4cHA1MjA_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R4cHA1MjA_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R4cHA1MjA_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R4cHA1MjA_size_16_color_FFFFFF_t_70 6][] 左图 这样子就是创建了 两行两列  可以设置![20200924160357501.png][]

看看效果。

怎么在 分成的格子里添加 控件，参考：[这里。][Link 1]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R4cHA1MjA_size_16_color_FFFFFF_t_70 7][] 也可以设置各行 各列的 长宽，height=“2\*”，表示上面是下面的两倍。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R4cHA1MjA_size_16_color_FFFFFF_t_70 8][]

![2020092416064716.png][]  去掉红框，就是默认的垂直排列，加上就是水平排列。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R4cHA1MjA_size_16_color_FFFFFF_t_70 9][]

和上面 stackpannel 区别是，在有限的空间内，实现自动换行。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R4cHA1MjA_size_16_color_FFFFFF_t_70 10][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R4cHA1MjA_size_16_color_FFFFFF_t_70 11][]

看完布局的控件之后，意犹未尽的话，可以再参考这篇：

[https://www.cnblogs.com/fly-bird/p/8531650.html][https_www.cnblogs.com_fly-bird_p_8531650.html]

[P1_WPF]: https://www.bilibili.com/video/BV1mJ411F7zG?p=1
[P2_WPF]: https://www.bilibili.com/video/BV1mJ411F7zG?p=2
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R4cHA1MjA_size_16_color_FFFFFF_t_70]: /images/20221123/a94ee04643494f0d8d8712e1eebf54a9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R4cHA1MjA_size_16_color_FFFFFF_t_70 1]: /images/20221123/a78bd9db29064b97b7077f160ff3900f.png
[20200924153927408.png]: https://img-blog.csdnimg.cn/20200924153927408.png
[20200924155307714.png]: /images/20221123/ce0d1f32f24e4fd9b2bfdc67b53e881f.png
[20200924155237177.png]: /images/20221123/02d32baf87e745adbfe1d76aaf633af8.png
[20200924154304133.png]: /images/20221123/2c82d81dafbc4633a50b1b968206bb9d.png
[20200924154410226.png]: /images/20221123/acd9983076b94596a9b5c3a8e80f78f4.png
[20200924154524939.png]: /images/20221123/e2e629052ac9459e8037e84eac384696.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R4cHA1MjA_size_16_color_FFFFFF_t_70 2]: /images/20221123/deaacd0d716049eea4a7e725f4e65a2b.png
[20200924155902974.png]: /images/20221123/f2995009810a4d49a7c8a6f70ada8e4c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R4cHA1MjA_size_16_color_FFFFFF_t_70 3]: /images/20221123/c1a9d787c7134f0f8d3ac9bd81cc3270.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R4cHA1MjA_size_16_color_FFFFFF_t_70 4]: /images/20221123/9b6c6166753142b6bc225167b36781d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R4cHA1MjA_size_16_color_FFFFFF_t_70 5]: /images/20221123/091a2c855a944b71887fa4d5c6789bd1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R4cHA1MjA_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200924160316779.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R4cHA1MjA=,size_16,color_FFFFFF,t_70
[20200924160357501.png]: /images/20221123/03d433a55177493c824fb428d01d20a5.png
[Link 1]: https://blog.csdn.net/u011170962/article/details/38373621
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R4cHA1MjA_size_16_color_FFFFFF_t_70 7]: /images/20221123/285cfc7afb2c4c2bb8313935a48508a2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R4cHA1MjA_size_16_color_FFFFFF_t_70 8]: /images/20221123/7dec2405a26d415ca2dc4150a31b56a3.png
[2020092416064716.png]: /images/20221123/4676c2afe3784ca2816aa3c6ca453c81.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R4cHA1MjA_size_16_color_FFFFFF_t_70 9]: /images/20221123/751c42fc819a4b838900c59f97c8e6bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R4cHA1MjA_size_16_color_FFFFFF_t_70 10]: /images/20221123/c9b208ba8a5145589dacc593895347c3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R4cHA1MjA_size_16_color_FFFFFF_t_70 11]: /images/20221123/7b983f21a1d94f5490cfc37f222f8ed7.png
[https_www.cnblogs.com_fly-bird_p_8531650.html]: https://www.cnblogs.com/fly-bird/p/8531650.html