跨平台WPF框架Avalonia教程 十六

SelectableTextBlock 可选文本块

SelectableTextBlock 块是一个用于显示文本的标签，允许选择和复制文本。它可以显示多行，并且可以完全控制所使用的字体。

有用的属性​

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

属性	描述
SelectionStart	当前选择的起始字符索引。
SelectionEnd	当前选择的结束字符索引。
SelectionBrush	高亮显示选中文本的画刷。
SelectionForeground	用于选中文本前景的画刷。
FontSize	字体的大小。
FontWeight	字体的粗细。默认是正常，选项包括 Bold。
FontStyle	应用于字母的样式。默认是正常，选项包括 Italic。
TextDecorations	应用于字母的线条装饰。默认是无，选项包括 Underline、Strikethrough、Baseline 和 Overline。要同时应用多个，请在选项之间用空格分隔。
xml:space	TextBlock 本身会尊重其内容在 XAML 中设置的换行和空白，但如果没有 xml:space="preserve"，它将被解析器过滤掉。

示例​

此示例显示了用作标题、单行和多行显示的文本块。

  <StackPanel Margin="20">
  <SelectableTextBlock Margin="0 5" FontSize="18" FontWeight="Bold" >Heading</SelectableTextBlock>
  <SelectableTextBlock Margin="0 5" FontStyle="Italic" xml:space="preserve" SelectionBrush="Red">This is a single line.</SelectableTextBlock>
  <SelectableTextBlock Margin="0 5" xml:space="preserve" SelectionStart="3" SelectionEnd="13">This is a multi-line display
    that has returns in it.
    The text block respects the line breaks
    as set out in XAML.</SelectableTextBlock>
</StackPanel>

 

样式在预览窗格中有效：

 

Slider 滑块

滑块控件通过沿轨道长度移动滑块按钮的相对位置来展示其数值。位置是相对于最大值和最小值而定的。

在滑块按钮上进行拖动交互可以改变值，使其在最大值和最小值之间变动。键盘和点击交互也可以微调数值。

常用属性​

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

属性	描述
Maximum	设置最大值。
Minimum	设置最小值。

示例​

在此示例中，滑块的值将显示在下方的文本块中，通过绑定到一个控件实现。

信息

要了解如何将一个控件绑定到另一个控件，请参阅这里的指南。

这里的最大值和最小值是默认的（分别为0和100）。

<StackPanel Margin="20">
  <TextBlock Text="{Binding #slider.Value}" 
              HorizontalAlignment="Center"/>
  <Slider x:Name="slider" />
</StackPanel>

 

在Windows上，滑块看起来是这样的：

 

 

 

SplitView 分屏视图

分屏视图提供一个包含两个部分的容器：主内容区和侧边面板。主内容区始终可见。面板可以展开和折叠。折叠的面板可以完全隐藏，或留出稍微打开的空间——例如，有足够的空间放置一些图标按钮。

常用属性​

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

属性	描述
PanePlacement	设置面板的位置（左或右）。
IsPaneOpen	布尔值，默认为真。面板是否处于打开状态？
DisplayMode	控制面板在打开和关闭状态下的显示方式。请看下文。
OpenPaneLength	定义面板打开时的宽度。
CompactPaneLength	定义面板关闭且显示模式为紧凑时的宽度。

显示模式属性控制面板在其打开和关闭状态下的绘制方式。有四个选项：

• 覆盖

  面板完全隐藏，直到被打开。打开时，面板会覆盖内容区域。

• 内联

  面板始终可见，宽度固定，不会覆盖内容区域。面板和内容区域分割可用的屏幕空间，但如果容器宽度变化，调整的是内容区域的大小。

• 紧凑覆盖

  在此模式下，面板的窄部分始终可见，宽度足以显示图标。默认的关闭面板宽度为48px，可以通过CompactPaneLength属性值修改。如果面板被打开，它将覆盖内容区域。

• 紧凑内联

  在此模式下，面板的窄部分始终可见，宽度足以显示图标。默认的关闭面板宽度为48px，可以通过CompactPaneLength属性值修改。如果面板被打开，它将减小内容区域的大小。

示例​

<SplitView IsPaneOpen="True"
           DisplayMode="Inline"
           OpenPaneLength="300">
    <SplitView.Pane>
        <TextBlock Text="Pane"
                   FontSize="24"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"/>
    </SplitView.Pane>

    <Grid>
        <TextBlock Text="Content"
                   FontSize="24"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"/>
    </Grid>
</SplitView>

 

控件在Windows上运行时的样子如下：

紧凑显示模式​

你可以使用MVVM模式与分屏视图控件和某个紧凑显示模式设置一起，实现一个“工具面板”样式的用户界面。当面板关闭时，有足够的空间显示一个打开面板的图标按钮。

 

 

StackPanel 堆栈面板

堆栈面板通过水平或垂直堆叠其子控件来排列它们。堆栈面板通常用于在页面上排列UI的一个小部分。

在堆栈面板内部，如果子控件在垂直于堆栈的方向上没有设置大小属性，那么子控件将扩展以填充可用空间。例如，在水平方向上，如果未设置，子控件的高度将会扩展。

在堆栈的方向上，堆栈面板将总是扩展以适应所有子控件。

