c# - Windows Phone 应用程序中文本框的类似笔记本的背景

Question

我正在尝试创建一个应用程序来为 W​​indows Phone 8.1 做笔记我想给用户一种笔记本类型的感觉。为此，我为笔记创建了 UI，XAML 是:

<Grid Margin="0,12.333,0,-0.333">
    <Grid.Background>
        <ImageBrush ImageSource="Images/notebookpaper.jpg"/>
    </Grid.Background>
    <TextBox TextWrapping="Wrap" Background="{x:Null}" Text="" BorderBrush="{x:Null}" HorizontalAlignment="Left" Margin="60,96,0,0"  VerticalAlignment="Top" Height="480" Width="340" BorderThickness="0" GotFocus="TextBox_GotFocus" LostFocus="TextBox_LostFocus" FontFamily="Arial" TextChanged="TextBox_TextChanged" AcceptsReturn="True" FontSize="24.8"/>
    <TextBlock Text="Date : " HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Margin="246,10,0,0" Height="20" Width="59"/>
</Grid>

图像 notebookpaper.jpg 如下所示:

当用户在文本框中输入文本时，它看起来像:

问题是，有些字符出现在线条上方一点，有些正好在线条上等等，这看起来很奇怪。此外，当我尝试滚动时，UI 显示为:

文本显示为删除线，因为只有文本滚动而不是背景图像。此外，我希望能够为用户提供 5-6 种字体的列表，他们可以从中选择使用哪一种来输入笔记。

我应该怎么做才能使文本正确对齐并正确滚动。还有其他方法吗？

Answer 1

看起来你有两个问题:

1. 可变行高
2. 滚动与行不匹配

要解决第一个问题，您可能可以使用 TextBlock.TextLineBounds , 在 this MSDN blog post 中谈到了一点和 TextLineBounds enumeration documentation .这似乎只适用于 TextBlock，因此您可能必须在用户编辑文本时在 TextBlock 和 TextBox 之间切换。

为了解决第二个问题，TextBox styles and templates page有很多有用的信息。看起来您可以通过覆盖 TextBoxButtonBackgroundThemeBrush 使您的 ImageBrush 成为控件的背景。如果这在聚焦时不起作用，您可能必须采用链接页面上给出的整个模板并对其进行编辑以将您的图像置于背景中(有很多 XAML，但您应该能够将图像放入BackgroundElement 或就在它之前)。

如果仍然不滚动，您可以尝试设置ScrollViewer.Background；如果这不起作用，您将需要处理 ScrollViewer.ViewChanging 或 ScrollViewer.ViewChanged 事件(可能通过覆盖它)以便您可以转换背景滚动查看器移动的像素数量。

您还可以使用 VisualTreeHelper 在您的代码隐藏中找到 ScrollViewer(并跳过处理模板) .这将允许您设置 ScrollViewer 的背景和/或订阅它的事件。然而，这比其他方法更脆弱，通常是最后的手段。