跨平台WPF框架Avalonia教程 十四

DataGrid 数据表格

数据表格以自界说的网格形式展示重复的数据。该控件可以举行样式定制、模板化和绑定。
数据表格需要绑定到一个可观察的集合（Observable Collection），该集合可以在相关的数据上下文中找到。
信息
要相识数据上下文背后的概念，请查看这里。
信息
数据表格位于附加的 Avalonia UI 包中。要在您的项目中使用数据表格，您必须引用Avalonia.Controls.DataGrid NuGet 包，并引用其使用的样式，拜见下面。
NuGet包引用​

您必须安装数据表格的 NuGet 包，有几种方法可以做到这一点。您可以使用您的IDE的项目菜单中的管理NuGet包：

或者，您可以在下令行中运行以下指令：

1. dotnet add package Avalonia.Controls.DataGrid

复制代码

或直接在项目（.csproj）文件中添加包引用：

1. <PackageReference Include="Avalonia.Controls.DataGrid" Version="11.0.0" />

复制代码

注意
请注意，您必须始终安装与您正在使用的 Avalonia UI 版本匹配的数据表格版本。
引入数据表格样式​

您必须引用数据表格的主题，以包罗数据表格使用的附加样式。您可以通过向应用步伐（App.axaml文件）添加<StyleInclude>元素来实现这一点。
例如：

1. <Application.Styles>
2.     <FluentTheme />
3.     <StyleInclude Source="avares://Avalonia.Controls.DataGrid/Themes/Fluent.xaml"/>
4. </Application.Styles>

复制代码

常用属性​

您可能常常使用以下属性：
属性描述AutoGenerateColumns是否根据绑定项数据源属性名称自动生成列头。 (默认关闭)ItemsSource作为控件数据源的绑定集合。IsReadOnly当为true时，将绑定方向设置为单向。默认值为false，网格将接受对绑定命据的更改。CanUserReorderColumns用户是否可以通过拖动列头更改列的体现次序。 (默认关闭)CanUserResizeColumns用户是否可以使用指针调整列宽度。 (默认关闭)CanUserSortColumns用户是否可以通过单击列头对列举行排序。 (默认关闭) 更多信息​

这个示例将生成一个基本的数据表格，列头名称将根据项类自动生成。项目数据源绑定到主窗口的 ViewModel。

1. <DataGrid Margin="20" ItemsSource="{Binding People}"
2.           AutoGenerateColumns="True" IsReadOnly="True"
3.           GridLinesVisibility="All"
4.           BorderThickness="1" BorderBrush="Gray">
5. </DataGrid>

复制代码

ViewModel

1. using AvaloniaControls.Models;
2. using System.Collections.Generic;
3. using System.Collections.ObjectModel;
5. namespace AvaloniaControls.ViewModels
6. {
7.     public class MainWindowViewModel : ViewModelBase
8.     {
9.         public ObservableCollection<Person> People { get; }
11.         public MainWindowViewModel()
12.         {
13.             var people = new List<Person>
14.             {
15.                 new Person("Neil", "Armstrong"),
16.                 new Person("Buzz", "Lightyear"),
17.                 new Person("James", "Kirk")
18.             };
19.             People = new ObservableCollection<Person>(people);
20.         }
21.     }
22. }

复制代码

数据源 Person 类

1. public class Person
2. {
3.     public string FirstName { get; set; }
4.     public string LastName { get; set; }
5.    
6.     public Person(string firstName , string lastName)
7.     {
8.         FirstName = firstName;
9.         LastName = lastName;
10.     }
11. }

复制代码

信息
这些示例使用了MVVM模式和数据绑定到一个ObservableCollection。要相识更多有关数据绑定背后的概念，请参阅这里。
通常来说，从数据源中获取的属性名称通常不会成为合适的列名。下面这个示例为表格添加了自界说的列头名称。它还允许列重新排序和调整巨细，并禁用了默认的列排序选项：

1. <DataGrid Margin="20" ItemsSource="{Binding People}"
2.           IsReadOnly="True"
3.           CanUserReorderColumns="True"
4.           CanUserResizeColumns="True"
5.           CanUserSortColumns="False"
6.           GridLinesVisibility="All"
7.           BorderThickness="1" BorderBrush="Gray">
8.   <DataGrid.Columns>
9.      <DataGridTextColumn Header="First Name"  Binding="{Binding FirstName}"/>
10.      <DataGridTextColumn Header="Last Name" Binding="{Binding LastName}" />
11.   </DataGrid.Columns>
12. </DataGrid>

复制代码

这个示例展示了数据表格如何接受更改并更新底层集合，并使用不同的列类型来编辑数据：

1. <DataGrid Margin="20" ItemsSource="{Binding People}"        
2.           GridLinesVisibility="All"
3.           BorderThickness="1" BorderBrush="Gray">
4.   <DataGrid.Columns>
5.      <DataGridTextColumn Header="First Name"  Binding="{Binding FirstName}"/>
6.      <DataGridTextColumn Header="Last Name" Binding="{Binding LastName}" />
7.      <DataGridCheckBoxColumn Header="Fictitious?" Binding="{Binding IsFictitious}" />
8.   </DataGrid.Columns>
9. </DataGrid>

