跨平台WPF框架Avalonia教程 十四

code_shenbing2024-11-19 0:09

DataGrid 数据表格

数据表格以自定义的网格形式展示重复的数据。该控件可以进行样式定制、模板化和绑定。

数据表格需要绑定到一个可观察的集合（Observable Collection），该集合可以在相关的数据上下文中找到。

信息

要了解数据上下文 背后的概念，请查看这里。

信息

数据表格位于附加的 Avalonia UI 包中。要在您的项目中使用数据表格，您必须引用Avalonia.Controls.DataGrid NuGet 包，并引用其使用的样式，参见下面。

NuGet包引用​

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

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

dotnet add package Avalonia.Controls.DataGrid

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

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

注意

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

引入数据表格样式​

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

例如：

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

常用属性​

您可能经常使用以下属性：

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

更多信息​

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

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

ViewModel

using AvaloniaControls.Models;
using System.Collections.Generic;
using System.Collections.ObjectModel;

namespace AvaloniaControls.ViewModels
{
    public class MainWindowViewModel : ViewModelBase
    {
        public ObservableCollection<Person> People { get; }

        public MainWindowViewModel()
        {
            var people = new List<Person> 
            {
                new Person("Neil", "Armstrong"),
                new Person("Buzz", "Lightyear"),
                new Person("James", "Kirk")
            };
            People = new ObservableCollection<Person>(people);
        }
    }
}

数据源 Person 类

public class Person
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    
    public Person(string firstName , string lastName)
    {
        FirstName = firstName;
        LastName = lastName;
    }
}

信息

这些示例使用了MVVM模式和数据绑定到一个ObservableCollection。要了解更多有关数据绑定背后的概念，请参阅这里。

通常来说，从数据源中获取的属性名称通常不会成为合适的列名。下面这个示例为表格添加了自定义的列头名称。它还允许列重新排序和调整大小，并禁用了默认的列排序选项：

<DataGrid Margin="20" ItemsSource="{Binding People}"
          IsReadOnly="True"
          CanUserReorderColumns="True"
          CanUserResizeColumns="True"
          CanUserSortColumns="False"
          GridLinesVisibility="All"
          BorderThickness="1" BorderBrush="Gray">
  <DataGrid.Columns>
     <DataGridTextColumn Header="First Name"  Binding="{Binding FirstName}"/>
     <DataGridTextColumn Header="Last Name" Binding="{Binding LastName}" />
  </DataGrid.Columns>
</DataGrid>

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

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

ViewModel

using AvaloniaControls.Models;
using System.Collections.Generic;
using System.Collections.ObjectModel;

namespace AvaloniaControls.ViewModels
{
    public class MainWindowViewModel : ViewModelBase
    {
        public ObservableCollection<Person> People { get; }

        public MainWindowViewModel()
        {
            var people = new List<Person> 
            {
                new Person("Neil", "Armstrong", false),
                new Person("Buzz", "Lightyear", true),
                new Person("James", "Kirk", true)
            };
            People = new ObservableCollection<Person>(people);
        }
    }
}

数据源 Person 类

public class Person
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public bool IsFictitious { get; set; }

    public Person(string firstName , string lastName, bool isFictitious)
    {
        FirstName = firstName;
        LastName = lastName;
        IsFictitious = isFictitious;
    }
}

数据表格模板列

您可以使用此列类型自定义数据网格列的显示和编辑。

有两个数据模板，您可以将其定义为附加属性：

数据模板 描述
CellTemplate 列值的显示（未编辑）呈现。
CellEditingTemplate 列值的编辑模板。

信息

如果您未设置编辑模板，该列将保持只读状态。

示例​

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

