背水一战 Windows 10 (38) - 控件（布局类）: Panel, Canvas, RelativePanel, StackPanel, Grid-白红宇

原文:

背水一战 Windows 10 (38) - 控件（布局类）: Panel, Canvas, RelativePanel, StackPanel, Grid

作者：

介绍

背水一战 Windows 10 之控件（布局类）

Panel

Canvas

RelativePanel

StackPanel

Grid

示例

1、Panel(基类) 的示例

Controls/LayoutControl/PanelDemo.xaml

Controls/LayoutControl/PanelDemo.xaml.cs

/* * Panel(基类) - 面板控件基类（继承自 FrameworkElement, 请参见 /Controls/BaseControl/FrameworkElementDemo.xaml） */ using Windows.UI.Xaml.Controls;namespace Windows10.Controls.LayoutControl{    public sealed partial class PanelDemo : Page    {        public PanelDemo()        {            this.InitializeComponent();        }    }}

2、Canvas 的示例

Controls/LayoutControl/CanvasDemo.xaml

Controls/LayoutControl/CanvasDemo.xaml.cs

/* * Canvas - 绝对定位布局控件（继承自 Panel, 请参见 /Controls/LayoutControl/PanelDemo.xaml） *     double GetLeft(UIElement element) - 获取指定 UIElement 的 Canvas.Left 值 *     double GetTop(UIElement element) - 获取指定 UIElement 的 Canvas.Top 值 *     int GetZIndex(UIElement element) - 获取指定 UIElement 的 Canvas.ZIndex 值 *     SetLeft(UIElement element, double length) - 设置指定 UIElement 的 Canvas.Left 值 *     SetTop(UIElement element, double length) - 设置指定 UIElement 的 Canvas.Top 值 *     SetZIndex(UIElement element, int value) - 设置指定 UIElement 的 Canvas.ZIndex 值 */using Windows.UI.Xaml.Controls;namespace Windows10.Controls.LayoutControl{    public sealed partial class CanvasDemo : Page    {        public CanvasDemo()        {            this.InitializeComponent();        }    }}

3、RelativePanel 的示例

Controls/LayoutControl/RelativePanelDemo.xaml

Controls/LayoutControl/RelativePanelDemo.xaml.cs

/* * RelativePanel - 相对定位布局控件（继承自 Panel, 请参见 /Controls/LayoutControl/PanelDemo.xaml） */using Windows.UI.Xaml.Controls;namespace Windows10.Controls.LayoutControl{    public sealed partial class RelativePanelDemo : Page    {        public RelativePanelDemo()        {            this.InitializeComponent();        }    }}

4、StackPanel 的示例

Controls/LayoutControl/StackPanelDemo.xaml

Controls/LayoutControl/StackPanelDemo.xaml.cs

/* * StackPanel - 流式布局控件（继承自 Panel, 请参见 /Controls/LayoutControl/PanelDemo.xaml） */using Windows.UI.Xaml.Controls;namespace Windows10.Controls.LayoutControl{    public sealed partial class StackPanelDemo : Page    {        public StackPanelDemo()        {            this.InitializeComponent();        }    }}

5、Grid 的示例

Controls/LayoutControl/GridDemo.xaml

Controls/LayoutControl/GridDemo.xaml.cs

/* * Grid - 网格布局控件（继承自 Panel, 请参见 /Controls/LayoutControl/PanelDemo.xaml） */using Windows.UI.Xaml.Controls;namespace Windows10.Controls.LayoutControl{    public sealed partial class GridDemo : Page    {        public GridDemo()        {            this.InitializeComponent();        }    }}