复制代码

ViewModel

1. using AvaloniaControls.Models;
2. using System.Collections.Generic;
3. using System.Collections.ObjectModel;
5. namespace AvaloniaControls.ViewModels
6. {
7.     public class MainWindowViewModel : ViewModelBase
8.     {
9.         public ObservableCollection<Person> People { get; }
11.         public MainWindowViewModel()
12.         {
13.             var people = new List<Person>
14.             {
15.                 new Person("Neil", "Armstrong", false),
16.                 new Person("Buzz", "Lightyear", true),
17.                 new Person("James", "Kirk", true)
18.             };
19.             People = new ObservableCollection<Person>(people);
20.         }
21.     }
22. }

复制代码

数据源 Person 类

1. public class Person
2. {
3.     public string FirstName { get; set; }
4.     public string LastName { get; set; }
5.     public bool IsFictitious { get; set; }
7.     public Person(string firstName , string lastName, bool isFictitious)
8.     {
9.         FirstName = firstName;
10.         LastName = lastName;
11.         IsFictitious = isFictitious;
12.     }
13. }

复制代码

 
数据表格模板列

您可以使用此列类型自界说数据网格列的体现和编辑。
有两个数据模板，您可以将其界说为附加属性：
数据模板描述CellTemplate列值的体现（未编辑）出现。CellEditingTemplate列值的编辑模板。 信息
如果您未设置编辑模板，该列将保持只读状态。
示例​

此示例在编辑某人的年岁属性时添加一个数字上下控件：

1. <Window ...
2.   xmlns:model="using:AvaloniaControls.Models" >
3.   
4.   <DataGrid Margin="20" ItemsSource="{Binding People}"
5.           GridLinesVisibility="All"
6.           BorderThickness="1" BorderBrush="Gray">
7.     <DataGrid.Columns>
8.       <DataGridTextColumn Header="First Name" Width="2*"
9.          Binding="{Binding FirstName}" />
10.       <DataGridTextColumn Header="Last Name" Width="2*"
11.          Binding="{Binding LastName}" />
12.       
13.       <DataGridTemplateColumn Header="Age">
14.         <DataGridTemplateColumn.CellTemplate>
15.           <DataTemplate DataType="model:Person">
16.             <TextBlock Text="{Binding AgeInYears, StringFormat='{}{0} years'}"
17.               VerticalAlignment="Center" HorizontalAlignment="Center" />
18.           </DataTemplate>
19.         </DataGridTemplateColumn.CellTemplate>
20.         <DataGridTemplateColumn.CellEditingTemplate>
21.           <DataTemplate DataType="model:Person">
22.             <NumericUpDown Value="{Binding AgeInYears}"  
23.                FormatString="N0" Minimum="0" Maximum="120"  
24.                HorizontalAlignment="Stretch"/>
25.           </DataTemplate>
26.         </DataGridTemplateColumn.CellEditingTemplate>
27.       </DataGridTemplateColumn>
28.    
29.     </DataGrid.Columns>
30.   </DataGrid>
31. </Window>

复制代码

C# View Model

1. using AvaloniaControls.Models;
2. using System.Collections.Generic;
3. using System.Collections.ObjectModel;
5. namespace AvaloniaControls.ViewModels
6. {
7.     public class MainWindowViewModel : ViewModelBase
8.     {
9.         public ObservableCollection<Person> People { get; }
11.         public MainWindowViewModel()
12.         {
13.             var people = new List<Person>
14.             {
15.                 new Person("Neil", "Armstrong",  55),
16.                 new Person("Buzz", "Lightyear", 38),
17.                 new Person("James", "Kirk", 44)
18.             };
19.             People = new ObservableCollection<Person>(people);
20.         }
21.     }
22. }

复制代码

C# Item Class

1. public class Person
2. {
3.     public string FirstName { get; set; }
4.     public string LastName { get; set; }
5.     public int AgeInYears { get; set; }
8.     public Person(string firstName , string lastName, int ageInYears)
9.     {
10.         FirstName = firstName;
11.         LastName = lastName;
12.         AgeInYears = ageInYears;
13.     }
14. }

复制代码

数据表格列

数据表格可以包罗多个数据表格列，Avalonia UI 提供了两种内置列类型，用于体现不同的数据类型，还有一个可以自界说列外观的模板类型。
列类型描述DataGridTextColumn用于体现和编辑列数据的文本框。您可以在此列类型中控制字体属性，好比字体家族和巨细。DataGridCheckBoxColumn用于体现和编辑列数据的复选框，当数据类型为布尔值时。此列类型还支持当值为可空时的三态复选框。DataGridTemplateColumn可用于自界说列数据的展示和编辑。 常用属性​

