# 控件和布局

### 控件 <a href="#controls" id="controls"></a>

Avalonia 提供了许多核心控件。以下是一些最常见的：

* 按钮：[`Button`](https://avaloniachina.gitbook.io/avalonia/docs/controls/buttons/button), [`RepeatButton`](https://avaloniachina.gitbook.io/avalonia/docs/controls/buttons/repeatbutton)
* 数据展示：[`ItemsControl`](https://avaloniachina.gitbook.io/avalonia/docs/controls/itemscontrol), [`ItemsRepeater`](https://avaloniachina.gitbook.io/avalonia/docs/controls/itemsrepeater), [`ListBox`](https://avaloniachina.gitbook.io/avalonia/docs/controls/listbox), [`TreeView`](https://avaloniachina.gitbook.io/avalonia/docs/controls/treeview)
* 输入：[`CheckBox`](https://avaloniachina.gitbook.io/avalonia/docs/controls/checkbox), [`ComboBox`](https://avaloniachina.gitbook.io/avalonia/docs/controls/combobox), [`RadioButton`](https://avaloniachina.gitbook.io/avalonia/docs/controls/buttons/radiobutton), [`Slider`](https://avaloniachina.gitbook.io/avalonia/docs/controls/slider), [`TextBox`](https://avaloniachina.gitbook.io/avalonia/docs/controls/textbox)
* 布局：[`Border`](https://avaloniachina.gitbook.io/avalonia/docs/controls/border), [`Canvas`](https://avaloniachina.gitbook.io/avalonia/docs/controls/canvas), [`DockPanel`](https://avaloniachina.gitbook.io/avalonia/docs/controls/dockpanel), [`Expander`](https://avaloniachina.gitbook.io/avalonia/docs/controls/expander), [`Grid`](https://avaloniachina.gitbook.io/avalonia/docs/controls/grid), [`GridSplitter`](https://avaloniachina.gitbook.io/avalonia/docs/controls/gridsplitter), [`Panel`](https://avaloniachina.gitbook.io/avalonia/docs/controls/panel), [`Separator`](https://avaloniachina.gitbook.io/avalonia/docs/controls/separator), [`ScrollBar`](https://avaloniachina.gitbook.io/avalonia/docs/controls/scrollbar), [`ScrollViewer`](https://avaloniachina.gitbook.io/avalonia/docs/controls/scrollviewer), [`StackPanel`](https://avaloniachina.gitbook.io/avalonia/docs/controls/stackpanel), [`Viewbox`](https://avaloniachina.gitbook.io/avalonia/docs/controls/viewbox), [`WrapPanel`](https://avaloniachina.gitbook.io/avalonia/docs/controls/wrappanel)
* 菜单：[`ContextMenu`](https://avaloniachina.gitbook.io/avalonia/docs/controls/contextmenu), [`Menu`](https://avaloniachina.gitbook.io/avalonia/docs/controls/menu), [`NativeMenu`](https://avaloniachina.gitbook.io/avalonia/docs/controls/nativemenu)
* 导航: [`TabControl`](https://avaloniachina.gitbook.io/avalonia/docs/controls/tabcontrol), [`TabStrip`](https://avaloniachina.gitbook.io/avalonia/docs/controls/tabstrip)
* 用户信息：[`ProgressBar`](https://avaloniachina.gitbook.io/avalonia/docs/controls/progressbar), [`TextBlock`](https://avaloniachina.gitbook.io/avalonia/docs/controls/textblock), [`ToolTip`](https://avaloniachina.gitbook.io/avalonia/docs/controls/tooltip)

## 输入和命令

控件经常需要检测和响应用户输入。Avalonia 的 [输入系统](https://avaloniachina.gitbook.io/avalonia/docs/input) 使用 [直接路由事件](https://avaloniachina.gitbook.io/avalonia/docs/input/routed-events) 支持文本输入、焦点管理和鼠标定位功能。

应用程序通常有复杂的输入要求。Avalonia 提供了一个 [命令系统](https://avaloniachina.gitbook.io/avalonia/docs/data-binding/binding-to-commands)，将用户输入的动作与响应这些动作的代码分开。

### 布局 <a href="#layout" id="layout"></a>

创建用户界面时，可以按控件的位置和大小加以排列形成布局。任何布局的关键要求是适应窗体大小和显示设置的变化。Avalonia 提供了一流的、可扩展的布局系统，不通过强迫编写代码来适应这些情况下的布局。

相对定位是布局系统的基石，它能适应不断变化的窗口和显示条件。此外，确定布局依靠布局系统协调管理控件。协调是一个两步过程：第一步，子控件告诉其父控件子控件需要的位置和大小；第二步，父控件告诉子控件子控件允许有多少空间。

布局系统通过 Avalonia 基础类型暴露给子控件。对于 `grids`、`stacking` 和 `docking` 等常见布局，Avalonia 拥有多种布局控件。

* [`Panel`](https://avaloniachina.gitbook.io/avalonia/docs/controls/panel): 子控件用堆叠在一起的方式填充面板
* [`DockPanel`](https://avaloniachina.gitbook.io/avalonia/docs/controls/dockpanel): 子控件与 `panel` 边缘对齐
* [`StackPanel`](https://avaloniachina.gitbook.io/avalonia/docs/controls/stackpanel): 子控件垂直或水平堆叠
* [`WrapPanel`](https://avaloniachina.gitbook.io/avalonia/docs/controls/wrappanel): 当某一行上的控件数量超过空间允许的数量时，子控件将按从左到右的顺序排列并换行
* [`Grid`](https://avaloniachina.gitbook.io/avalonia/docs/controls/grid): 子控件按行和列定位
* [`Canvas`](https://avaloniachina.gitbook.io/avalonia/docs/controls/canvas): 子控件提供自己的布局

你还可以通过从 [`Panel`](https://avaloniachina.gitbook.io/avalonia/docs/controls/panel) 类派生来创建自己的布局。