<Window ...
  xmlns:model="using:AvaloniaControls.Models" >
  
  <DataGrid Margin="20" ItemsSource="{Binding People}"
          GridLinesVisibility="All"
          BorderThickness="1" BorderBrush="Gray">
    <DataGrid.Columns>
      <DataGridTextColumn Header="First Name" Width="2*"
         Binding="{Binding FirstName}" />
      <DataGridTextColumn Header="Last Name" Width="2*"
         Binding="{Binding LastName}" />
      
      <DataGridTemplateColumn Header="Age">
        <DataGridTemplateColumn.CellTemplate>
          <DataTemplate DataType="model:Person">
            <TextBlock Text="{Binding AgeInYears, StringFormat='{}{0} years'}" 
              VerticalAlignment="Center" HorizontalAlignment="Center" />
          </DataTemplate>
        </DataGridTemplateColumn.CellTemplate>
        <DataGridTemplateColumn.CellEditingTemplate>
          <DataTemplate DataType="model:Person">
            <NumericUpDown Value="{Binding AgeInYears}"  
               FormatString="N0" Minimum="0" Maximum="120"  
               HorizontalAlignment="Stretch"/>
          </DataTemplate>
        </DataGridTemplateColumn.CellEditingTemplate>
      </DataGridTemplateColumn>
    
    </DataGrid.Columns>
  </DataGrid>
</Window>

C# View Model

using AvaloniaControls.Models;
using System.Collections.Generic;
using System.Collections.ObjectModel;

namespace AvaloniaControls.ViewModels
{
    public class MainWindowViewModel : ViewModelBase
    {
        public ObservableCollection<Person> People { get; }

        public MainWindowViewModel()
        {
            var people = new List<Person> 
            {
                new Person("Neil", "Armstrong",  55),
                new Person("Buzz", "Lightyear", 38),
                new Person("James", "Kirk", 44)
            };
            People = new ObservableCollection<Person>(people);
        }
    }
}

C# Item Class

public class Person
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public int AgeInYears { get; set; } 


    public Person(string firstName , string lastName, int ageInYears)
    {
        FirstName = firstName;
        LastName = lastName;
        AgeInYears = ageInYears;
    }
}

数据表格列

数据表格可以包含多个数据表格列，Avalonia UI 提供了两种内置列类型，用于显示不同的数据类型，还有一个可以自定义列外观的模板类型。

列类型 描述
DataGridTextColumn 用于显示和编辑列数据的文本框。您可以在此列类型中控制字体属性，比如字体家族和大小。
DataGridCheckBoxColumn 用于显示和编辑列数据的复选框，当数据类型为布尔值时。此列类型还支持当值为可空时的三态复选框。
DataGridTemplateColumn 可用于自定义列数据的展示和编辑。

常用属性​

大部分属性在这三种列类型中都是通用的：

属性 描述
Header 列的标题内容。
HeaderTemplate 使用数据模板作为列的标题。
IsReadOnly 列是否为只读。如果数据表格本身是只读的，那么无论此属性的值如何，列都是只读的。
IsThreeState 仅适用于复选框列。当可空布尔值为null时，启用第三个（填充）状态。
Width 列宽度可以是绝对大小或相对大小（见下文）。

列宽度​

如果您没有为列设置宽度，它将被调整以适应内容，并在必要时为网格添加水平滚动条。

您可以绝对设置列的宽度，例如：

<DataGridTextColumn Width="200" />

这将导致不适合的列内容被隐藏。

或者，您可以指定相对自动大小。这使用 * 表示可用宽度的等分，然后使用类似 2* 的倍数。未指定宽度的列将根据其内容调整大小。

例如，要将数据表格划分为3个等宽的列：

<DataGridTextColumn Width="*" />
<DataGridTextColumn Width="*" />
<DataGridTextColumn Width="*" />

示例

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

<Window ... >
   <Design.DataContext>
       <vm:MainWindowViewModel/>
  </Design.DataContext>
  <DataGrid Margin="20" ItemsSource="{Binding People}"
          IsReadOnly="True"
          GridLinesVisibility="All"
          BorderThickness="1" BorderBrush="Gray">
    <DataGrid.Columns>
      <DataGridTextColumn Header="名字" Width="*" 
              Binding="{Binding FirstName}"/>
      <DataGridTextColumn Header="姓氏" Width="*" 
              Binding="{Binding LastName}" />
    </DataGrid.Columns>
  </DataGrid>
</Window>

C# ViewModel

using AvaloniaControls.Models;
using System.Collections.Generic;
using System.Collections.ObjectModel;

namespace AvaloniaControls.ViewModels
{
    public class MainWindowViewModel : ViewModelBase
    {
        public ObservableCollection<Person> People { get; }