大部分属性在这三种列类型中都是通用的：
属性描述Header列的标题内容。HeaderTemplate使用数据模板作为列的标题。IsReadOnly列是否为只读。如果数据表格本身是只读的，那么无论此属性的值如何，列都是只读的。IsThreeState仅实用于复选框列。当可空布尔值为null时，启用第三个（添补）状态。Width列宽度可以是绝对巨细或相对巨细（见下文）。 列宽度​

如果您没有为列设置宽度，它将被调整以顺应内容，并在须要时为网格添加程度滚动条。
您可以绝对设置列的宽度，例如：

1. <DataGridTextColumn Width="200" />

复制代码

这将导致不适合的列内容被隐蔽。
或者，您可以指定相对自动巨细。这使用 * 表现可用宽度的中分，然后使用类似 2* 的倍数。未指定宽度的列将根据其内容调整巨细。
例如，要将数据表格分别为3个等宽的列：

1. <DataGridTextColumn Width="*" />
2. <DataGridTextColumn Width="*" />
3. <DataGridTextColumn Width="*" />

复制代码

示例
下面的示例通过将两列等宽睁开来改进数据表格的外观：

1. <Window ... >
2.    <Design.DataContext>
3.        <vm:MainWindowViewModel/>
4.   </Design.DataContext>
5.   <DataGrid Margin="20" ItemsSource="{Binding People}"
6.           IsReadOnly="True"
7.           GridLinesVisibility="All"
8.           BorderThickness="1" BorderBrush="Gray">
9.     <DataGrid.Columns>
10.       <DataGridTextColumn Header="名字" Width="*"
11.               Binding="{Binding FirstName}"/>
12.       <DataGridTextColumn Header="姓氏" Width="*"
13.               Binding="{Binding LastName}" />
14.     </DataGrid.Columns>
15.   </DataGrid>
16. </Window>

复制代码

C# ViewModel

1. using AvaloniaControls.Models;
2. using System.Collections.Generic;
3. using System.Collections.ObjectModel;
5. namespace AvaloniaControls.ViewModels
6. {
7.     public class MainWindowViewModel : ViewModelBase
8.     {
9.         public ObservableCollection<Person> People { get; }
11.         public MainWindowViewModel()
12.         {
13.             var people = new List<Person>
14.             {
15.                 new Person("Neil", "Armstrong"),
16.                 new Person("Buzz", "Lightyear"),
17.                 new Person("James", "Kirk")
18.             };
19.             People = new ObservableCollection<Person>(people);
20.         }
21.     }
22. }

复制代码

数据源 Person 类

1. public class Person
2. {
3.     public string FirstName { get; set; }
4.     public string LastName { get; set; }
5.    
6.     public Person(string firstName , string lastName)
7.     {
8.         FirstName = firstName;
9.         LastName = lastName;
10.     }
11. }

复制代码

在预览窗口中可以看到效果，由于 <Design.DataContext> 元素创建了绑定的 ViewModel：

 


DatePicker 日期选择器

日期选择器包罗三个“轮盘”控制器，允许用户选择日期值。点击控件时会体现这些旋转器。
常用属性​

你可能最常使用这些属性：
属性描述DayVisible设置是否体现日列。MonthVisible设置是否体现月列。YearVisible设置是否体现年列。DayFormat日期中日部分的格式字符串。MonthFormat日期中月部分的格式字符串。YearFormat日期中年部分的格式字符串。SelectedDate选择的日期（无选择时为 null）。 示例​

此示例使用日期格式属性来体现星期名及日期号：

1. <StackPanel Margin="20">
2.   <DatePicker DayFormat="ddd dd"/>
3. </StackPanel>

复制代码

初始化日期​

这个控件的日期属性不能在 XAML 中使用属性设置，由于没有可用的转换器来将字符串转换为日期对象，如 DateTime 和 DateTimeOffset。
你需要编写如下 code-behind 代码：

1. datePicker.SelectedDate = new DateTimeOffset(new DateTime(1950, 1, 1));

复制代码

 
Decorator 装饰器

Decorator 是用于装饰单个子控件的基础装饰器类。
参考资料​

Decorator
源代码​

Decorator.cs


DockPanel 边缘布局面板

边缘布局面板（Dock Panel）控件可以沿着指定的“停靠边缘”（顶部、底部、左侧和右侧）排列其子控件，最后一个子控件添补剩余的空间。边缘布局面板可以保持与停靠边缘平行的子控件尺寸，使得子控件沿停靠边缘填满所有可用空间。
例如，如果一个子控件的停靠边缘被界说为“顶部”，而且它有一个界说的高度但没有宽度，它将会如许绘制：

注意
你必须界说与停靠边缘垂直的子控件尺寸，否则它将不会体现。
你可以选择性地界说与停靠边缘平行的尺寸。在这种情况下，子控件将根据同一方向上的对齐设置举行绘制。例如，一个界说了宽度并停靠在顶部边缘的子控件，将遵循其程度对齐属性（默认居中）。
子控件按照它们在XAML中界说的次序举行停靠。当 Avalonia UI 正在调整子控件的巨细时，会考虑到任何先前绘制的控件。这意味着永远不会有重叠。
最后界说的子控件将填满任何剩余的空间。
注意
你必须始终界说一个最后的子控件（没有停靠属性），否则停靠计算将无法正确举行。这意味着一个边缘布局面板需要至少两个子控件。
常用属性​

