Skip to content

Commit 759a523

Browse files
jindongjiejindongjie
committed
add & trans treeview, uniformgrid, viewbox, wrappanel
1 parent bc371be commit 759a523

File tree

4 files changed

+344
-0
lines changed

4 files changed

+344
-0
lines changed

‎i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/treeview-1.md

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
---
2+
description: REFERENCE - Built-in Controls
3+
---
4+
5+
import TreeViewAnimalHierarchyScreenshot from '/img/reference/controls/treeview/treeview-animal-hierarchy.gif';
6+
import TreeViewEnhancedAnimalHierarchyScreenshot from '/img/reference/controls/treeview/treeview-enhanced-animal-hierarchy.gif';
7+
8+
# TreeView 树视图
9+
10+
树视图控件可以呈现层次数据并允许项目选择。项目是模板化的，因此您可以自定义它们的显示方式。
11+
12+
有两个数据源：控件的主要项目源，这提供了层次数据的根。然后是项目模板中的项目源，它允许控件列出层次数据的下一级。
13+
14+
## 示例
15+
16+
此示例使用 MVVM 模式视图模型来保存一些基于 C# 节点类的层次数据。在此示例中，视图模型的 `Nodes` 集合中有一个根节点：
17+
18+
```xml
19+
<TreeView ItemsSource="{Binding Nodes}">
20+
<TreeView.ItemTemplate>
21+
<TreeDataTemplate ItemsSource="{Binding SubNodes}">
22+
<TextBlock Text="{Binding Title}"/>
23+
</TreeDataTemplate>
24+
</TreeView.ItemTemplate>
25+
</TreeView>
26+
```
27+
28+
```csharp title='C# View Model'
29+
using AvaloniaControls.Models;
30+
using System.Collections.ObjectModel;
31+
32+
namespace AvaloniaControls.ViewModels
33+
{
34+
public class MainWindowViewModel : ViewModelBase
35+
{
36+
public ObservableCollection<Node> Nodes{ get; }
37+
38+
public MainWindowViewModel()
39+
{
40+
Nodes = new ObservableCollection<Node>
41+
{
42+
new Node("Animals", new ObservableCollection<Node>
43+
{
44+
new Node("Mammals", new ObservableCollection<Node>
45+
{
46+
new Node("Lion"), new Node("Cat"), new Node("Zebra")
47+
})
48+
})
49+
};
50+
}
51+
}
52+
}
53+
```
54+
55+
```csharp title='C# Node Class'
56+
using System.Collections.ObjectModel;
57+
58+
namespace AvaloniaControls.Models
59+
{
60+
public class Node
61+
{
62+
public ObservableCollection<Node>? SubNodes { get; }
63+
public string Title { get; }
64+
65+
public Node(string title)
66+
{
67+
Title = title;
68+
}
69+
70+
public Node(string title, ObservableCollection<Node> subNodes)
71+
{
72+
Title = title;
73+
SubNodes = subNodes;
74+
}
75+
}
76+
}
77+
```
78+
79+
默认情况下显示根节点（或节点）。用户可以通过单击相邻的箭头来展开或收缩每个节点。单击节点标题选择项目。
80+
81+
<img src={TreeViewAnimalHierarchyScreenshot} alt="" />
82+
83+
这是前一个示例的开发版本，具有多个根节点、修订的项目模板以及在视图模型代码中进行的初始选择：
84+
85+
```xml
86+
<TreeView Margin="10"
87+
ItemsSource="{Binding Nodes}"
88+
SelectedItems="{Binding SelectedNodes}"
89+
SelectionMode="Multiple">
90+
<TreeView.ItemTemplate>
91+
<TreeDataTemplate ItemsSource="{Binding SubNodes}">
92+
<Border HorizontalAlignment="Left"
93+
BorderBrush="Gray" BorderThickness="1"
94+
CornerRadius="5" Padding="15 3">
95+
<TextBlock Text="{Binding Title}" />
96+
</Border>
97+
</TreeDataTemplate>
98+
</TreeView.ItemTemplate>
99+
</TreeView>
100+
```
101+
102+
```csharp title='C# View Model'
103+
using AvaloniaControls.Models;
104+
using System.Collections.ObjectModel;
105+
using System.Linq;
106+
107+
namespace AvaloniaControls.ViewModels
108+
{
109+
public class MainWindowViewModel : ViewModelBase
110+
{
111+
public ObservableCollection<Node> Nodes { get; }
112+
public ObservableCollection<Node> SelectedNodes { get; }
113+
114+
public MainWindowViewModel()
115+
{
116+
SelectedNodes = new ObservableCollection<Node>();
117+
Nodes = new ObservableCollection<Node>
118+
{
119+
new Node("Animals", new ObservableCollection<Node>
120+
{
121+
new Node("Mammals", new ObservableCollection<Node>
122+
{
123+
new Node("Lion"), new Node("Cat"), new Node("Zebra")
124+
})
125+
}),
126+
new Node("Birds", new ObservableCollection<Node>
127+
{
128+
new Node("Robin"), new Node("Condor"),
129+
new Node("Parrot"), new Node("Eagle")
130+
}),
131+
new Node("Insects", new ObservableCollection<Node>
132+
{
133+
new Node("Locust"), new Node("House Fly"),
134+
new Node("Butterfly"), new Node("Moth")
135+
}),
136+
};
137+
138+
var moth = Nodes.Last().SubNodes?.Last();
139+
if (moth!=null) SelectedNodes.Add(moth);
140+
}
141+
}
142+
}
143+
```
144+
145+
```csharp title='C# Node Class'
146+
using System.Collections.ObjectModel;
147+
148+
namespace AvaloniaControls.Models
149+
{
150+
public class Node
151+
{
152+
public ObservableCollection<Node>? SubNodes { get; }
153+
public string Title { get; }
154+
155+
public Node(string title)
156+
{
157+
Title = title;
158+
}
159+
160+
public Node(string title, ObservableCollection<Node> subNodes)
161+
{
162+
Title = title;
163+
SubNodes = subNodes;
164+
}
165+
}
166+
}
167+
```
168+
169+
树视图在需要时添加滚动条。可以通过按住 Ctrl 键来扩展选择。
170+
171+
<img src={TreeViewEnhancedAnimalHierarchyScreenshot} alt="" />
172+
173+
## 更多信息
174+
175+
:::info
176+
有关此控件的完整 API 文档，请参见[此处](http://reference.avaloniaui.net/api/Avalonia.Controls/TreeView/)。
177+
:::
178+
179+
:::info
180+
在 _GitHub_ 上查看源代码 [`TreeView.cs`](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/TreeView.cs)
181+
:::
182+

‎i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/uniform-grid.md

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
description: REFERENCE - Built-in Controls
3+
---
4+
5+
import UniformGridFrenchFlagScreenshot from '/img/reference/controls/uniformgrid/uniformgrid-french-flag.png';
6+
7+
# UniformGrid 均匀网格
8+
9+
Uniform Grid 将可用空间在两个方向上均匀地划分为单元格。您可以指定使用多少个划分，并且这些划分在两个方向上可以不同。
10+
11+
然后，您可以使用附加的行和列索引属性（从零开始）将子控件分配到创建的单元格中。
12+
13+
## 常用属性
14+
15+
您可能最常使用这些属性：
16+
17+
<table><thead><tr><th width="261">属性</th><th>描述</th></tr></thead><tbody><tr><td><code>Rows</code></td><td>整数。设置高度中相等行的数量。</td></tr><tr><td><code>Columns</code></td><td>整数。设置宽度中相等列的数量。</td></tr><tr><td><code>Grid.Column</code></td><td>附加到子控件以设置其列索引。</td></tr><tr><td><code>Grid.Row</code></td><td>附加到子控件以设置其行索引。</td></tr></tbody></table>
18+
19+
## 示例
20+
21+
```xml
22+
<UniformGrid Rows="1" Columns="3" Width="300" Height="200">
23+
<Rectangle Fill="navy" Grid.Column="0" Grid.Row="0"/>
24+
<Rectangle Fill="white" Grid.Column="1" Grid.Row="0"/>
25+
<Rectangle Fill="red" Grid.Column="2" Grid.Row="0"/>
26+
</UniformGrid>
27+
```
28+
29+
<img src={UniformGridFrenchFlagScreenshot} alt="" />
30+
31+
## 更多信息
32+
33+
:::info
34+
有关此控件的完整 API 文档，请参见[此处](https://reference.avaloniaui.net/api/Avalonia.Controls.Primitives/UniformGrid/)。
35+
:::
36+
37+
:::info
38+
在 _GitHub_ 上查看源代码 [`UniformGrid.cs`](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/Primitives/UniformGrid.cs)
39+
:::
40+

‎i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/viewbox.md

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
---
2+
description: REFERENCE - Built-in Controls
3+
---
4+
5+
import ViewboxScaleUniformBothScreenshot from '/img/reference/controls/viewbox/viewbox-scale-uniform-both.gif';
6+
import ViewboxScaleUniformFillBothScreenshot from '/img/reference/controls/viewbox/viewbox-scale-uniformtofill-both.gif';
7+
import ViewboxScaleFillBothScreenshot from '/img/reference/controls/viewbox/viewbox-scale-fill-both.gif';
8+
import ViewboxScaleNoneBothScreenshot from '/img/reference/controls/viewbox/viewbox-scale-none-both.gif';
9+
10+
import ViewboxScaleUniformDownOnlyScreenshot from '/img/reference/controls/viewbox/viewbox-uniform-downonly.gif';
11+
import ViewboxScaleUniformUpOnlyScreenshot from '/img/reference/controls/viewbox/viewbox-uniform-uponly.gif';
12+
13+
# Viewbox 视图盒
14+
15+
`Viewbox` 是一个可以缩放其内容的容器控件。可以定义内容的拉伸方式，以及拉伸发生的方向（拉伸方向）。
16+
17+
## 常用属性
18+
19+
你可能最常使用这些属性：
20+
21+
| 属性 | 默认值 | 描述 |
22+
| ------------------ | ------- |--------------------------------------------------------------|
23+
| `Stretch` | Uniform | 决定内容如何适应可用空间。 |
24+
| `StretchDirection` | Both | 决定缩放何时发生。 |
25+
26+
`Stretch` 属性的值如下：
27+
28+
<table><thead><tr><th width="250">Stretch</th><th>描述</th></tr></thead><tbody><tr><td><code>Uniform</code></td><td>(默认) 内容被调整大小以适应容器的尺寸，同时保持其原生的宽高比。</td></tr><tr><td><code>Fill</code></td><td>内容被调整大小以填充容器的尺寸。宽高比不被保持。</td></tr><tr><td><code>UniformToFill</code></td><td>内容被调整大小以完全填充容器，同时保持其原生的宽高比。然而，如果内容的宽高比与分配空间的宽高比不匹配，则内容的一部分可能会被隐藏。</td></tr></tbody></table>
29+
30+
`StretchDirection` 属性的值如下：
31+
32+
| Stretch Direction | 描述 |
33+
| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
34+
| `UpOnly` | 仅当内容小于可用空间时才缩放内容。如果内容较大，则不进行缩小。 |
35+
| `DownOnly` | 仅当内容大于可用空间时才缩放内容。如果内容较小，则不进行放大。 |
36+
| `Both` | (默认) 始终根据拉伸模式适应可用空间。 |
37+
38+
### 示例
39+
40+
这个简单的示例展示了一个 `Viewbox` 以统一的方式放大一个圆（拉伸和方向均为默认值）。
41+
42+
```xml
43+
<Viewbox Stretch="Uniform" Width="300" Height="300">
44+
<Ellipse Width="50" Height="50" Fill="CornflowerBlue" />
45+
</Viewbox>
46+
```
47+
48+
### 演示
49+
50+
以下演示展示了不同的拉伸和拉伸方向属性设置的组合效果。第一组展示了拉伸属性的效果：
51+
52+
<table><thead><tr><th width="275">Stretch 值</th><th>演示</th></tr></thead><tbody><tr><td><code>Uniform</code></td><td><img src={ViewboxScaleUniformBothScreenshot} alt="" data-size="original"/></td></tr><tr><td><code>UniformToFill</code></td><td><img src={ViewboxScaleUniformFillBothScreenshot} alt="" data-size="original"/></td></tr><tr><td><code>Fill</code></td><td><img src={ViewboxScaleFillBothScreenshot} alt="" data-size="original"/></td></tr><tr><td><code>None</code></td><td><img src={ViewboxScaleNoneBothScreenshot} alt="" data-size="original"/></td></tr></tbody></table>
53+
54+
第二组演示展示了拉伸方向属性的效果：
55+
56+
<table><thead><tr><th width="276">Stretch Direction</th><th>演示</th></tr></thead><tbody><tr><td><code>UpOnly</code></td><td><img src={ViewboxScaleUniformUpOnlyScreenshot} alt="" /></td></tr><tr><td><code>DownOnly</code></td><td><img src={ViewboxScaleUniformDownOnlyScreenshot} alt="" /></td></tr></tbody></table>
57+
58+
## 更多信息
59+
60+
:::info
61+
有关此控件的完整 API 文档，请参见 [这里](http://reference.avaloniaui.net/api/Avalonia.Controls/Viewbox/)。
62+
:::
63+
64+
:::info
65+
在 _GitHub_ 上查看源代码 [`Viewbox.cs`](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/Viewbox.cs)
66+
:::
67+

‎i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/wrappanel.md

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
---
2+
description: REFERENCE - Built-in Controls
3+
---
4+
5+
import WrapPanelHorizontalScreenshot from '/img/reference/controls/wrappanel/wrappanel-horizontal.png';
6+
import WrapPanelVerticalScreenshot from '/img/reference/controls/wrappanel/wrappanel-vertical.png';
7+
8+
# WrapPanel 顺序换行面板
9+
10+
WrapPanel 使用默认排列方式将多个子元素从左到右依次排列，直到宽度不够时换行（包括任何边距和边框）。当没有剩余空间时，它会开始新的一行。
11+
12+
当 Orientation 属性设置为 Vertical 时，排列方式为从上到下，当没有剩余高度时开始新的一列。
13+
14+
## 常用属性
15+
16+
你可能最常使用这些属性：
17+
18+
<table><thead><tr><th width="261">属性</th><th>描述</th></tr></thead><tbody><tr><td>Orientation</td><td>更改排列方向。</td></tr></tbody></table>
19+
20+
## 示例
21+
22+
```xml
23+
<WrapPanel>
24+
<Rectangle Fill="Navy" Width="100" Height="100" Margin="20"/>
25+
<Rectangle Fill="Yellow" Width="100" Height="100" Margin="20"/>
26+
<Rectangle Fill="Green" Width="100" Height="100" Margin="20"/>
27+
<Rectangle Fill="Red" Width="100" Height="100" Margin="20"/>
28+
<Rectangle Fill="Purple" Width="100" Height="100" Margin="20"/>
29+
</WrapPanel>
30+
```
31+
32+
<img src={WrapPanelHorizontalScreenshot} alt="" />
33+
34+
```xml
35+
<WrapPanel Orientation="Vertical">
36+
<Rectangle Fill="Navy" Width="100" Height="100" Margin="20"/>
37+
<Rectangle Fill="Yellow" Width="100" Height="100" Margin="20"/>
38+
<Rectangle Fill="Green" Width="100" Height="100" Margin="20"/>
39+
<Rectangle Fill="Red" Width="100" Height="100" Margin="20"/>
40+
<Rectangle Fill="Purple" Width="100" Height="100" Margin="20"/>
41+
</WrapPanel>
42+
```
43+
44+
<img src={WrapPanelVerticalScreenshot} alt="" />
45+
46+
### 更多信息
47+
48+
:::info
49+
有关此控件的完整 API 文档，请参见[这里](http://reference.avaloniaui.net/api/Avalonia.Controls/WrapPanel/)。
50+
:::
51+
52+
:::info
53+
在 _GitHub_ 上查看源代码 [`WrapPanel.cs`](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/WrapPanel.cs)
54+
:::
55+

0 commit comments

Comments
 (0)