        public MainWindowViewModel()
        {
            var people = new List<Person> 
            {
                new Person("Neil", "Armstrong"),
                new Person("Buzz", "Lightyear"),
                new Person("James", "Kirk")
            };
            People = new ObservableCollection<Person>(people);
        }
    }
}

数据源 Person 类

public class Person
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    
    public Person(string firstName , string lastName)
    {
        FirstName = firstName;
        LastName = lastName;
    }
}

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

DatePicker 日期选择器

日期选择器包含三个"轮盘"控制器，允许用户选择日期值。点击控件时会显示这些旋转器。

常用属性​

你可能最常使用这些属性：

属性 描述
DayVisible 设置是否显示日列。
MonthVisible 设置是否显示月列。
YearVisible 设置是否显示年列。
DayFormat 日期中日部分的格式字符串。
MonthFormat 日期中月部分的格式字符串。
YearFormat 日期中年部分的格式字符串。
SelectedDate 选择的日期（无选择时为 null）。

示例​

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

<StackPanel Margin="20">
  <DatePicker DayFormat="ddd dd"/>
</StackPanel>

初始化日期 ​

这个控件的日期属性不能在 XAML 中使用属性设置，因为没有可用的转换器来将字符串转换为日期对象，如 DateTime 和 DateTimeOffset。

你需要编写如下 code-behind 代码：

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，以证实图形间没有重叠。

<DockPanel Width="300" Height="300">
    <Rectangle Fill="Red" Height="100" DockPanel.Dock="Top"/>
    <Rectangle Fill="Blue" Width="100" DockPanel.Dock="Left" />
    <Rectangle Fill="Green" Height="100" DockPanel.Dock="Bottom"/>
    <Rectangle Fill="Orange" Width="100" DockPanel.Dock="Right" Opacity="0.5"/>
    <Rectangle Fill="Gray" />
</DockPanel>

Expander 折叠面板

折叠面板控件具有一个标题区域（始终可见）和一个可折叠的内容部分，该内容部分可以包含单个子控件。

常用属性​

你可能最常使用这些属性：

属性 描述
Expander.Header 定义标题区域中显示的内容。

示例​

<Expander VerticalAlignment="Top">
    <Expander.Header>
        隐藏搜索
    </Expander.Header>
    <Grid RowDefinitions="*,*" ColumnDefinitions="150,*">
        <TextBlock Grid.Row="0" Grid.Column="0"
                   VerticalAlignment="Center">搜索</TextBlock>
        <TextBox Grid.Row="0" Grid.Column="1"
                 Watermark="搜索文本" Width="200" />
        <TextBlock Grid.Row="1" Grid.Column="0"
                   VerticalAlignment="Center">区分大小写？</TextBlock>
        <CheckBox Grid.Row="1" Grid.Column="1" />
    </Grid>
</Expander>

Flyout 弹出层

弹出层是一种可关闭的容器，可以附加到某些类型的"宿主"控件上；尽管弹出层本身并不是控件。当宿主控件获得焦点时，弹出层会显示出来，并且可以通过多种不同的方式再次隐藏。

弹出层可以包含简单或更丰富的、组合的用户界面内容。

在 Avalonia UI 应用中，弹出层可以声明为资源，并在两个或更多宿主控件之间共享。

示例​

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

<Button Content="带弹出层的按钮">
  <Button.Flyout>
    <Flyout>这是按钮的弹出层</Flyout>
  </Button.Flyout>
</Button>

注意

只有按钮和分隔按钮控件支持 Flyout 属性。你可以使用 AttachedFlyout 属性将弹出层附加到其他 Avalonia UI 内置控件上。

对于没有 Flyout 属性的控件，使用 AttachedFlyout 属性如下：

<Border Background="Red" PointerPressed="Border_PointerPressed">
    <FlyoutBase.AttachedFlyout>
        <Flyout>
            <TextBlock Text="红色矩形弹出层" />
        </Flyout>
    </FlyoutBase.AttachedFlyout>
</Border>

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

public void Border_PointerPressed(object sender, PointerPressedEventArgs args)
{
    var ctl = sender as Control;
    if (ctl != null)
    {
        FlyoutBase.ShowAttachedFlyout(ctl);
    }
}

常用属性​

你可能最常使用这些属性：