常用属性​

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

属性	描述
Orientation	设置堆栈的方向。可选择水平或垂直（默认）。
Spacing	在子控件之间创建均匀间距。

示例​

以下XAML展示了如何创建一个垂直的堆栈面板。

<StackPanel Width="200">
    <Rectangle Fill="Red" Height="50"/>
    <Rectangle Fill="Blue" Height="50"/>
    <Rectangle Fill="Green" Height="100"/>
    <Rectangle Fill="Orange" Height="50"/>
</StackPanel>

 

结果显示子控件被拉伸以适应宽度，而堆栈面板的总高度等于子控件高度的总和。

 

TabControl 选项卡控件

TabControl 允许您将视图细分为选项卡项。

每个选项卡项都有一个标题和一个内容区。标题按它们在 XAML 中出现的顺序呈现在一个条带中。当用户点击选项卡标题时，其内容变得可见，并放置在选项卡控件的内容区中，位于选项卡条带下方。

您可以在标题和内容区中组合 UI，以满足 Avalonia UI 应用程序的 UI 要求。

信息

如果您只需要此控件的选项卡标题部分的功能，请考虑使用选项卡条带。请参见这里。

示例​

这是一个简单的选项卡示例。选项卡内容只是一些文本：

<TabControl Margin="5">
  <TabItem Header="Tab 1">
    <TextBlock Margin="5">This is tab 1 content</TextBlock>
  </TabItem>
  <TabItem Header="Tab 2">
    <TextBlock Margin="5">This is tab 2 content</TextBlock>
  </TabItem>
  <TabItem Header="Tab 3">
    <TextBlock Margin="5">This is tab 3 content</TextBlock>
  </TabItem>
</TabControl>

 

选项卡控件甚至可以在预览窗格中工作！

 

 

 

 

TabStrip 选项卡头条带

显示一条选项卡头的条带。您可以将此控件用作水平菜单。

选项卡条由 <TabItem> 元素组成。这些元素按它们在 XAML 中出现的顺序显示。

有用的属性​

您可能最常使用此属性：

属性	描述
TabItem.Header	选项卡的文本。

示例​

<TabStrip Margin="5">
  <TabItem Header="Tab 1"/>
  <TabItem Header="Tab 2"/>
  <TabItem Header="Tab 3"/>
</TabStrip>

 

在 Windows 上运行时，它看起来像这样：

 

 

TextBlock 文本块

TextBlock 是一个用于显示文本的只读标签。它可以显示多行文本，并且可以完全控制所使用的字体。

常用属性​

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

属性	描述
Text	要显示的文本。
FontSize	字体的大小。
FontWeight	字体的粗细。默认是正常，选项包括 Bold。
FontStyle	应用于字母的样式。默认是正常，选项包括 Italic。
TextDecorations	应用于字母的线条装饰。默认是无，选项包括 Underline、Strikethrough、Baseline 和 Overline。要同时应用多个，请在选项之间用空格分隔。
xml:space	xml:space="preserve" 指示 XML 解析器保留分配给 TextBlock 的内容的换行符和空白，否则默认情况下会被删除。

示例​

此示例演示使用多个 TextBlock 控件来显示标题、包含额外空格的单行和多行显示。

<StackPanel Margin="20">
    <TextBlock Margin="0 5" FontSize="18" FontWeight="Bold">Heading</TextBlock>
    <TextBlock Margin="0 5" FontStyle="Italic" xml:space="preserve">This is  a single line.</TextBlock>
    <TextBlock Margin="0 5" xml:space="preserve">This is a multi-line display
that has returns in it.
The text block respects the line breaks
as set out in XAML.</TextBlock>
</StackPanel>

 

样式在预览窗格中工作：

内联​

文本内联允许在单个 TextBlock 内对文本和控件进行多样化格式化。虽然 TextBlock.Text 通常用于显示单一格式的文本，但其子 Content 允许包含内联集合。

Run​

Run 内联表示一段连续的统一格式文本。

<Style Selector="Run.activity">
    <Setter Property="Foreground" Value="#C469EE" />
    <Setter Property="FontStyle" Value="Italic" />
    <Setter Property="TextDecorations" Value="Underline" />
</Style>

<TextBlock>
    <Run Text="Your name is" />
    <Run FontSize="24" FontWeight="Bold" Foreground="Orange" Text="{Binding Name}" />
    <Run Text="and your favorite activity is" />
    <Run Classes="activity" Text="{Binding Activity}" />
</TextBlock>

 

LineBreak​

LineBreak 内联强制换行。

<TextBlock>
        This is the first line and<LineBreak />here comes the second
</TextBlock>

 

Span​

Span 内联允许对内联进行分组，包括非文本内联。虽然 Span 可以应用自己的文本格式，但有一些预定义的格式内联派生自 Span：Bold、Italic 和 Underline。用户还可以从 Span 派生以创建自己的格式，而不是使用样式。

<TextBlock>
    This text is <Span Foreground="Green"> green with <Bold>bold sections,</Bold>
    <Italic>italic <Span Foreground="Red">red</Span> sections,</Italic>
    some
    <Run FontSize="24"> enlarged font runs,</Run>
    and</Span>
    back to the original formatting