你可能最常使用这些属性：
属性描述DockPanel.Dock.Left附加到一个子控件 - 将其停靠在左侧。DockPanel.Dock.Top附加到一个子控件 - 将其停靠在顶部边缘。DockPanel.Dock.Right附加到一个子控件 - 将其停靠在右侧。DockPanel.Dock.Bottom附加到一个子控件 - 将其停靠在底部边缘。 示例​

将橙色矩形的透明度设置为0.5，以证实图形间没有重叠。

1. <DockPanel Width="300" Height="300">
2.     <Rectangle Fill="Red" Height="100" DockPanel.Dock="Top"/>
3.     <Rectangle Fill="Blue" Width="100" DockPanel.Dock="Left" />
4.     <Rectangle Fill="Green" Height="100" DockPanel.Dock="Bottom"/>
5.     <Rectangle Fill="Orange" Width="100" DockPanel.Dock="Right" Opacity="0.5"/>
6.     <Rectangle Fill="Gray" />
7. </DockPanel>

复制代码

Expander 折叠面板

折叠面板控件具有一个标题地区（始终可见）和一个可折叠的内容部分，该内容部分可以包罗单个子控件。
常用属性​

你可能最常使用这些属性：
属性描述Expander.Header界说标题地区中体现的内容。 示例​

1. <Expander VerticalAlignment="Top">
2.     <Expander.Header>
3.         隐藏搜索
4.     </Expander.Header>
5.     <Grid RowDefinitions="*,*" ColumnDefinitions="150,*">
6.         <TextBlock Grid.Row="0" Grid.Column="0"
7.                    VerticalAlignment="Center">搜索</TextBlock>
8.         <TextBox Grid.Row="0" Grid.Column="1"
9.                  Watermark="搜索文本" Width="200" />
10.         <TextBlock Grid.Row="1" Grid.Column="0"
11.                    VerticalAlignment="Center">区分大小写？</TextBlock>
12.         <CheckBox Grid.Row="1" Grid.Column="1" />
13.     </Grid>
14. </Expander>

复制代码

 

Flyout 弹出层

弹出层是一种可关闭的容器，可以附加到某些类型的“宿主”控件上；尽管弹出层本身并不是控件。当宿主控件获得焦点时，弹出层会体现出来，而且可以通过多种不同的方式再次隐蔽。
弹出层可以包罗简单或更丰富的、组合的用户界面内容。
在 Avalonia UI 应用中，弹出层可以声明为资源，并在两个或更多宿主控件之间共享。
示例​

通过宿主控件的 Flyout 属性附加弹出层。例如：

1. <Button Content="带弹出层的按钮">
2.   <Button.Flyout>
3.     <Flyout>这是按钮的弹出层</Flyout>
4.   </Button.Flyout>
5. </Button>

复制代码

注意
只有按钮和分隔按钮控件支持 Flyout 属性。你可以使用 AttachedFlyout 属性将弹出层附加到其他 Avalonia UI 内置控件上。
对于没有 Flyout 属性的控件，使用 AttachedFlyout 属性如下：

1. <Border Background="Red" PointerPressed="Border_PointerPressed">
2.     <FlyoutBase.AttachedFlyout>
3.         <Flyout>
4.             <TextBlock Text="红色矩形弹出层" />
5.         </Flyout>
6.     </FlyoutBase.AttachedFlyout>
7. </Border>

复制代码

弹出层不会自动体现，必须从 code-behind 体现。例如：

1. public void Border_PointerPressed(object sender, PointerPressedEventArgs args)
2. {
3.     var ctl = sender as Control;
4.     if (ctl != null)
5.     {
6.         FlyoutBase.ShowAttachedFlyout(ctl);
7.     }
8. }

复制代码

常用属性​

你可能最常使用这些属性：
属性描述Placement弹出层相对于其附加控件的打开位置。ShowMode描述弹出层的体现和隐蔽方式。请看下面的选项。 ShowMode​

此设置描述弹出层的体现和隐蔽方式：
模式描述Standard当附加的控件获得焦点时体现弹出层。当附加的控件失去焦点时隐蔽弹出层（用户切换焦点或点击其他地方）。Transient在弹出层外做出操作时（如点击）消散。TransientWithDismiss OnPointerMoveAway当光标移开一定距离后，弹出层自动消散。 所有弹出层的常用方法​

属性描述ShowAt(Control)在指定的目标控件上体现弹出层。ShowAt(Control, bool)在指定的目标控件上体现弹出层，但位置基于当前指针位置。Hide隐蔽弹出层。 共享弹出层​

你可以在应用中的两个或更多元素之间共享弹出层。例如，从窗口的资源集合中共享弹出层：