属性 描述
Placement 弹出层相对于其附加控件的打开位置。
ShowMode 描述弹出层的显示和隐藏方式。请看下面的选项。

ShowMode​

此设置描述弹出层的显示和隐藏方式：

模式 描述
Standard 当附加的控件获得焦点时显示弹出层。当附加的控件失去焦点时隐藏弹出层（用户切换焦点或点击其他地方）。
Transient 在弹出层外做出操作时（如点击）消失。
TransientWithDismiss OnPointerMoveAway 当光标移开一定距离后，弹出层自动消失。

所有弹出层的常用方法​

属性 描述
ShowAt(Control) 在指定的目标控件上显示弹出层。
ShowAt(Control, bool) 在指定的目标控件上显示弹出层，但位置基于当前指针位置。
Hide 隐藏弹出层。

共享弹出层​

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

<Window.Resources>
    <Flyout x:Key="MySharedFlyout">
        <!-- 弹出层内容在此 -->
    </Flyout>
</Window.Resources>

<Button Content="点击我！" Flyout="{StaticResource MySharedFlyout}" />

<Button Content="现在点击我！" Flyout="{StaticResource MySharedFlyout}" />

弹出层的样式定制​

虽然弹出层本身不是控件，但可以通过Flyout用来显示其内容的展示器来自定义其外观。对于普通的Flyout，这个展示器是FlyoutPresenter；对于MenuFlyout，则是MenuFlyoutPresenter。因为弹出层的展示器不是公开的，特定的弹出层相关的特殊样式类可以通过FlyoutBase上的FlyoutPresenterClasses属性传递:

<Style Selector="FlyoutPresenter.mySpecialClass">
    <Setter Property="Background" Value="Red" />
</Style>

<Flyout FlyoutPresenterClasses="mySpecialClass">
    <!-- 弹出层内容在此 -->
</Flyout>

Grid 网格布局

Grid 控件非常适用于按列和行排列子控件。您可以为 Grid 定义绝对大小、比例大小和自动大小的行和列几何形状。

每个位于 Grid 中的子控件都可以使用列和行坐标定位在 Grid 单元格中。这些坐标是从零开始的，并且默认值为零。

如果在同一单元格中定位多个子控件，它们将按照在 XAML 中出现的顺序在该单元格中绘制。这是实现层叠堆叠的另一种策略，除了使用 Panel。

注意

如果您忽略了 Grid 的子控件的列和行坐标，它们都将被绘制在左上角（列=0，行=0）。

也可以使子控件跨越一个或多个单元格的行或列，或两者都跨越。

常用属性​

您可能最常使用这些属性：

属性 描述
ColumnDefinitions Grid 中列宽的尺寸定义。
RowDefinitions Grid 中行高的尺寸定义。
ShowGridLines 显示单元格之间的网格线（作为虚线显示）。
Grid.Column 将控件布局到指定的从零开始的列中。
Grid.Row 将控件布局到指定的从零开始的行中。
Grid.ColumnSpan 将控件跨越一个或多个列。
Grid.RowSpan 将控件跨越一个或多个行。
Grid.IsSharedSizeScope 定义控件为 SharedSizeGroup 的包含范围。

尺寸定义​

您可以如下定义行和列的大小：

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

尺寸定义可以通过简短代码列表或使用 XAML 元素完全展开来编写。

完整定义支持额外的约束，如 SharedSizeGroup 和指定最小和最大长度的绝对大小。

绝对大小定义​

绝对大小定义在列网格式中以整数形式编写。例如：

ColumnDefinitions="200, 200, 300"

通过完全展开的 XAML 定义，这与以下相同：

<Grid>
   <Grid.ColumnDefinitions>
       <ColumnDefinition Width="200"></ColumnDefinition>
       <ColumnDefinition Width="200"></ColumnDefinition>
       <ColumnDefinition Width="300"></ColumnDefinition>
   </Grid.ColumnDefinitions>
</Grid>

比例大小定义​

比例大小定义使用星号表示可用 Grid 空间的比例。例如，要创建两个宽度相同的列，然后是一个宽度是前两个的两倍（单个宽度的两倍）的列：

ColumnDefinitions="*, *, 2*"

通过完全展开的 XAML 定义，这与以下相同：