</TextBlock>

 

InlineUIContainer​

InlineUIContainer 允许将任何 Control 作为内联包含。

<TextBlock ClipToBounds="False" FontSize="32" TextWrapping="Wrap">
        🚀 This <Span BaselineAlignment="TextTop">example</Span> shows the <Bold>power</Bold> of
        <InlineUIContainer BaselineAlignment="Baseline">
                <Image Width="32" Height="32" VerticalAlignment="Top" Source="/Assets/avalonia-logo.ico" />
        </InlineUIContainer>
        in creating rich text displays with
        <InlineUIContainer>
                <Button Padding="0,8,0,0">
                        <TextBlock ClipToBounds="False" FontSize="24" Text="👍👍🏼👍🏽👍🏾👍🏿" />
                </Button>
        </InlineUIContainer>
        inline controls 📈
</TextBlock>

 

 

 

TextBox 文本框

文本框提供了一个用于键盘输入的区域。它可以用于单行或多行输入。

常用属性​

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

属性	描述
Text	输入中的当前文本。
PasswordChar	隐藏任何输入的字符，并用给定的字符代替。
Watermark	当输入为空时，显示为淡化的提示。
AcceptsReturn	允许用户输入换行符，使输入变为多行。如果内容超过可用高度，将出现垂直滚动条。
TextWrapping	定义如何处理水平行溢出。选项有：'NoWrap'、'Wrap' 和 'WrapWithOverflow'。

示例​

此示例包含一个基本的单行文本框、一个密码框和一个文本换行的多行文本框：

<StackPanel Margin="20">
  <TextBlock Margin="0 5" >Name:</TextBlock>
  <TextBox  Watermark="Enter your name"/>
  <TextBlock Margin="0 5" >Password:</TextBlock>
  <TextBox PasswordChar="*" Watermark="Enter your password"/>
  <TextBlock Margin="0 15 0 5">Notes:</TextBlock>
  <TextBox Height="100" AcceptsReturn="True" TextWrapping="Wrap"/>
</StackPanel>

 

 

 

TimePicker 时间选择器

时间选择器有两个或三个“微调”控件，允许用户选择一个时间值。时间选择器可以使用24小时或12小时格式。当点击控件时，选择器控件会显示。

常用属性​

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

属性	描述
ClockIdentifier	选择12小时和24小时格式。12小时格式会显示一个用于AM/PM的第三个微调控件。
MinuteIncrement	定义分钟的可选增量。默认值为1（可以指定任意分钟数）。
SelectedTime	（可空的TimeSpan）所选时间。

示例​

此示例显示如何创建一个24小时制的时间选择器，时间间隔为20分钟：

<StackPanel Margin="20" Spacing="4">
    <Label Content="Please choose your time:"/>
    <TimePicker ClockIdentifier="24HourClock"
                MinuteIncrement="20"/>
</StackPanel>

 

 

初始化时间​

你可以在XAML中将时间值设置为属性。使用 Hh:Mm 格式的字符串，其中 Hh 是小时，可以在0到23之间， Mm 是分钟，可以在0到59之间。

<TimePicker SelectedTime="09:15"/>

 

如果需要编写后台代码，可以这样写：

TimePicker timePicker = new TimePicker
{
    SelectedTime = new TimeSpan(9, 15, 0) // 秒数会被忽略。
};

 

你可以通过将所选时间重置为null来清除显示。

ToolTip 工具提示

工具提示是一个弹出窗口，当用户将鼠标悬停在附加到的“宿主”控件上时显示其内容。

常用属性​

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

属性	描述
ToolTip.Tip	工具提示内容的附加属性。
ToolTip.Placement	定义工具提示相对于宿主或指针的位置。可选择顶部、底部、左侧、右侧、锚点和重力、指针。默认值是指针，它将提示内容放置在指针停止移动的位置。
ToolTip.HorizontalOffset	工具提示相对于位置的水平偏移（默认值为0）。
ToolTip.VerticalOffset	工具提示相对于位置的垂直偏移（默认值为20）。
ToolTip.ShowDelay	指针必须保持静止的时间，工具提示才会出现。以微秒为单位（默认值为400）。

示例​

这是一个简单的基于文本的工具提示，使用默认的放置和延迟属性值；此矩形放置在具有较大尺寸的窗口中：

<Rectangle Fill="Aqua" Height="200" Width="400"
      ToolTip.Tip="This is a rectangle" />

 

 

要为工具提示提供更丰富的呈现，请使用 <ToolTip.Tip> 元素。例如：

<Rectangle Fill="Aqua" Height="200" Width="400"
  ToolTip.Placement="Bottom">
  <ToolTip.Tip>
    <StackPanel>
    <TextBlock FontSize="16">Rectangle</TextBlock>
    <TextBlock>Some explanation here.</TextBlock>
    </StackPanel>
  </ToolTip.Tip>
</Rectangle>

 

 

 

TransitioningContentControl 切换内容控件

切换内容控件可以使用页面过渡来为内部控件的内容更改添加动画。

您可以使用此控件在幻灯片中显示不同图像的集合。

常用属性​

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

