CPF 入門教程 - 控件布局（六）

CPF netcore跨平台桌面UI框架

 

系列教程

CPF 入門教程（一）

CPF 入門教程 - 數據綁定和命令綁定（二）

CPF 入門教程 - 樣式和動畫（三）

CPF 入門教程 - 繪圖（四） 

CPF 入門教程 - 設計器和模板庫的使用（五）

CPF 入門教程 - 控件布局（六）

CPF 入門教程 - 屬性和事件（七）

CPF 入門教程 - 各個控件介紹（八）  

CPF 入門教程 - 各平台各系統發布說明（九）  

 

布局流程和WPF差不多，先Measure再Arrange，如果自定義布局容器，可以參考WPF的代碼

元素布局，支持百分比布局，margin調整定位，默認居中。相當於CSS里中的絕對定義position: absolute;

MarginLeft，MarginTop，MarginRight，MarginBottom，一般默認值是Auto，當設置值之后固定對應邊到父容器的內邊的距離

 

Width，Height，一般默認值也是Auto，如果沒設置，實際尺寸由內容或者子元素尺寸決定，或者由Margin決定

 

使用百分比布局需要注意的：在某些布局容器里使用的時候盡量不使用百分比，

因為某些情況下百分比布局會有沖突。

 

new ListBox
{
      MarginLeft = 112,
      MarginTop = "10%",
      Height = 122,
      Width = 118,
      Items =
      {
             "asda",
             "dfss"
       }
},

 

 設計器中四個邊上的橢圓圈圈就是設置對應的Margin，設置有值的Margin圈圈里有一條線段

 

布局容器，基本和wpf里的一致

除了Panel，其他布局容器當布局內容超過布局容器默認是左上角的

 

Grid：類似於table，通過屬性RowDefinitions，ColumnDefinitions 來添加行和列

grid.Children.Add(new Control { Width = "100%", Height = "100%", Background = "100,110,120,120" },1,2,1,2);

//添加控件到第2列，第3行，索引位置從0開始,跨一列，跨兩行，這些位置信息是通過附加屬性的方式設置的

 

Grid.RowIndex(control, 1);//使用附加屬性方式設置行索引

var index = Grid.RowIndex(control);//獲取附加屬性值

 

new Grid
{
    Children =
    {
        new Button
        {
            Attacheds =
            {
                {
                    Grid.ColumnIndex,
                    0
                },
                {
                    Grid.RowIndex,
                    1
                },
            },
            Content = "Button",
        },
    },
    Height = 171,
    Width = 253,
},

GridSplitter

用於鼠標拖拽調整Grid的行或者列的布局范圍的，

//定義一個可以拖拽調整左右尺寸的Grid
new Grid
{
    IsGroup = true,
    ColumnDefinitions =
    {
        new ColumnDefinition
        {
                                                    
        },
        new ColumnDefinition
        {
                                                    
        },
    },
    Children =
    {
        new GridSplitter
        {
            Height = "100%",
            MarginLeft = 0f,
            Attacheds =
            {
                {
                    Grid.ColumnIndex,
                    1
                },
            },
        },
    },
    Height = 147,
    Width = 165,
}

 

 

 

DockPanel：支持讓元素簡單地停靠在整個面板的某一條邊上，然后拉伸元素以填滿全部寬度或高度。它也支持讓一個元素填充其他已停靠元素沒有占用的剩余空間。

子元素設置 DockPanel.Dock 附加屬性來定義停靠方向

new DockPanel
{
    Children =
    {
        new Button
        {
            Attacheds =
            {
                {
                    DockPanel.Dock,
                    Dock.Top
                },
            },
            Content = "Button",
        },
    },
    Height = 131,
    Width = 205,
},

 

 

 

 

StackPanel：水平或者垂直方向的布局

WrapPanel：類似於網頁中的浮動，以流的形式由左到右，由上到下顯示控件

子元素都是通過Children添加

 

元素旋轉

 

 

 設計器里可以直接通過右邊旋轉手柄來調整旋轉角度

new Button
{
    RenderTransform = new GeneralTransform
    {
        Angle = -9.8f,
    },
    Height = 44,
    Width = 92,
    Content = "Button",
},

RenderTransform 就是渲染的矩陣變換，還可以設置縮放，切變，平移等等。。。

 

ScrollViewer

表示可包含其他可視元素的可滾動區域。當你需要做內容滾動的時候，內容超過ScrollViewer范圍就可以顯示滾動條

內容設置給Content屬性

new ScrollViewer
{
    Content = new Button
    {
        Height = 133,
        Width = 150,
        Content = "Button",
    },
    Height = 114,
    Width = 141,
},