<Grid>
   <Grid.ColumnDefinitions>
       <ColumnDefinition Width="*"></ColumnDefinition>
       <ColumnDefinition Width="*"></ColumnDefinition>
       <ColumnDefinition Width="2*"></ColumnDefinition>
   </Grid.ColumnDefinitions>
</Grid>

提示

尺寸定义不支持百分比。一个解决方法是创建一个定义，其中所有比例值加起来等于 100，例如 <Grid ColumnDefinitions="25*, 25*, 50*"> 用于 3 个列，每个列分别占剩余可用宽度的 25%、25% 和 50%。

自动大小定义​

要自动调整行或列的大小以适应其中最大的子控件，请使用 'Auto' 代码。例如：

RowDefinitions="Auto, Auto, Auto"

通过完全展开的 XAML 定义下相同：，这与以

<Grid>
   <Grid.RowDefinitions>
       <RowDefinition Height="Auto"></RowDefinition>
       <RowDefinition Height="Auto"></RowDefinition>
       <RowDefinition Height="Auto"></RowDefinition>
   </Grid.RowDefinitions>
</Grid>

注意

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

混合尺寸定义​

您可以在同一尺寸定义序列中混合使用上述任何一种。例如：

ColumnDefinitions="200, *, 2*"

通过完全展开的 XAML 定义，这与以下相同：

<Grid>
   <Grid.ColumnDefinitions>
       <ColumnDefinition Width="200"></ColumnDefinition>
       <ColumnDefinition Width="*"></ColumnDefinition>
       <ColumnDefinition Width="2*"></ColumnDefinition>
   </Grid.ColumnDefinitions>
</Grid>

绘图规则​

在计算尺寸时，任何比例列都将适应在计算绝对值和自动值后剩余的空间。

自动尺寸的计算是使用子控件的边距布局区域外缘进行的。

信息

要回顾控制布局区域的概念，请参阅此处。

子控件按照它们在 XAML 中出现的顺序在其分配的网格单元格中绘制。这条规则既适用于当两个子控件被分配到同一单元格时的情况，也适用于子控件大于其分配单元格时的重叠情况。

当子控件有自己的尺寸，并且小于其分配的单元格时，它将根据其水平和垂直对齐属性（默认都是居中）在单元格中对齐绘制。

示例​

这个示例展示了：

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

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

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

在这里，100 的绝对宽度被减去后（对于列 0），列 1 将获得 1.5 个部分，列 2 将获得剩余宽度的 4 个部分。

按钮被绘制以填充从单元格（列 1，行 1）加一个列（向右）和一行向下的跨度。结果看起来是这样的：

SharedSizeGroup

SharedSizeGroup 允许在多个 Grid 控件之间共享自动调整大小的行和列定义的大小信息。

示例​

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

  • XML

  • C#

    <StackPanel Grid.IsSharedSizeScope="True"> <StackPanel.Styles> <Style Selector="ListBoxItem"> <Setter Property="Padding" Value="0" /> </Style> </StackPanel.Styles> 
    <ListBox ItemsSource="{Binding People}">
  <ListBox.ItemTemplate>
    <DataTemplate>
      <Grid Name="myGrid" RowDefinitions="auto, auto" ShowGridLines="True">
        <Grid.ColumnDefinitions>
          <ColumnDefinition SharedSizeGroup="A" />
          <ColumnDefinition SharedSizeGroup="B" />
          <ColumnDefinition Width="*" />
          <ColumnDefinition SharedSizeGroup="C" />
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Column="0" Margin="6,0" Text="{Binding FirstName}" />
        <TextBlock Grid.Column="1" Margin="6,0" Text="{Binding LastName}" />
        <TextBlock Grid.Column="2" Margin="6,0" Text="{Binding Age}" />
        <TextBlock Grid.Column="3" Margin="6,0" Text="{Binding Occupation}" />
      </Grid>
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>
  
<!-- Controls may appear in-between Grids with SharedSizeGroups -->
<Separator />

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition SharedSizeGroup="A" />
    <ColumnDefinition SharedSizeGroup="B" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition SharedSizeGroup="C" />
  </Grid.ColumnDefinitions>

  <Button Content="This is the First Name" HorizontalAlignment="Stretch" Grid.Column="0" />
  <Button Content="Last" HorizontalAlignment="Stretch" Grid.Column="1" />
  <Button Content="Age" HorizontalAlignment="Stretch" Grid.Column="2" />
  <Button Content="Occupation" HorizontalAlignment="Stretch" Grid.Column="3" />