属性	描述
Content	要在控件中显示的内容。
TransitioningContentControl.ContentTemplate	用于显示内容的数据模板。
TransitioningContentControl.PageTransition	用于为内容更改添加动画的页面过渡。应用的主题将提供默认的页面过渡。要禁用过渡，请将此属性设置为 null。

示例​

在此示例中，视图模型包含一个不同图像的集合，以在幻灯片中显示它们。以下 XAML 将使用默认的页面过渡来更改图像（在数据模板中），每当绑定的 SelectedImage 属性更改时：

<TransitioningContentControl Content="{Binding SelectedImage}" >
    <TransitioningContentControl.ContentTemplate>
        <DataTemplate DataType="Bitmap">
            <Image Source="{Binding}" />
        </DataTemplate>
    </TransitioningContentControl.ContentTemplate>
</TransitioningContentControl>

 

在此示例中，指定了不同的页面过渡以水平滑动图像：

<TransitioningContentControl Content="{Binding SelectedImage}" >
    <TransitioningContentControl.PageTransition>
        <PageSlide Orientation="Horizontal" Duration="0:00:00.500" />
    </TransitioningContentControl.PageTransition>
    <TransitioningContentControl.ContentTemplate>
        <DataTemplate DataType="Bitmap">
            <Image Source="{Binding}"  />
        </DataTemplate>
    </TransitioningContentControl.ContentTemplate>
</TransitioningContentControl>

 

TrayIcon 托盘图标

概述​

托盘图标允许 Avalonia UI 应用程序在系统托盘中显示图标和本地菜单。它支持 Windows、macOS 和一些 Linux 发行版（已确认在 Ubuntu 上工作）。

您必须在应用程序的 XAML 文件中定义托盘菜单。

常用属性​

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

属性	描述
Icon	在系统托盘中显示的图标。通常从应用程序资源中加载。
ToolTipText	当用户将鼠标悬停在托盘图标上时显示的工具提示文本。
TrayIcon.Menu	附加到托盘图标的本地菜单控件。

信息

您必须使用托盘图标的本地菜单，而不是 Avalonia UI 菜单控件。有关本地菜单的详细信息，请参见此处的参考。

示例​

此示例在 App.xaml 文件中定义了一个简单的托盘图标菜单：

<TrayIcon.Icons>
  <TrayIcons>
    <TrayIcon Icon="/Assets/avalonia-logo.ico" 
              ToolTipText="Avalonia Tray Icon ToolTip">
      <TrayIcon.Menu>
        <NativeMenu>
          <NativeMenuItem Header="Settings">
            <NativeMenu>
              <NativeMenuItem Header="Option 1"   />
              <NativeMenuItem Header="Option 2"   />
              <NativeMenuItemSeparator />
              <NativeMenuItem Header="Option 3"  />
            </NativeMenu>
          </NativeMenuItem>
        </NativeMenu>
      </TrayIcon.Menu>
    </TrayIcon>
  </TrayIcons>
</TrayIcon.Icons>

 

 

 

 

TreeDataGrid 树状数据表格

TreeDataGrid 在单个视图中同时显示分层数据和表格数据。它是树视图和数据网格的组合。

信息

有关树视图控件的完整信息，请参见此处的参考。

信息

有关数据网格控件的完整信息，请参见此处的参考。

该控件有两种操作模式：

• 分层 - 数据以树形结构显示，并带有可选列
• 平面 - 数据以二维表格显示，类似于数据网格控件

分层数据​

这是一个显示分层数据的树数据网格的示例：

 

平面数据​

这是一个显示平面数据的树数据网格的示例：

 

NuGet 包引用​

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

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

dotnet add package Avalonia.Controls.TreeDataGrid

 

或者直接将包引用添加到项目 (.csproj) 文件中：

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

 

注意

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

包含数据网格样式​

您必须引用数据网格主题以包含树数据网格使用的附加样式。您可以通过在应用程序 (App.axaml 文件) 中添加 <StyleInclude> 元素来实现这一点。

例如：

<Application xmlns="https://github.com/avaloniaui"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       x:Class="AvaloniaApplication.App">
  <Application.Styles>
  <FluentTheme/>
  <StyleInclude 
    Source="avares://Avalonia.Controls.TreeDataGrid/Themes/Fluent.axaml"/>
  </Application.Styles>
</Application>

 

有用的属性​

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

属性	描述
Source	用作控件数据源的绑定集合。
CanUserResizeColumns	指示用户是否可以使用指针调整列宽。（默认值为 false。）
CanUserSortColumns	指示用户是否可以通过单击列标题对列进行排序。（默认值为 true。）

Source​

您将使用 Source 属性绑定到代码中定义的视图模型。视图模型包括列如何映射到保存网格项的类的属性的定义。

 

 

扁平树数据表格

示例​

在此示例中，视图模型包含一个可观察集合，该集合填充了数据，然后用于创建一个 FlatTreeDataGridSource 属性以绑定到树数据网格的源。网格的项是 Person 类。

<TreeDataGrid Source="{Binding PersonSource}"/>

 

C# View Model

using Avalonia.Controls.Models.TreeDataGrid;
using Avalonia.Controls;
using AvaloniaControls.Models;
using System.Collections.ObjectModel;
using System.Linq;

