Panel và Layout trong XAML

Panel class:
- Chịu trách nhiệm bố trí phần tử con của nó.

public class Panel : FrameworkElement
 {
 
        protected Panel();
 public Brush Background { get; set; }     
        public UIElementCollection Children { get; }
 public TransitionCollection ChildrenTransitions { get; set; }
    public bool IsItemsHost { get; }


 // from FrameworkElement 
 protected virtual Size ArrangeOverride(Size finalSize); 
 protected virtual Size MeasureOverride(Size availableSize);        
}

Core Framework panel :

Canvas
Stackpanel
Grid
VirtualizingStackPanel

Platform specific
Phone:
Windows: ItemsWrapGrid, VariableSizedWrapGrid,
Canvas:

StackPanel: Stack sẽ sắp xếp các thành phần con lại với nhau. Và đối với StackPanel thì ta quan tâm đến thuộc tính Orientation ( định hướng) theo 1 trong 2 chiều Vertical hoặc Horizontal

Grid: Grid là layout linh động nhất. Khi làm việc với nó ta sẽ quan tâm tới hàng và cột như sau :

Các thuộc tính liên quan đến layout mà ta sử dụng nhiều :

Width/Height
HorizontalAlignment/VerticalAlignment
Margin
Padding
Visibility

Alignment

Xác định vị trí (position) và stretch cho một thành phần
HorizontalAlignment (căn ngang): Left, Center, Right, Stretch
VerticalAlignment (căn dọc):Top, Center, Bottom, Stretch

Margin: (tượng tự trong css) dùng để xác định khoảng không gian bên ngoài đường viền của một phần tử. Xem ví dụ sau ta sẽ hiểu

Padding: dùng để xác định khoản không gian bên trong đường viền của một phần tử:

Archive