</Grid>
    </StackPanel>

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

GridSplitter 网格分割器

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

常用属性​

你可能最常使用这些属性：

属性 描述
Background 分割条的背景颜色。
Grid.Column 附加属性，用来指定分割器的列位置。
Grid.Row 附加属性，用来指定分割器的行位置。
ResizeDirection 分割器的移动方向。（见下面的注释）

注意

为了提供任何有意义的移动，分割器的移动方向必须与其位置定义相同。即：对于列分割器指定 ResizeDirection="Columns"，对于行分割器指定 ResizeDirection="Rows"。

示例​

这是一个列分割器：

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

这是一个行分割器：

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

Image 图像

图像可以从指定的图像源显示栅格图像。源可以是：

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

图像可以用来组成其他控件的内容。例如，您可以使用图像控件创建一个图形按钮。

显示的图像可以被调整大小和缩放。默认的缩放设置（两个方向上均匀拉伸）将导致图像适应给定的大小（宽度和/或高度）。

信息

图像的缩放设置与视图框的相同，参见ViewBox。

示例​

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

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

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

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

ItemsControl 元素集合控件

元素集合控件是用于显示重复数据的控件（例如列表框）的基础。它本身不包含内置的格式化或交互功能；但你可以结合数据绑定、样式和数据模板使用，创建一个完全自定义的重复数据控件。

信息

要查看 Avalonia UI 内置的所有重复数据控件的完整列表，请查看这里。

常用属性​

你可能最常使用这些属性：

属性 描述
ItemsSource 用作控件数据源的绑定集合。
ItemsControl.ItemTemplate 附加属性元素，包含单个元素的数据模板。

示例​

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

<StackPanel Margin="20">
  <TextBlock Margin="0 5">餐具列表：</TextBlock>
  <ItemsControl ItemsSource="{Binding CrockeryList}" >
    <ItemsControl.ItemTemplate>
    <DataTemplate>
      <Border Margin="0,10,0,0"
          CornerRadius="5"
          BorderBrush="Gray" BorderThickness="1"
          Padding="5">
        <StackPanel Orientation="Horizontal">
          <TextBlock Text="{Binding Title}"/>
          <TextBlock Margin="5 0" FontWeight="Bold" 
                      Text="{Binding Number}"/>
        </StackPanel>
      </Border>
    </DataTemplate>
    </ItemsControl.ItemTemplate>
    </ItemsControl>
</StackPanel>

C# ViewModel

using AvaloniaControls.Models;
using System.Collections.Generic;
using System.Collections.ObjectModel;

namespace AvaloniaControls.ViewModels
{
    public class MainWindowViewModel : ViewModelBase
    {
        public ObservableCollection<Crockery> CrockeryList { get; set; }
        
        public MainWindowViewModel()
        {
            CrockeryList = new ObservableCollection<Crockery>(new List<Crockery>
            {
                new Crockery("晚餐盘", 12),
                new Crockery("小碟", 12),
                new Crockery("早餐碗", 6),
                new Crockery("杯子", 10),
                new Crockery("茶碟", 10),
                new Crockery("马克杯", 6),
                new Crockery("牛奶壶", 1)
            });    
        }
    }
}

C# 数据源的类定义

public class Crockery
{
    public string Title { get; set; }
    public int Number{ get; set; }

    public Crockery(string title, int number)
    {
        Title = title;
        Number = number;
    }
}

视图水平方向可调整大小，但内容在过高时会被隐藏。这个控件没有内置滚动条（与 ListBox 不同）。

ItemsRepeater 元素重复器

元素重复器可以从绑定的数据源显示重复数据。它具有布局模板和数据模板。

信息

元素重复器是 UWP ItemsRepeater 控件的移植版本。更多信息请参见这里。

信息

元素重复器已移至这里。

默认的布局模板是垂直堆叠布局，因此元素会以垂直列表的形式显示。

示例​

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