namespace AvaloniaControls.ViewModels
{
    public class MainWindowViewModel : ViewModelBase
    {
        private ObservableCollection<Person> _people;

        public FlatTreeDataGridSource<Person> PersonSource { get; }

        public MainWindowViewModel()
        {
            _people = new ObservableCollection<Person>()
            {
                new Person ("Eleanor", "Pope", 32 ),
                new Person ("Jeremy", "Navarro", 74 ),
                new Person ( "Lailah ", "Velazquez", 16 ),
                new Person ( "Jazmine", "Schroeder", 52 ),
            };
                          
            PersonSource = new FlatTreeDataGridSource<Person>(_people)
            {
                Columns =
                {
                    new TextColumn<Person, string>
                        ("First Name", x => x.FirstName),
                    new TextColumn<Person, string>
                        ("Last Name", x => x.LastName),
                    new TextColumn<Person, int>
                        ("Age", x => x.Age),
                },
            };
        }
    }
}

 

C# Item Class

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

    public Person(string firstName, string lastName, int age)
    {
        FirstName = firstName;
        LastName = lastName;
        Age = age;
    }
}

 

数据源还定义了如何将数据模型映射到树数据网格中的行和列。因为此示例显示的是扁平数据，所以数据源在视图模型上使用 FlatTreeDataGridSource<Person> 属性。

使用 TextColumn 类定义了三列。每个列都使用一个 lambda 表达式来返回列值。

 

 

分层树数据表格

示例​

在此示例中，视图模型包含一个可观察集合，该集合填充了数据，然后用于创建一个 HierarchicalTreeDataGridSource 属性，以绑定到树数据网格的源。网格的项目是类 Person。

<TreeDataGrid Source="{Binding PersonSource}"/>

 

C# View Model

using Avalonia.Controls.Models.TreeDataGrid;
using Avalonia.Controls;
using AvaloniaControls.Models;
using System.Collections.ObjectModel;
using System.Linq;

namespace AvaloniaControls.ViewModels
{
    public class MainWindowViewModel : ViewModelBase
    {
        private ObservableCollection<Person> _people;

        public HierarchicalTreeDataGridSource<Person> PersonSource { get; }

        public MainWindowViewModel()
        {
            _people = new ObservableCollection<Person>()
            {
                new Person
                {
                    FirstName = "Eleanor", 
                    LastName = "Pope",
                    Age = 32,
                    Children =
                    {
                        new Person
                        { 
                            FirstName = "Marcel", 
                            LastName = "Gutierrez", 
                            Age = 4 
                        },
                    }
                },
                new Person
                {
                    FirstName = "Jeremy",
                    LastName = "Navarro",
                    Age = 74,
                    Children =
                    {
                        new Person
                        {
                            FirstName = "Jane",
                            LastName = "Navarro",
                            Age = 42 ,
                            Children =
                            {
                                new Person 
                                { 
                                    FirstName = "Lailah ", 
                                    LastName = "Velazquez", 
                                    Age = 16 
                                }
                            }
                        },
                    }
                },
                new Person 
                { 
                    FirstName = "Jazmine", 
                    LastName = "Schroeder", 
                    Age = 52 
                },
            };

            PersonSource = new HierarchicalTreeDataGridSource<Person>(_people)
            {
                Columns =
                {
                    new HierarchicalExpanderColumn<Person>(
                        new TextColumn<Person, string>
                            ("First Name", x => x.FirstName),x => x.Children),
                    new TextColumn<Person, string>
                            ("Last Name", x => x.LastName),
                    new TextColumn<Person, int>("Age", x => x.Age),
                },
            };
        }
    }
}

 

C# Item Class

public class Person
{
    public string? FirstName { get; set; }
    public string? LastName { get; set; }
    public int Age { get; set; }
    public ObservableCollection<Person> Children { get; } = new();
}

 

数据源还定义了如何将数据模型映射到树数据网格中的行和列。因为此示例显示的是分层数据，所以数据源在视图模型上使用 HierarchicalTreeDataGridSource<Person> 属性。

定义了三列：

第一列用 HierarchicalExpanderColumn 包围。此元素包含一个 TextColumn，它采用一个 lambda 来返回列值，另一个返回行的子项。该列将显示一个带有折叠或展开子行（如果有）的按钮。其余列仅用 TextColumn 定义。

 

 

树形数据表格列类型

树形数据网格支持三种不同的列类型：

• 文本列
• 层次结构展开列
• 模板列

文本列​

文本列（类 TextColumn）在您希望列中的单元格具有文本值时非常有用。可以这样创建文本列：

new TextColumn<ItemClass, string>("Column Header", x => x.Property)

 

这里的第一个泛型参数是构成网格行的项目的类。第二个泛型参数是属性的类型。

 

上图是 TextColumn 构造函数的签名。前两个参数是必需的：第一个是列标题，第二个是获取属性值的表达式。

TextColumn 类实现了列接口 IColumn。

层次结构展开列​

层次结构展开列（类：HierarchicalExpanderColumn）只能与 层次结构 数据操作模式一起使用，并且必须与数据源类 HierarchicalTreeDataGridSource 一起使用。此列类型必须包含一个内部列（接口 IColumn）来定义其标题和值属性。层次结构展开列在层次树数据网格中显示展开和收缩的按钮。

