GitBook: [#138] Improving documentation for DataGrid
This commit is contained in:
Tim U
gitbook-bot
Родитель
b56c0e46be
Коммит
92626a955b
|
|
@ -47,7 +47,8 @@
|
|||
* [ContentControl](docs/controls/contentcontrol.md)
|
||||
* [ContextMenu](docs/controls/contextmenu.md)
|
||||
* [Decorator](docs/controls/decorator.md)
|
||||
* [DataGrid](docs/controls/datagrid.md)
|
||||
* [DataGrid](docs/controls/datagrid/README.md)
|
||||
* [DataGridColumns](docs/controls/datagrid/datagridcolumns.md)
|
||||
* [DatePicker](docs/controls/datepicker.md)
|
||||
* [DockPanel](docs/controls/dockpanel.md)
|
||||
* [Expander](docs/controls/expander.md)
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ A top-level window.
|
|||
|
||||
### [WrapPanel](wrappanel.md)
|
||||
|
||||
Positions child elements in sequential position from left to right,
breaking content to the next line at the edge of the containing box.
|
||||
Positions child elements in sequential position from left to right, 
breaking content to the next line at the edge of the containing box. 
|
||||
|
||||
## Buttons
|
||||
|
||||
|
|
@ -78,11 +78,11 @@ Represents a button that allows a user to select a single option from a group of
|
|||
|
||||
### [ToggleButton](togglebutton.md)
|
||||
|
||||
Represents a control that a user can select \(check\) or clear \(uncheck\).
|
||||
Represents a control that a user can select (check) or clear (uncheck).
|
||||
|
||||
## Data Display
|
||||
|
||||
### [DataGrid](datagrid.md)
|
||||
### [DataGrid](datagrid/)
|
||||
|
||||
Displays data in a customizable grid.
|
||||
|
||||
|
|
@ -163,4 +163,3 @@ A context menu attached to a control.
|
|||
### [Menu](menu.md)
|
||||
|
||||
A top-level menu control.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,105 @@
|
|||
# DataGridColumns
|
||||
|
||||
## Overview
|
||||
|
||||
Every [.](./ "mention") can hold multiple `DataGridColumns`. Avalonia has several build-in `DataGridColumns`, which can be used to display a certain data type with a certain appearance. 
|
||||
|
||||
### Build-in DataGridColumns
|
||||
|
||||
* [DataGridTextColumn](datagridcolumns.md#datagridtextcolumn)
|
||||
* [DataGridCheckBoxColumn](datagridcolumns.md#datagridcheckboxcolumn)
|
||||
* [DataGridTemplateColumn](datagridcolumns.md#datagridtemplatecolumn)
|
||||
|
||||
### Common Properties for all DataGridColumns
|
||||
|
||||
| Property | Description |
|
||||
| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| Header | Gets or sets the header content of the column |
|
||||
| HeaderTemplate | Gets or sets a data template for the column (see: [datatemplates.md](../../../misc/wpf/datatemplates.md "mention")) |
|
||||
| IsReadOnly | Gets or sets if the column is read-only. If the owning grid is read-only, then the column is also read-only, even if this property is set to true. |
|
||||
|
||||
## DataGridTextColumn
|
||||
|
||||
This column is used to display text data, normally represented by a `string`. In the normal state the text is displayed in a `TextBlock`. If the user edits the current cell, a `TextBox` will be shown. This column has some properties which can be used to control the appereance like `FontSize` and `FontFamily`.
|
||||
|
||||
### Example
|
||||
|
||||
```
|
||||
<DataGrid Name="MyDataGrid" Items="{Binding People}" AutoGenerateColumns="False" >
|
||||
<DataGrid.Columns>
|
||||
<DataGridTextColumn Header="Forename" Binding="{Binding FirstName}"/>
|
||||
<DataGridTextColumn Header="Surname" Binding="{Binding LastName}" />
|
||||
</DataGrid.Columns>
|
||||
</DataGrid>
|
||||
```
|
||||
|
||||
### API Reference
|
||||
|
||||
[DataGridTextColumn](http://reference.avaloniaui.net/api/Avalonia.Controls/DataGridTextColumn/)
|
||||
|
||||
### Source code
|
||||
|
||||
[DataGridTextColumn.cs](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls.DataGrid/DataGridTextColumn.cs)
|
||||
|
||||
## DataGridCheckBoxColumn
|
||||
|
||||
This column is used to represent a `bool` value. The value is represented by a `CheckBox`, which is disabled in the normal state and endabled in the editing state of the `DataGridCell`. If needed you can ebable the intermediate state by setting the property `IsThreeState` to true.
|
||||
|
||||
### Example
|
||||
|
||||
```
|
||||
<DataGrid Name="MyDataGrid" Items="{Binding ToDoListItems}" AutoGenerateColumns="False" >
|
||||
<DataGrid.Columns>
|
||||
<DataGridCheckBoxColumn Header="✔" Binding="{Binding IsChecked}"/>
|
||||
<DataGridTextColumn Header="ToDo" Binding="{Binding Content}" />
|
||||
</DataGrid.Columns>
|
||||
</DataGrid>
|
||||
```
|
||||
|
||||
### API Reference
|
||||
|
||||
[DataGridCheckBoxColumn](http://reference.avaloniaui.net/api/Avalonia.Controls/DataGridCheckBoxColumn/)
|
||||
|
||||
### Source code
|
||||
|
||||
[DataGridCheckBoxColumn.cs](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls.DataGrid/DataGridCheckBoxColumn.cs)
|
||||
|
||||
## DataGridTemplateColumn
|
||||
|
||||
This column is used to display any content you like. There are two [datatemplates.md](../../../misc/wpf/datatemplates.md "mention") which you can define, the `CellTemplate` for the normal state and the `CellEditingTemplate` for the editing state of the current `DataGridCell`. 
|
||||
|
||||
{% hint style="info" %}
|
||||
The DataGridTemplateColumn is editable from Avalonia version 0.10.12 onwoard. If you do not set a `CellEditingTemplate`, the column will stay read-only.
|
||||
{% endhint %}
|
||||
|
||||
### Example
|
||||
|
||||
```
|
||||
<DataGrid Name="MyDataGrid"
|
||||
xmlns:model="using:MyApp.Models" >
|
||||
<DataGrid.Columns>
|
||||
<DataGridTextColumn Header="First Name" Binding="{Binding FirstName}" Width="2*" FontSize="{Binding #FontSizeSlider.Value, Mode=OneWay}" />
|
||||
<DataGridTextColumn Header="Last Name" Binding="{Binding LastName}" Width="2*" FontSize="{Binding #FontSizeSlider.Value, Mode=OneWay}" />
|
||||
<DataGridTemplateColumn Header="Age">
|
||||
<DataGridTemplateColumn.CellTemplate>
|
||||
<DataTemplate DataType="model:Person">
|
||||
<TextBlock Text="{Binding Age, StringFormat='{}{0} years'}" VerticalAlignment="Center" HorizontalAlignment="Center" />
|
||||
</DataTemplate>
|
||||
</DataGridTemplateColumn.CellTemplate>
|
||||
<DataGridTemplateColumn.CellEditingTemplate>
|
||||
<DataTemplate DataType="model:Person">
|
||||
<NumericUpDown Value="{Binding Age}" FormatString="N0" HorizontalAlignment="Stretch" Minimum="0" Maximum="120" />
|
||||
</DataTemplate>
|
||||
</DataGridTemplateColumn.CellEditingTemplate>
|
||||
</DataGridTemplateColumn>
|
||||
</DataGrid.Columns>
|
||||
</DataGrid>
|
||||
```
|
||||
|
||||
### API Reference
|
||||
|
||||
[DataGridTemplateColumn](http://reference.avaloniaui.net/api/Avalonia.Controls/DataGridTemplateColumn/)
|
||||
|
||||
### Source code
|
||||
|
||||
[DataGridTemplateColumn.cs](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls.DataGrid/DataGridTemplateColumn.cs)
|
||||
Загрузка…
Ссылка в новой задаче