1. <Window.Resources>
2.     <Flyout x:Key="MySharedFlyout">
3.         <!-- 弹出层内容在此 -->
4.     </Flyout>
5. </Window.Resources>
7. <Button Content="点击我！" Flyout="{StaticResource MySharedFlyout}" />
9. <Button Content="现在点击我！" Flyout="{StaticResource MySharedFlyout}" />

复制代码

弹出层的样式定制​

固然弹出层本身不是控件，但可以通过Flyout用来体现其内容的展示器来自界说其外观。对于平凡的Flyout，这个展示器是FlyoutPresenter；对于MenuFlyout，则是MenuFlyoutPresenter。由于弹出层的展示器不是公开的，特定的弹出层相关的特殊样式类可以通过FlyoutBase上的FlyoutPresenterClasses属性通报:

1. <Style Selector="FlyoutPresenter.mySpecialClass">
2.     <Setter Property="Background" Value="Red" />
3. </Style>
5. <Flyout FlyoutPresenterClasses="mySpecialClass">
6.     <!-- 弹出层内容在此 -->
7. </Flyout>

复制代码

Grid 网格布局

Grid 控件非常实用于按列和行排列子控件。您可以为 Grid 界说绝对巨细、比例巨细和自动巨细的行和列几何形状。
每个位于 Grid 中的子控件都可以使用列和行坐标定位在 Grid 单位格中。这些坐标是从零开始的，而且默认值为零。
如果在同一单位格中定位多个子控件，它们将按照在 XAML 中出现的次序在该单位格中绘制。这是实现层叠堆叠的另一种计谋，除了使用 Panel。
注意
如果您忽略了 Grid 的子控件的列和行坐标，它们都将被绘制在左上角（列=0，行=0）。
也可以使子控件跨越一个或多个单位格的行或列，或两者都跨越。
常用属性​

您可能最常使用这些属性：
属性描述ColumnDefinitionsGrid 中列宽的尺寸界说。RowDefinitionsGrid 中行高的尺寸界说。ShowGridLines体现单位格之间的网格线（作为虚线体现）。Grid.Column将控件布局到指定的从零开始的列中。Grid.Row将控件布局到指定的从零开始的行中。Grid.ColumnSpan将控件跨越一个或多个列。Grid.RowSpan将控件跨越一个或多个行。Grid.IsSharedSizeScope界说控件为 SharedSizeGroup 的包罗范围。 尺寸界说​

您可以如下界说行和列的巨细：

• 绝对巨细 - 以装备独立像素（整数）为单位。
  
• 比例巨细 - 根据剩余 Grid 巨细的比例。
  
• 自动巨细 - 根据包罗的子控件的巨细自动调整。
  

尺寸界说可以通过简短代码列表或使用 XAML 元素完全睁开来编写。
完备界说支持额外的束缚，如 SharedSizeGroup 和指定最小和最大长度的绝对巨细。
绝对巨细界说​

绝对巨细界说在列网格式中以整数形式编写。例如：
ColumnDefinitions="200, 200, 300"
通过完全睁开的 XAML 界说，这与以下雷同：

1. <Grid>
2.    <Grid.ColumnDefinitions>
3.        <ColumnDefinition Width="200"></ColumnDefinition>
4.        <ColumnDefinition Width="200"></ColumnDefinition>
5.        <ColumnDefinition Width="300"></ColumnDefinition>
6.    </Grid.ColumnDefinitions>
7. </Grid>

复制代码

比例巨细界说​

比例巨细界说使用星号表现可用 Grid 空间的比例。例如，要创建两个宽度雷同的列，然后是一个宽度是前两个的两倍（单个宽度的两倍）的列：
ColumnDefinitions="*, *, 2*"
通过完全睁开的 XAML 界说，这与以下雷同：

1. <Grid>
2.    <Grid.ColumnDefinitions>
3.        <ColumnDefinition Width="*"></ColumnDefinition>
4.        <ColumnDefinition Width="*"></ColumnDefinition>
5.        <ColumnDefinition Width="2*"></ColumnDefinition>
6.    </Grid.ColumnDefinitions>
7. </Grid>

复制代码

提示
尺寸界说不支持百分比。一个解决方法是创建一个界说，此中所有比例值加起来便是 100，例如 <Grid ColumnDefinitions="25*, 25*, 50*"> 用于 3 个列，每个列分别占剩余可用宽度的 25%、25% 和 50%。
自动巨细界说​

要自动调整行或列的巨细以顺应此中最大的子控件，请使用 'Auto' 代码。例如：
RowDefinitions="Auto, Auto, Auto"
通过完全睁开的 XAML 界说下雷同：，这与以

1. <Grid>
2.    <Grid.RowDefinitions>
3.        <RowDefinition Height="Auto"></RowDefinition>
4.        <RowDefinition Height="Auto"></RowDefinition>
5.        <RowDefinition Height="Auto"></RowDefinition>
6.    </Grid.RowDefinitions>
7. </Grid>

复制代码

注意
如果子控件有自己显式设置的尺寸，当绘制时将遵循这些尺寸。这意味着如果它大于其网格单位格，它将重叠相邻的单位格。
混合尺寸界说​