这种列类型可以这样创建：

new HierarchicalExpanderColumn<ItemClass>(
    new TextColumn<ItemClass, string>("Column Header", x => x.Property), 
    x => x.Children)

 

泛型参数是构成网格行的项目的类。这与内部列的项目类相同。

 

上图是 HierarchicalExpanderColumn 构造函数的签名。构造函数中的第一个参数是内部列，第二个参数是（可为空的）子元素选择器。

模板列​

模板列（类 TemplateColumn）是一种完全可定制的方式来创建列。它本质上为列形成一个数据模板。

您可以这样创建模板列：

new TemplateColumn<ItemClass>("Column Header",
       new FuncDataTemplate<T>((a,e) => new SomeControl()))

 

 

上图是 TemplateColumn 构造函数的签名。它有两个必需的参数：第一个是列标题，第二个是返回 IDataTemplate 的函数。

 

 

TreeView 树视图

树视图控件可以呈现层次数据并允许项目选择。项目是模板化的，因此您可以自定义它们的显示方式。

有两个数据源：控件的主要项目源，这提供了层次数据的根。然后是项目模板中的项目源，它允许控件列出层次数据的下一级。

示例​

此示例使用 MVVM 模式视图模型来保存一些基于 C# 节点类的层次数据。在此示例中，视图模型的 Nodes 集合中有一个根节点：

<TreeView ItemsSource="{Binding Nodes}">
    <TreeView.ItemTemplate>
        <TreeDataTemplate ItemsSource="{Binding SubNodes}">
            <TextBlock Text="{Binding Title}"/>
        </TreeDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

 

C# View Model

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

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

                public MainWindowViewModel()
                {
                        Nodes = new ObservableCollection<Node>
                        {                
                                new Node("Animals", new ObservableCollection<Node>
                                {
                                        new Node("Mammals", new ObservableCollection<Node>
                                        {
                                                new Node("Lion"), new Node("Cat"), new Node("Zebra")
                                        })
                                })
                        };
                }
        }
}

 

C# Node Class

using System.Collections.ObjectModel;

namespace AvaloniaControls.Models
{
        public class Node
        {
                public ObservableCollection<Node>? SubNodes { get; }
                public string Title { get; }
    
                public Node(string title)
                {
                        Title = title;
                }

                public Node(string title, ObservableCollection<Node> subNodes)
                {
                        Title = title;
                        SubNodes = subNodes;
                }
        }
}

 

默认情况下显示根节点（或节点）。用户可以通过单击相邻的箭头来展开或收缩每个节点。单击节点标题选择项目。

 

这是前一个示例的开发版本，具有多个根节点、修订的项目模板以及在视图模型代码中进行的初始选择：

<TreeView Margin="10"
                    ItemsSource="{Binding Nodes}" 
                    SelectedItems="{Binding SelectedNodes}"
                    SelectionMode="Multiple">
    <TreeView.ItemTemplate>
        <TreeDataTemplate ItemsSource="{Binding SubNodes}">
            <Border HorizontalAlignment="Left"
                            BorderBrush="Gray" BorderThickness="1"
                            CornerRadius="5" Padding="15 3">
                <TextBlock Text="{Binding Title}" />
            </Border>
        </TreeDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

 

C# View Model

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

namespace AvaloniaControls.ViewModels
{
        public class MainWindowViewModel : ViewModelBase
        {
                public ObservableCollection<Node> Nodes { get; }
                public ObservableCollection<Node> SelectedNodes { get; }

                public MainWindowViewModel()
                {
                        SelectedNodes = new ObservableCollection<Node>();
                        Nodes = new ObservableCollection<Node>
                        {                
                                new Node("Animals", new ObservableCollection<Node>
                                {
                                        new Node("Mammals", new ObservableCollection<Node>
                                        {
                                                new Node("Lion"), new Node("Cat"), new Node("Zebra")
                                        })
                                }),
                                new Node("Birds", new ObservableCollection<Node>
                                {
                                        new Node("Robin"), new Node("Condor"), 
                                        new Node("Parrot"), new Node("Eagle")
                                }),
                                new Node("Insects", new ObservableCollection<Node>
                                {
                                        new Node("Locust"), new Node("House Fly"), 
                                        new Node("Butterfly"), new Node("Moth")
                                }),
                        };

                        var moth = Nodes.Last().SubNodes?.Last();
                        if (moth!=null) SelectedNodes.Add(moth);    
                }
        }
}

 

C# Node Class

using System.Collections.ObjectModel;

namespace AvaloniaControls.Models
{
        public class Node
        {
                public ObservableCollection<Node>? SubNodes { get; }
                public string Title { get; }
    
                public Node(string title)
                {
                        Title = title;
                }

                public Node(string title, ObservableCollection<Node> subNodes)
                {
                        Title = title;
                        SubNodes = subNodes;
                }
        }
}

 

树视图在需要时添加滚动条。可以通过按住 Ctrl 键来扩展选择。

 

 

 

UniformGrid 均匀网格

Uniform Grid 将可用空间在两个方向上均匀地划分为单元格。您可以指定使用多少个划分，并且这些划分在两个方向上可以不同。