<StackPanel Margin="20">
  <TextBlock Margin="0 5">餐具列表：</TextBlock>
  <ItemsRepeater ItemsSource="{Binding CrockeryList}">
    <ItemsRepeater.ItemTemplate>
      <DataTemplate>
        <Border Margin="0,10,0,0"
            CornerRadius="5"
            BorderBrush="Blue" BorderThickness="1"
            Padding="5">
          <StackPanel Orientation="Horizontal">
            <TextBlock Text="{Binding Title}"/>
            <TextBlock Margin="5 0" FontWeight="Bold" 
                        Text="{Binding Number}"/>
          </StackPanel>
        </Border>
      </DataTemplate>
    </ItemsRepeater.ItemTemplate>
  </ItemsRepeater>
</StackPanel>

C# ViewModel

using AvaloniaControls.Models;
using System.Collections.Generic;
using System.Collections.ObjectModel;

namespace AvaloniaControls.ViewModels
{
    public class MainWindowViewModel : ViewModelBase
    {
        public ObservableCollection<Crockery> CrockeryList { get; set; }
        
        public MainWindowViewModel()
        {
            CrockeryList = new ObservableCollection<Crockery>(new List<Crockery>
            {
                new Crockery("晚餐盘", 12),
                new Crockery("小盘", 12),
                new Crockery("早餐碗", 6),
                new Crockery("杯子", 10),
                new Crockery("茶托", 10),
                new Crockery("马克杯", 6),
                new Crockery("牛奶壶", 1)
            });    
        }
    }
}

C# 数据源的类定义

public class Crockery
{
    public string Title { get; set; }
    public int Number { get; set; }

    public Crockery(string title, int number)
    {
        Title = title;
        Number = number;
    }
}

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

<StackPanel Margin="20">
  <TextBlock Margin="0 5">餐具列表：</TextBlock>
  <ScrollViewer HorizontalScrollBarVisibility="Auto">
    <ItemsRepeater ItemsSource="{Binding CrockeryList}" Margin="0 20">
      <ItemsRepeater.Layout>
        <StackLayout Spacing="40"
            Orientation="Horizontal" />
      </ItemsRepeater.Layout>
      <ItemsRepeater.ItemTemplate>
        <DataTemplate>
          <Border Margin="0,10,0,0"
              CornerRadius="5"
              BorderBrush="Blue" BorderThickness="1"
              Padding="5">
            <StackPanel Orientation="Horizontal">
              <TextBlock Text="{Binding Title}"/>
              <TextBlock Margin="5 0" FontWeight="Bold" 
                          Text="{Binding Number}"/>
            </StackPanel>
          </Border>
        </DataTemplate>
      </ItemsRepeater.ItemTemplate>
    </ItemsRepeater>
  </ScrollViewer>
</StackPanel>

元素水平显示，如果没有添加围绕元素重复器的滚动查看器元素，那么过于靠右的元素将会被隐藏。

相关推荐
高山我梦口香糖22 分钟前
[react]searchParams转普通对象
开发语言·前端·javascript
信号处理学渣43 分钟前
matlab画图，选择性显示legend标签
开发语言·matlab
红龙创客44 分钟前
某狐畅游24校招-C++开发岗笔试（单选题）
开发语言·c++
jasmine s1 小时前
Pandas
开发语言·python
biomooc1 小时前
R 语言 | 绘图的文字格式(绘制上标、下标、斜体、文字标注等)
开发语言·r语言
骇客野人1 小时前
【JAVA】JAVA接口公共返回体ResponseData封装
java·开发语言
black^sugar1 小时前
纯前端实现更新检测
开发语言·前端·javascript
404NooFound1 小时前
Python轻量级NoSQL数据库TinyDB
开发语言·python·nosql
用余生去守护2 小时前
python报错系列(16)--pyinstaller ????????
开发语言·python
数据小爬虫@2 小时前
利用Python爬虫快速获取商品历史价格信息
开发语言·爬虫·python
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02YOLOv8训练好模型后，追加轮数继续训练、或者提前终止训练，缩减训练轮数03玄机平台应急响应—webshell查杀04机器人编程怎么入门？05HCIA-datacom数通题库和录播视频资料06Docker 夺命连环 15 问07SQL 主从数据库实时备份08校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10VSCode插件 —— Cody AI （免费AI助手！）