WPF基础入门3 - Panel和 Canvas基本使用

朴灿烈づ我的快乐病毒、 2023-01-03 04:06 258阅读 0赞

### 一 Panel ###

WPF的布局控件都从System.Windows.Controls.Panel基类继承；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70][]

Pane类的公共属性很多；例如，

Cursor  
获取或设置在鼠标指针位于此元素上时显示的光标。

DataContext  
获取或设置元素参与数据绑定时的数据上下文。

FontFamily  
获取或设置控件的字体系列。

FontSize  
获取或设置字号。

Height  
获取或设置元素的建议高度。

Name  
获取或设置元素的标识名称。 该名称提供一个引用，以便当 XAML 处理器在处理过程中构造标记元素之后，代码隐藏（如事件处理程序代码）可以对该元素进行引用。

Width  
获取或设置元素的宽度。   
    ......

一个Panel 的呈现就是测量和排列子控件，然后在屏幕上绘制它们。  
    每当Panel内的子控件改变其位置时，布局系统就可能触发一个新的处理过程。

### 二. Canvas  ###

Canvas是最基本的面板，只是一个存储控件的容器，它不会自动调整内部元素的排列及大小，它仅支持用显式坐标定位控件。可以使用Left、Top、Right、 Bottom附加属性在Canvas中定位控件。  
    Canvas的主要用途是用来画图。Canvas默认不会自动裁减超过自身范围的内容，即溢出的内容会显示在Canvas外面，这是因为默认 ClipToBounds=”False”。

<Page
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
      <Grid>  
        <Canvas Margin="0,0,0,0" Background="White">
                  <Rectangle Fill="Blue" 
                      Stroke="Azure" 
                      Width="250" 
                      Height="200" 
                      Canvas.Left="150" Canvas.Top="100"/>
        </Canvas>
        <Canvas>
          <Button Name="btnByCode">后台代码实现</Button>
        </Canvas>
      </Grid>
    </Page>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 1][]

代码通过设置Rectangle距离Canvas左边150像素、距离Canvas顶部100像素，来给定Rectangle的位置；  
<Rectangle Fill="Blue" ...  
    使用蓝色填充矩形；

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70]: /images/20221119/ff14830be14f48548e4180310e4e4f5d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 1]: /images/20221119/4d13d0d7961c49118a464027d1d4a2a8.png