然后，您可以使用附加的行和列索引属性（从零开始）将子控件分配到创建的单元格中。

常用属性​

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

属性	描述
Rows	整数。设置高度中相等行的数量。
Columns	整数。设置宽度中相等列的数量。
Grid.Column	附加到子控件以设置其列索引。
Grid.Row	附加到子控件以设置其行索引。

示例​

<UniformGrid Rows="1" Columns="3" Width="300" Height="200">
    <Rectangle Fill="navy" Grid.Column="0" Grid.Row="0"/>
    <Rectangle Fill="white" Grid.Column="1" Grid.Row="0"/>
    <Rectangle Fill="red" Grid.Column="2" Grid.Row="0"/>
</UniformGrid>

 

 

Viewbox 视图盒

Viewbox 是一个可以缩放其内容的容器控件。可以定义内容的拉伸方式，以及拉伸发生的方向（拉伸方向）。

常用属性​

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

属性	默认值	描述
Stretch	Uniform	决定内容如何适应可用空间。
StretchDirection	Both	决定缩放何时发生。

Stretch 属性的值如下：

Stretch	描述
Uniform	(默认) 内容被调整大小以适应容器的尺寸，同时保持其原生的宽高比。
Fill	内容被调整大小以填充容器的尺寸。宽高比不被保持。
UniformToFill	内容被调整大小以完全填充容器，同时保持其原生的宽高比。然而，如果内容的宽高比与分配空间的宽高比不匹配，则内容的一部分可能会被隐藏。

StretchDirection 属性的值如下：

Stretch Direction	描述
UpOnly	仅当内容小于可用空间时才缩放内容。如果内容较大，则不进行缩小。
DownOnly	仅当内容大于可用空间时才缩放内容。如果内容较小，则不进行放大。
Both	(默认) 始终根据拉伸模式适应可用空间。

示例​

这个简单的示例展示了一个 Viewbox 以统一的方式放大一个圆（拉伸和方向均为默认值）。

<Viewbox Stretch="Uniform" Width="300" Height="300">
   <Ellipse Width="50" Height="50" Fill="CornflowerBlue" />  
</Viewbox>

 

演示​

以下演示展示了不同的拉伸和拉伸方向属性设置的组合效果。第一组展示了拉伸属性的效果：

Stretch 值	演示
Uniform
UniformToFill
Fill
None

第二组演示展示了拉伸方向属性的效果：

Stretch Direction	演示
UpOnly
DownOnly

 

 

Window 窗口

Window 是一个顶级的 ContentControl。

通常情况下，你不会直接创建 Window 类的实例；相反，通常会为应用程序要显示的每种类型的窗口子类化 Window 类。有关如何从模板创建新窗口类的信息，请参见 快速入门。

常见属性​

属性	描述
Title	窗口标题
Icon	窗口图标
SizeToContent	描述窗口的自动调整大小行为
WindowState	窗口的最小化/最大化状态

源代码​

Window.cs

显示、隐藏和关闭窗口​

你可以使用 Show 方法显示一个窗口：

var window = new MyWindow();
window.Show();

 

可以使用 Close 方法关闭窗口。这与用户点击窗口的关闭按钮时的效果相同：

window.Close();

// 已关闭的窗口不能再次显示。
window.Show();

 

请注意，一旦窗口被关闭，就不能再次显示。如果你想重新显示窗口，应该使用 Hide 方法：

window.Hide();

// 现在窗口可以在以后再次显示
window.Show();

 

另见 阻止窗口关闭

以对话框形式显示窗口​

你可以通过调用 ShowDialog 方法以模态对话框形式显示一个窗口。ShowDialog 需要传递一个所有者窗口：

// 这里我们假设这段代码是在我们当前的 Window 类中执行的，"this" 对象是一个 Window。
// 或者你可以从 Application.ApplicationLifetime 获取全局的 MainWindow 并转换为 IClassicDesktopStyleApplicationLifetime。
var ownerWindow = this;
var window = new MyWindow();
window.ShowDialog(ownerWindow);

 

ShowDialog 方法将立即返回。如果你想等待对话框关闭，可以 await 调用：

var window = new MyWindow();
await window.ShowDialog(ownerWindow);

 

对话框可以通过调用带有对象的 Close 方法返回一个结果。然后，调用 ShowDialog 的方可以读取这个结果。例如：

public class MyDialog : Window
{
    public MyDialog()
    {
        InitializeComponent();
    }

    private void OkButton_Click(object sender, EventArgs e)
    {
        Close("OK Clicked!");
    }
}

 

var dialog = new MyDialog();

// 结果是一个字符串，所以调用 `ShowDialog<string>`。
var result = await dialog.ShowDialog<string>(ownerWindow);

 

阻止窗口关闭​

可以通过处理 Closing 事件并设置 e.Cancel = true 来阻止窗口关闭：

window.Closing += (s, e) =>
{
    e.Cancel = true;
};

 

你也可以选择隐藏窗口。这允许在用户点击关闭按钮后重新显示窗口：

window.Closing += (s, e) =>
{
    ((Window)s).Hide();
    e.Cancel = true;
};

 

WrapPanel 顺序换行面板

