XAML一些控制元件的使用

Charles_Su發表於2021-05-16

  這節來講一些XAML中常用控制元件的使用。

 

Window

    Window控制元件是一個基礎,它是其它控制元件的容器,我們可以通過修改其中的一些屬性來設定窗體的顯示效果,下面說一些最常用的屬性:

    WindowStartupLocation 這個屬性用來設定窗體啟動時的位置,他有三個值:CenterOwner,CenterScreen,Manual。CenterOwner 是指在這個窗體的擁有者中心顯示,我們可以通過後臺通過程式碼來指定當前窗體的擁有者是誰:

    當在MainWindowBase中點選按鈕時,就會彈出MainWindow頁面,效果如下:

    CenterScreen是啟動時在螢幕正中間,Manual 是預設,大約在螢幕左上角的位置。

    WindowStyle 設個屬性用來設定窗體的風格,它有四個值:None,SingleBorderWindow,ThreeDBorderWindow,ToolWindow。SingleBorderWindow是預設值,就是預設啟動的樣子,ThreeDBorderWindow是3D邊框,在win10中已經和SingleBorderWindow樣式一致了,None是無邊框,啟動時如下:

圖片

    ToolWindow是專門用於顯示設定窗體的,沒有最大最小化按鈕,只有關閉按鈕:

    WindowState 這個屬性用來設定窗體啟動時是最大化還是最小化,它有三個值:預設大小Normal,就是使用者通過width和height定義的大小,Minimized 啟動時最小化,Maximized 啟動時最大化。

    一般情況下,我們要做一個好看的窗體,使用微軟給我們定義好的樣式是不夠的,我們會將窗體樣式設定為None,然後自己去定義標題欄,但是當設定為None時,頂部還有一條白色的框,如下:

 

 

 

    為了去掉它,我們還要用到window的另一個屬性:AllowsTransparency 它用來設定窗體是否可以透明,這是個bool屬性,設定為true,窗體就允許透明,上邊這條白框就透明看不到了。

    當窗體樣式設為None時,因為標題欄被隱藏,我們無法移動窗體,為了使窗體可以移動,我們要為window中的佈局控制元件新增MouseDown事件的事件處理器,並且要為其設定一個背景(window設定為允許透明,當grid沒有背景時是無法觸發MouseDown事件的),然後在後臺新增如下的程式碼:

private void Grid_MouseDown(object sender, System.Windows.Input.MouseButtonEventArgs e){
if (e.ChangedButton == System.Windows.Input.MouseButton.Left)
  {
   DragMove();//window 內部的移動方法
  }
}

    這樣我們在Grid控制元件的空白區域上滑鼠左鍵按下時,就可以拖動窗體進行移動。

 

Grid

    下面來說一下最常用的佈局控制元件:Grid。

   它最強大的功能在於分割區域:我們可以使用Grid的ColumnDefinitions 和 RowDefinitions來分割Grid

圖片

    請看上述程式碼,我將Grid分割了3行,3列。當值後邊帶" * "號時,是按比例劃分,純數字就是按畫素劃分,這兩者是可以混用的。

    拿上述例子解釋說:列是1*,50畫素,1*這樣劃分的,如果grid寬200畫素,那麼中間這一列是50畫素,兩邊這兩列各佔剩餘的二分之一,也就是75畫素。行劃分規則也是如此。

    劃分好了以後,我們在Grid子控制元件中就可以通過Grid.Row="index" Grid.Column="index" 來指定控制元件顯示在哪個區域,區域的index標識是從0開始的,如果控制元件不指定Row和Column,則預設顯示在第一行第一列:

圖片

    如圖,我將按鈕的Row和Column設定為1,也就是第二行第二列,顯示效果如下:

    因為只有50個畫素寬,按鈕是顯示不全的,在開發中,為了更好的檢視Grid的劃分,我們可以藉助Grid的bool屬性ShowGridLines,讓Grid顯示分割線,效果如下:

    這樣就會很方便的調整劃分大小,想檢視正式效果直接將ShowGridLines去掉或改為False即可。VS是支援對WPF進行熱過載的,當我們改變xaml程式碼,執行介面也會一併修改,但如果是引入一些新資原始碼等無法實現熱過載的情況,必須要重新啟動程式。

 

StackPanel和Border

    StackPanel是棧佈局,放置其中的控制元件只能像堆碟子一樣,水平排列或者垂直排列,我們可以通過其Orientation屬性來設定豎排還是橫排,它有兩個值:Horizontal 是水平排列,Vertical 是垂直排列。

    Border 常用於簡單的佈局,它的內部只允許有一個直接子控制元件,一般用於包裹Grid,對Grid加一些邊框性的美化,實際上它的名字就告訴了我們它的用途。

 

 

相關文章