您可以在同一尺寸界说序列中混合使用上述任何一种。例如：
ColumnDefinitions="200, *, 2*"
通过完全睁开的 XAML 界说，这与以下雷同：

1. <Grid>
2.    <Grid.ColumnDefinitions>
3.        <ColumnDefinition Width="200"></ColumnDefinition>
4.        <ColumnDefinition Width="*"></ColumnDefinition>
5.        <ColumnDefinition Width="2*"></ColumnDefinition>
6.    </Grid.ColumnDefinitions>
7. </Grid>

复制代码

绘图规则​

在计算尺寸时，任何比例列都将顺应在计算绝对值和自动值后剩余的空间。
自动尺寸的计算是使用子控件的边距布局地区外缘举行的。
信息
要回顾控制布局地区的概念，请参阅此处。
子控件按照它们在 XAML 中出现的次序在其分配的网格单位格中绘制。这条规则既实用于当两个子控件被分配到同一单位格时的情况，也实用于子控件大于其分配单位格时的重叠情况。
当子控件有自己的尺寸，而且小于其分配的单位格时，它将根据其程度和垂直对齐属性（默认都是居中）在单位格中对齐绘制。
示例​

这个示例展示了：

• 如何使用简短语法界说列和行。
  
• 如何混合绝对和比例列宽。
  
• 如何为子控件分配单位格。
  
• 如何跨行和列。
  

一个包罗 3 个相等行和 3 列（1 个固定宽度），（2 个按比例抓取剩余宽度）的 Grid 的示例是：

1. <Grid ColumnDefinitions="100,1.5*,4*" RowDefinitions="Auto,Auto,Auto"  Margin="4">
2.   <TextBlock Text="Col0Row0:" Grid.Row="0" Grid.Column="0"/>
3.   <TextBlock Text="Col0Row1:" Grid.Row="1" Grid.Column="0"/>
4.   <TextBlock Text="Col0Row2:" Grid.Row="2" Grid.Column="0"/>
5.   <CheckBox Content="Col2Row0" Grid.Row="0" Grid.Column="2"/>
6.   <Button Content="SpansCol1-2Row1-2" Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="2"/>
7. </Grid>

复制代码

在这里，100 的绝对宽度被减去后（对于列 0），列 1 将获得 1.5 个部分，列 2 将获得剩余宽度的 4 个部分。
按钮被绘制以添补从单位格（列 1，行 1）加一个列（向右）和一行向下的跨度。效果看起来是如许的：

 
SharedSizeGroup

SharedSizeGroup 允许在多个 Grid 控件之间共享自动调整巨细的行和列界说的巨细信息。
示例​

以下示例演示了如何使用 SharedSizeGroup 在 ListBox 内外一致地调整列的巨细。

• XML
  
• C#
  

1. <StackPanel Grid.IsSharedSizeScope="True">
2.   <StackPanel.Styles>
3.     <Style Selector="ListBoxItem">
4.       <Setter Property="Padding" Value="0" />
5.     </Style>
6.   </StackPanel.Styles>
8.   <ListBox ItemsSource="{Binding People}">
9.     <ListBox.ItemTemplate>
10.       <DataTemplate>
11.         <Grid Name="myGrid" RowDefinitions="auto, auto" ShowGridLines="True">
12.           <Grid.ColumnDefinitions>
13.             <ColumnDefinition SharedSizeGroup="A" />
14.             <ColumnDefinition SharedSizeGroup="B" />
15.             <ColumnDefinition Width="*" />
16.             <ColumnDefinition SharedSizeGroup="C" />
17.           </Grid.ColumnDefinitions>
19.           <TextBlock Grid.Column="0" Margin="6,0" Text="{Binding FirstName}" />
20.           <TextBlock Grid.Column="1" Margin="6,0" Text="{Binding LastName}" />
21.           <TextBlock Grid.Column="2" Margin="6,0" Text="{Binding Age}" />
22.           <TextBlock Grid.Column="3" Margin="6,0" Text="{Binding Occupation}" />
23.         </Grid>
24.       </DataTemplate>
25.     </ListBox.ItemTemplate>
26.   </ListBox>
27.    
28.   <!-- Controls may appear in-between Grids with SharedSizeGroups -->
29.   <Separator />
31.   <Grid>
32.     <Grid.ColumnDefinitions>
33.       <ColumnDefinition SharedSizeGroup="A" />
34.       <ColumnDefinition SharedSizeGroup="B" />
35.       <ColumnDefinition Width="*" />
36.       <ColumnDefinition SharedSizeGroup="C" />
37.     </Grid.ColumnDefinitions>
39.     <Button Content="This is the First Name" HorizontalAlignment="Stretch" Grid.Column="0" />
40.     <Button Content="Last" HorizontalAlignment="Stretch" Grid.Column="1" />
41.     <Button Content="Age" HorizontalAlignment="Stretch" Grid.Column="2" />
42.     <Button Content="Occupation" HorizontalAlignment="Stretch" Grid.Column="3" />
43.   </Grid>
45. </StackPanel>

复制代码

