WPF基礎入門3 - Panel和 Canvas基本使用

一 Panel

WPF的布局控件都從System.Windows.Controls.Panel基類繼承；

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>
           

代碼通過設定Rectangle距離Canvas左邊150像素、距離Canvas頂部100像素，來給定Rectangle的位置；

<Rectangle Fill="Blue" ...

    使用藍色填充矩形；