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,通過屬性RowDefinitionsColumnDefinitions 來添加行和列

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,
},

 

 

 

 

打賞

免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2021 CODEPRJ.COM