请注意每列的巨细：第一列由 Button 调整巨细，第二列和第四列由 ListBox 内容调整巨细，第三列占用剩余空间。

GridSplitter 网格分割器

网格分割器控件允许用户在运行时调整网格中的列或行的巨细。分割器被绘制为一列或一行（可以指定巨细），并具有一个用户可以在运行时操作的把手。
常用属性​

你可能最常使用这些属性：
属性描述Background分割条的背景颜色。Grid.Column附加属性，用来指定分割器的列位置。Grid.Row附加属性，用来指定分割器的行位置。ResizeDirection分割器的移动方向。（见下面的注释） 注意
为了提供任何故意义的移动，分割器的移动方向必须与其位置界说雷同。即：对于列分割器指定 ResizeDirection="Columns"，对于行分割器指定 ResizeDirection="Rows"。
示例​

这是一个列分割器：

1. <Grid ColumnDefinitions="*, 4, *">
2.     <Rectangle Grid.Column="0" Fill="Blue"/>
3.     <GridSplitter Grid.Column="1" Background="Black" ResizeDirection="Columns"/>
4.     <Rectangle Grid.Column="2" Fill="Red"/>
5. </Grid>

复制代码

这是一个行分割器：

1. <Grid RowDefinitions="*, 4, *">
2.     <Rectangle Grid.Row="0" Fill="Blue"/>
3.     <GridSplitter Grid.Row="1" Background="Black" ResizeDirection="Rows"/>
4.     <Rectangle Grid.Row="2" Fill="Red"/>
5. </Grid>

复制代码

Image 图像

图像可以从指定的图像源体现栅格图像。源可以是：

• 一个字符串常量，对应一个应用步伐资源，
  
• 从资源的绑定名称加载为位图（通过使用绑定转换器），
  
• 或者可以直接从内存流加载为位图。
  

图像可以用来组成其他控件的内容。例如，您可以使用图像控件创建一个图形按钮。
体现的图像可以被调整巨细和缩放。默认的缩放设置（两个方向上均匀拉伸）将导致图像顺应给定的巨细（宽度和/或高度）。
信息
图像的缩放设置与视图框的雷同，拜见ViewBox。
示例​

此示例展示了一个位图资源被加载到图像控件中，此中高度和宽度被限制，但缩放设置保持默认。图像本身不是正方形，但图像的宽度和高度设置为雷同的值。包罗矩形是为了给出图像被缩放的一个概念：

1. <Panel>
2.   <Rectangle Height="300" Width="300" Fill="LightGray"/>
3.   <Image Margin="20" Height="200" Width="200"
4.          Source="avares://AvaloniaControls/Assets/pipes.jpg"/>
5. </Panel>

复制代码

在下一个示例中，引入了 UniformToFill 的拉伸设置，使得图像完全填满指定的高度，但会裁剪掉超出指定宽度的部分。图像没有因此处理而失真。

1. <Panel>
2.   <Rectangle Height="300" Width="300" Fill="LightGray"></Rectangle>
3.   <Image Margin="20" Height="200" Width="200"
4.          Stretch="UniformToFill"
5.          Source="avares://AvaloniaControls/Assets/pipes.jpg"/>
6. </Panel>

复制代码

ItemsControl 元素集合控件

元素集合控件是用于体现重复数据的控件（例如列表框）的基础。它本身不包罗内置的格式化或交互功能；但你可以联合数据绑定、样式和数据模板使用，创建一个完全自界说的重复数据控件。
信息
要查看 Avalonia UI 内置的所有重复数据控件的完备列表，请查看这里。
常用属性​

你可能最常使用这些属性：
属性描述ItemsSource用作控件数据源的绑定集合。ItemsControl.ItemTemplate附加属性元素，包罗单个元素的数据模板。 示例​

此示例将一个可观察的餐具项集合绑定到一个元素控件，此中通过数据模板提供了一些自界说布局和格式化：

1. <StackPanel Margin="20">
2.   <TextBlock Margin="0 5">餐具列表：</TextBlock>
3.   <ItemsControl ItemsSource="{Binding CrockeryList}" >
4.     <ItemsControl.ItemTemplate>
5.     <DataTemplate>
6.       <Border Margin="0,10,0,0"
7.           CornerRadius="5"
8.           BorderBrush="Gray" BorderThickness="1"
9.           Padding="5">
10.         <StackPanel Orientation="Horizontal">
11.           <TextBlock Text="{Binding Title}"/>
12.           <TextBlock Margin="5 0" FontWeight="Bold"
13.                       Text="{Binding Number}"/>
14.         </StackPanel>
15.       </Border>
16.     </DataTemplate>
17.     </ItemsControl.ItemTemplate>
18.     </ItemsControl>
19. </StackPanel>

复制代码

C# ViewModel