WrapPanel 使用默认排列方式将多个子元素从左到右依次排列，直到宽度不够时换行（包括任何边距和边框）。当没有剩余空间时，它会开始新的一行。

当 Orientation 属性设置为 Vertical 时，排列方式为从上到下，当没有剩余高度时开始新的一列。

常用属性​

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

属性	描述
Orientation	更改排列方向。

示例​

<WrapPanel>
    <Rectangle Fill="Navy" Width="100" Height="100" Margin="20"/>
    <Rectangle Fill="Yellow" Width="100" Height="100" Margin="20"/>
    <Rectangle Fill="Green" Width="100" Height="100" Margin="20"/>
    <Rectangle Fill="Red" Width="100" Height="100" Margin="20"/>
    <Rectangle Fill="Purple" Width="100" Height="100" Margin="20"/>
</WrapPanel>

 

<WrapPanel Orientation="Vertical">
    <Rectangle Fill="Navy" Width="100" Height="100" Margin="20"/>
    <Rectangle Fill="Yellow" Width="100" Height="100" Margin="20"/>
    <Rectangle Fill="Green" Width="100" Height="100" Margin="20"/>
    <Rectangle Fill="Red" Width="100" Height="100" Margin="20"/>
    <Rectangle Fill="Purple" Width="100" Height="100" Margin="20"/>
</WrapPanel>

 

 

 

PinchGestureRecognizer 捏合手势识别器

一个用于追踪捏合手势的手势识别器。捏合手势发生在两个触控点向彼此靠近或远离的情况下。这在实现捏合缩放交互的控件中非常有用。

使用捏合手势识别器​

可以通过将 PinchGestureRecognizer 添加到控件的 GestureRecognizers 属性来将其附加到控件上。

<Image Stretch="UniformToFill"
        Margin="5"
        Name="image"
        Source="/image.jpg">
  <Image.GestureRecognizers>
    <PinchGestureRecognizer/>
  </Image.GestureRecognizers>
</Image>

 

C#

image.GestureRecognizers.Add(new PinchGestureRecognizer());

 

当 PinchGestureRegonizer 检测到拉动手势的开始时，会触发 Gestures.PinchEvent 事件。当拉动结束（指针被释放或开始另一个手势）时，它会触发 Gestures.PinchEndedEvent 事件。 传递给 Gestures.PinchEvent 事件处理程序的参数中的 Scale 属性包含自从捏合手势开始以来的相对大小。

 

PullGestureRecognizer 拉动手势识别器

一个用于追踪拉动手势的手势识别器。拉动手势发生在指针从控件的边缘拖动时。拉动的方向由 PullDirection 属性定义。

使用拉动手势识别器​

可以通过将 PullGestureRecognizer 添加到控件的GestureRecognizers属性来将其附加到控件上。

<Border Width="500"
        Height="500"
        Margin="5"
        Name="border">
  <Border.GestureRecognizers>
    <PullGestureRecognizer PullDirection="TopToBottom"/>
  </Border.GestureRecognizers>
</Border>

 

C#

border.GestureRecognizers.Add(new PullGestureRecognizer()
            {
                PullDirection = PullDirection.TopToBottom,
            });

 

当 PullGestureRegonizer 检测到拉动手势的开始时，会引发Gestures.PullGestureEvent事件。当拉动结束，即指针被释放或另一个手势开始时，它会引发Gestures.PullGestureEndedEvent事件。

PullDirection​

这定义了拉动的方向。有4个可用的值：

• PullDirection.TopToBottom : 拉动从顶部边缘开始向下移动

 

 

• PullDirection.BottomToTop : 拉动从底部边缘开始向上移动
• PullDirection.LeftToRight : 拉动从左边缘开始向右移动
• PullDirection.RightToLeft : 拉动从右边缘开始向左移动

有用的属性​

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

属性	描述
PullDirection	定义拉动手势的方向。

 

ScrollGestureRecognizer 滚动手势识别器

一个用于跟踪滚动手势的手势识别器。可以将其附加到控件上，以便在控件的边界内检测指针在特定方向上的移动。当控件水平、垂直或同时进行内容平移时，这将特别有用。

使用滚动手势识别器​

可以使用控件的 GestureRecognizers 属性将 ScrollGestureRecognizer 附加到控件上。

<Image Stretch="UniformToFill"
        Margin="5"
        Name="image"
        Source="/image.jpg">
  <Image.GestureRecognizers>
    <ScrollGestureRecognizer CanHorizontallyScroll="True"
                              CanVerticallyScroll="True"/>
  </Image.GestureRecognizers>
</Image>

 

C#

image.GestureRecognizers.Add(new ScrollGestureRecognizer()
            {
                CanVerticallyScroll = true,
                CanHorizontallyScroll = true,
            });

 

当 ScrollGestureRecognizer 检测到滚动手势的开始时，它会引发 Gestures.ScrollGestureEvent 事件。当滚动结束（指针释放或其他手势开始）时，它会引发 Gestures.ScrollGestureEndedEvent 事件。

有用的属性​

You will probably use these properties most often:

属性	描述
CanVerticallyScroll	定义内容是否可以垂直滚动。
CanHorizontallyScroll	定义内容是否可以水平滚动。