WPF——02_布局控件

WPF作为一个桌面端的框架，缺少不了布局控件，优雅的界面缺少不了良好的布局，在WPF中有非常多的布局控件，这些布局控件有个共同的特点就是可以在内部放入许多内容控件，就像一张桌子上有许多物品，将内容控件合理的安排好就像打扫桌子，能让人赏心悦目

Panel基类

可以看到Panel类是一个抽象类，不可实例化，WPF的布局控件都继承Panel基类

public abstract class Panel : FrameworkElement, IAddChild
{
    public static readonly DependencyProperty BackgroundProperty;
    public static readonly DependencyProperty IsItemsHostProperty;
    public static readonly DependencyProperty ZIndexProperty;
 
    protected Panel();
 
    public bool HasLogicalOrientationPublic { get; }
    public Orientation LogicalOrientationPublic { get; }
    public bool IsItemsHost { get; set; }
    public UIElementCollection Children { get; }
    public Brush Background { get; set; }
    protected override int VisualChildrenCount { get; }
    protected internal UIElementCollection InternalChildren { get; }
    protected internal override IEnumerator LogicalChildren { get; }
    protected internal virtual Orientation LogicalOrientation { get; }
    protected internal virtual bool HasLogicalOrientation { get; }
 
    public static int GetZIndex(UIElement element);
    public static void SetZIndex(UIElement element, int value);
    public bool ShouldSerializeChildren();
    protected virtual UIElementCollection CreateUIElementCollection(FrameworkElement logicalParent);
    protected override Visual GetVisualChild(int index);
    protected virtual void OnIsItemsHostChanged(bool oldIsItemsHost, bool newIsItemsHost);
    protected override void OnRender(DrawingContext dc);
    protected internal override void OnVisualChildrenChanged(DependencyObject visualAdded, DependencyObject visualRemoved);
 
}

从它的代码定义来看，它继承于FrameworkElement基类和IAddChild接口,可以看到Panel中也有Width。Height的属性,包括还有Background可以设置控件的背景颜色

1.Grid布局（网格布局）

Grid布局是WPF的默认布局，创建一个WPF项目有一个默认的Grid 查看Grid的定义(节选)

public class Grid : Panel, IAddChild
{
    private class ExtendedData
    {
        internal ColumnDefinitionCollection ColumnDefinitions;

        internal RowDefinitionCollection RowDefinitions;

        internal DefinitionBase[] DefinitionsU;

        internal DefinitionBase[] DefinitionsV;

        internal CellCache[] CellCachesCollection;

        internal int CellGroup1;

        internal int CellGroup2;

        internal int CellGroup3;

        internal int CellGroup4;

        internal DefinitionBase[] TempDefinitions;
    }            
    
  }

Grid有两个非常关键的属性ColumnDefinitions和RowDefinitions，分别表示列的数量集合和行的数量集合。ColumnDefinitions集合中的元素类型是ColumnDefinition类，RowDefinitions集合中元素类型是RowDefinition类。默认的Gridr控件没有定义行数和列数，也就是说，Grid默认情况下，行数和列数都等于1，那么它就只有一个单元格。

 <Grid>
     <Grid.ColumnDefinitions>
         <ColumnDefinition/>
         <ColumnDefinition/>
     </Grid.ColumnDefinitions>
     <Grid.RowDefinitions>
         <RowDefinition/>
         <RowDefinition/>
     </Grid.RowDefinitions>
     <Button Grid.Column="0" Content="按键1" Height="40" Width="120"/>
     <Button Grid.Column="1" Content="按键2" Height="40" Width="120"/>
     <Button Grid.Row="1" Grid.Column="0" Content="按键3" Height="40" Width="120"/>
     <Button Grid.Row="1" Grid.Column="1" Content="按键4" Height="40" Width="120"/>
 </Grid>

运行出来的网格布局

网格布局作为最普遍的布局控件，需要合理安排控件与控件之间的距离，不能把所有的控件一股脑放入Grid中，那样xaml代码维护难，用户的体验也难！