1. using AvaloniaControls.Models;
2. using System.Collections.Generic;
3. using System.Collections.ObjectModel;
5. namespace AvaloniaControls.ViewModels
6. {
7.     public class MainWindowViewModel : ViewModelBase
8.     {
9.         public ObservableCollection<Crockery> CrockeryList { get; set; }
10.         
11.         public MainWindowViewModel()
12.         {
13.             CrockeryList = new ObservableCollection<Crockery>(new List<Crockery>
14.             {
15.                 new Crockery("晚餐盘", 12),
16.                 new Crockery("小碟", 12),
17.                 new Crockery("早餐碗", 6),
18.                 new Crockery("杯子", 10),
19.                 new Crockery("茶碟", 10),
20.                 new Crockery("马克杯", 6),
21.                 new Crockery("牛奶壶", 1)
22.             });   
23.         }
24.     }
25. }

复制代码

C# 数据源的类界说

1. public class Crockery
2. {
3.     public string Title { get; set; }
4.     public int Number{ get; set; }
6.     public Crockery(string title, int number)
7.     {
8.         Title = title;
9.         Number = number;
10.     }
11. }

复制代码

视图程度方向可调整巨细，但内容在过高时会被隐蔽。这个控件没有内置滚动条（与 ListBox 不同）。

 
ItemsRepeater 元素重复器

元素重复器可以从绑定的数据源体现重复数据。它具有布局模板和数据模板。
信息
元素重复器是 UWP ItemsRepeater 控件的移植版本。更多信息请拜见这里。
信息
元素重复器已移至这里。
默认的布局模板是垂直堆叠布局，因此元素会以垂直列表的形式体现。
示例​

此示例将一个可观察的餐具项集合绑定到元素重复器控件，此中每个元素的自界说布局和格式由数据模板提供：

1. <StackPanel Margin="20">
2.   <TextBlock Margin="0 5">餐具列表：</TextBlock>
3.   <ItemsRepeater ItemsSource="{Binding CrockeryList}">
4.     <ItemsRepeater.ItemTemplate>
5.       <DataTemplate>
6.         <Border Margin="0,10,0,0"
7.             CornerRadius="5"
8.             BorderBrush="Blue" BorderThickness="1"
9.             Padding="5">
10.           <StackPanel Orientation="Horizontal">
11.             <TextBlock Text="{Binding Title}"/>
12.             <TextBlock Margin="5 0" FontWeight="Bold"
13.                         Text="{Binding Number}"/>
14.           </StackPanel>
15.         </Border>
16.       </DataTemplate>
17.     </ItemsRepeater.ItemTemplate>
18.   </ItemsRepeater>
19. </StackPanel>

复制代码

C# ViewModel

1. using AvaloniaControls.Models;
2. using System.Collections.Generic;
3. using System.Collections.ObjectModel;
5. namespace AvaloniaControls.ViewModels
6. {
7.     public class MainWindowViewModel : ViewModelBase
8.     {
9.         public ObservableCollection<Crockery> CrockeryList { get; set; }
10.         
11.         public MainWindowViewModel()
12.         {
13.             CrockeryList = new ObservableCollection<Crockery>(new List<Crockery>
14.             {
15.                 new Crockery("晚餐盘", 12),
16.                 new Crockery("小盘", 12),
17.                 new Crockery("早餐碗", 6),
18.                 new Crockery("杯子", 10),
19.                 new Crockery("茶托", 10),
20.                 new Crockery("马克杯", 6),
21.                 new Crockery("牛奶壶", 1)
22.             });   
23.         }
24.     }
25. }

复制代码

C# 数据源的类界说

1. public class Crockery
2. {
3.     public string Title { get; set; }
4.     public int Number { get; set; }
6.     public Crockery(string title, int number)
7.     {
8.         Title = title;
9.         Number = number;
10.     }
11. }

复制代码

默认情况下，元素重复器将以垂直堆叠布局渲染元素。你可以通过使用 <ItemsRepeater.Layout> 元素覆盖此设置，使元素程度体现。例如：

1. <StackPanel Margin="20">
2.   <TextBlock Margin="0 5">餐具列表：</TextBlock>
3.   <ScrollViewer HorizontalScrollBarVisibility="Auto">
4.     <ItemsRepeater ItemsSource="{Binding CrockeryList}" Margin="0 20">
5.       <ItemsRepeater.Layout>
6.         <StackLayout Spacing="40"
7.             Orientation="Horizontal" />
8.       </ItemsRepeater.Layout>
9.       <ItemsRepeater.ItemTemplate>
10.         <DataTemplate>
11.           <Border Margin="0,10,0,0"
12.               CornerRadius="5"
13.               BorderBrush="Blue" BorderThickness="1"
14.               Padding="5">
15.             <StackPanel Orientation="Horizontal">
16.               <TextBlock Text="{Binding Title}"/>
17.               <TextBlock Margin="5 0" FontWeight="Bold"
18.                           Text="{Binding Number}"/>
19.             </StackPanel>
20.           </Border>
21.         </DataTemplate>
22.       </ItemsRepeater.ItemTemplate>
23.     </ItemsRepeater>
24.   </ScrollViewer>
25. </StackPanel>

复制代码

元素程度体现，如果没有添加围绕元素重复器的滚动查看器元素，那么过于靠右的元素将会被隐蔽。

 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。