编程 Windows 10 桌面：UWP 焦点（第 5 章）
UWP 入门（从 WinForm 迁移） 第 5 章 为多个期刊条目添加选项卡（Pivot）
引言
*NaNoWriMo[^]，我可不输给你。 :) 看来我要在一个月内写完《编程 Windows 10》了。
*十一月是全国小说写作月（在一个月内写完你的小说）
本文继续我尝试讲述 UWP（通用 Windows 平台）范例下桌面开发故事的系列文章。
您可以阅读此文之前的其他文章
编程 Windows 10：UWP 焦点 (N 篇中的第 1 篇)[^]
编程 Windows 10：UWP 焦点 (N 篇中的第 2 篇)[^]
编程 Windows 10：UWP 焦点 (N 篇中的第 3 篇)[^]
编程 Windows 10 桌面：UWP 焦点 (N 篇中的第 4 篇)[^]
背景
我们直接从上次的 DailyJournal 应用开始。
从上一篇文章中获取代码，在 Visual Studio 中打开它，然后我们将为 `ListView` 添加更多测试数据。
添加更多测试数据
将以下行添加到 `MainPage.xaml.cs` 文件中的 `Page_Load()` 方法。
EntriesListView.Items.Add("2 super");
EntriesListView.Items.Add("2 extra");
EntriesListView.Items.Add("2 maximum");
EntriesListView.Items.Add("2 advanced");
EntriesListView.Items.Add("2 efficient");
这将有助于更明显地看出问题。
缺少滚动功能
上次我们离开应用时，最明显的问题之一是 `ListView` 滚动不正常，或者几乎无法滚动。此外，`RichEditBox` 根本不滚动。即使您粘贴了超出屏幕范围的文本，也从未出现过滚动条。
现在您已经进行了上述更改，请继续构建并运行应用程序（`CTRL-F5`）。
根据您的初始窗口大小，情况可能会有所不同，但如果您尝试向下滚动 `ListView` 项目，您会发现无法滚动到最后并看到所有项目。
在我的应用中，我只能显示从添加的第二组中的第一个项目（*2 super*）。列表中实际上还有更多项目，但我们无法滚动到它们。
另外请注意，我将多行粘贴到了 `RichEditBox` 中，虽然这些行超出了 `Page` 的范围，但我没有获得任何可用的滚动条。让我们来修复这两个项目，并更多地了解 XAML 和 UWP。
星号这，星号那
解决这个滚动问题非常容易，因为我们正确设置了 `Grid`。
在我们的例子中，唯一的问题是我之前在代码中不当设置了第二行的 `height`，因为我给它设置了一个硬编码的值。硬编码的值几乎总是错误的，不是吗？之前我曾将第二行设置为 400 像素高。但是，我们实际上希望第二行（我们的 `ListView` 和 `RichEditBox` 溢出到的地方）相对于它们所在的 `Grid` 元素进行按比例定义。
为此，我们只需将 `Grid RowDefinition height` 设置为星号。
以前的代码是这样的
我们只需将 400 更改为 *（星号）。
将那一行更改为
<RowDefinition Height="*"/>
现在它看起来像这样
再次构建并运行（`CTRL-F5`），您现在应该能够滚动到 `ListView` 中的最后一个项目。
修复成功！
您还将能够像预期一样使用 `RichEditBox`。您可以键入并继续输入并创建新行，当行超出可视区域大小时，滚动条就会出现。
下载已修复的源代码
您可以从本文顶部下载名为 `DailyJournal_v003.zip` 的 zip 文件，以获取已修复的代码，您可以尝试一下。
以下屏幕截图捕捉了两个滚动条（一个在 `ListView` 中，一个在 `RichEditBox` 中），并显示了 `ListView` 中的最后一项（*2 efficient*）现在可以通过滚动访问。
仅更改 XAML 中的一个值和几个字符就取得了如此大的成功。
忘了选项卡控件
我应用中只漏掉了一件事：一个选项卡控件，以便我们每天可以有多个文件条目。
选项卡控件已消失：Pivot 取而代之
哦，玩笑开到我身上了。我刚搜了一下，发现 **UWP 中没有选项卡控件**。糟糕。
我找到了以下帖子，它引导我找到了选项卡控件的替代品，称为 `Pivot`：https://social.msdn.microsoft.com/Forums/windowsapps/en-US/bf1eb831-a049-432d-a86b-ec70f014e6fd/tab-control-in-uwp-application?forum=wpdevelop
有一个非常简单的 `Pivot` XAML 示例，所以我希望我能将 `RichEditBox` 包装在 `Pivot` 中，并添加一些 `PivotItem` 来让它工作起来。
实验
让我们做个实验，看看它可能如何工作。
`Pivot` 看起来相当简单易用。它看起来像另一个容器，所以我们只需要将目标控件（`RichEditBox`）包装在 `Pivot` 中。然后，对于您想显示的每个“选项卡”，只需添加一个 `PivotItem`。
这是我添加的 `Pivot` 和 `PivotItem`（包装了 `RichEditBox`）
<Pivot x:Name="rootPivot" Title="Pivot Title" Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" >
<PivotItem Header="Entry1">
<RichEditBox Name="MainRichEdit" Grid.Column="1" Grid.Row="0" Grid.RowSpan="2"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</PivotItem>
</Pivot>
添加之后，我的 `Page` 在设计器中发生了变化，现在看起来是这样的
注意 Grid 的行和列
首先要认识到的是，为了让我们的 Pivot 出现在 Grid 元素中的正确位置，我仍然必须为它添加与我们原始 RichEditBox 匹配的属性（`Grid.Column="1" Grid.Row="0" Grid.RowSpan="2"`）。
进行这些更改后，您可以看到它将我们的 RichEditBox 嵌套在 Pivot 中（显示为 Pivot Title）以及 PivotItem（显示为 Entry1）。
删除 Pivot Title？
我猜测（并希望）如果我删除 `Title=”Pivot Title”`，那么那个额外的标题就会消失。我们的目的不需要它，它只是占用了额外的空间。
让我们删除那个属性，看看会发生什么。
成功！您可以看到现在只显示了 PivotIem 的标题，这正是我们需要的。
这还不错。我们似乎走在正确的轨道上。
但是，为了获得一个好的示例，我们需要添加另一个 `PivotItem`，它包含一个单独的 `RichEditBox`，以便创建一个示例，与我们拥有同一天多个文件可用性的最终结果相匹配。让我们看看能否添加另一个包含另一个 `RichEditBox` 的 `PivotItem`。
复制/粘贴当前 PivotItem
我将简单地复制当前的 PivotItem 并将其粘贴到已有的 PivotItem 下方。之后，我将把 PivotItem 的标题更改为“Entry2”。
Visual Studio 提供了线索
当我这样做时，Visual Studio 会抱怨我，但确实给了我一个关于问题所在的好线索。
注意，新的 PivotItem 在设计视图中也没有渲染。Visual Studio 和设计视图无法确定该怎么做，因此它会发出警告。
我们测试的简单解决方案是简单地将名称从 MainRichEdit 更改为 MainRichEdit2。
当我这样做时，一切都很好，我们得到了一个很好的例子。
现在您可以看到两个 PivotItems（选项卡）。让我们运行它，确保所有滚动条仍然正常工作，并测试每个 RichEditBox 是否允许我们输入不同的文本。
下载代码：DailyJournal_v004.zip
您可以从本文顶部下载 `DailyJournal_v004.zip` 以获取源代码并尝试一下。
根据我的测试，一切都很好。为了避免在这篇文章中用更多图像让您发疯，我只向您展示这一张截图，它显示了我在*Entry 2* `RichEditBox` 中有文本，并且 `RichEditBox` 和 `ListView` 的滚动条仍然正常工作。
我认为这是又一次巨大的成功。特别是考虑到我忘记了选项卡功能，并且能够在事后添加它。
我们的应用程序真正需要做什么
当然，这并不完全是我们应用所需要的。我们不知道确切有多少 PivotItems，因为每个 PivotItem 及其关联的 RichEditBox 将代表一个日记条目。
我们需要能够动态添加 `PivotItems`（以及关联的 `RichEditBoxes`），当应用程序在文件系统中找到日记条目时。
下一篇文章将有更多工作
这需要一些工作，因为我需要解释在磁盘上保存日记条目文件的方案。我会考虑如何清楚地解释它，下次我们将从让我们的 RichEditBox 保存其数据开始。
历史
2017-11-28：文章首次发布