原文:
重新想象 Windows 8 Store Apps (1) - 控件之文本控件: TextBlock, TextBox, PasswordBox, RichEditBox, RichTextBlock, RichTextBlockOverflow
重新想象 Windows 8 Store Apps (1) - 控件之文本控件: TextBlock, TextBox, PasswordBox, RichEditBox, RichTextBlock, RichTextBlockOverflow
作者：webabcd
介绍
重新想象 Windows 8 Store Apps 之文本控件
- TextBlock - 文本显示框
- TextBox - 文本输入框
- PasswordBox - 密码输入框
- RichEditBox - 富文本编辑框
- RichTextBlock - 富文本显示框
- RichTextBlockOverflow - 溢出文本显示框
示例
1、TextBlock 的 Demo
TextBlockDemo.xaml
<Page x:Class="XamlDemo.Controls.TextBlockDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlDemo.Controls" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="120 0 0 0"> <!-- TextBlock 的常用属性 显示的文本如果是引号等特殊字需要使用相应的 HTML 编码 --> <TextBlock Text="TextBlock "的常用属性"" TextAlignment="Left" Foreground="Blue" FontFamily="微软雅黑" FontSize="24" FontWeight="Bold" FontStyle="Italic" FontStretch="Normal" TextWrapping="Wrap" /> <!-- CharacterSpacing - 用于设置字符间距 具体字符间隔像素计算公式如下：字体大小 * CharacterSpacing值 / 1000 = 字符间距像素值 LineHeight - 行高 LineStackingStrategy - 控制行高的策略 MaxHeight - 每行的行高以 LineHeight 值和每行的自然行高中的最大值为准。默认值 BlockLineHeight - 每行的行高以 LineHeight 值为准，以字符区域为参考 BaselineToBaseline - 每行的行高以 LineHeight 值为准，以基线为参考（什么是基线：英文字符的基线基本相当于单词本4条线中的第3条线） Inlines - 内联元素的集合。包括 span, bold, italic, underline 等，但是 InlineUIContainer 不可用，其需要在 RichTextBlock 中使用 --> <TextBlock FontSize="24" CharacterSpacing="100" LineStackingStrategy="MaxHeight" LineHeight="100"> <TextBlock.Inlines> <Run Foreground="Red">Run</Run> <Span Foreground="Green">Span</Span> <LineBreak /> <Bold>Bold</Bold> <Italic>Italic</Italic> <Underline>Underline</Underline> </TextBlock.Inlines> </TextBlock> <!-- TextTrimming - 文字溢出时的显示方式 TextTrimming.None - 不做任何处理 TextTrimming.WordEllipsis - 在边界处，用省略号代替剩余文本 --> <TextBlock FontSize="24" HorizontalAlignment="Left" Text="abcdefghijklmnopqrstuvwxyz" Width="200" TextTrimming="WordEllipsis" /> <!-- FrameworkElement.FlowDirection - 指定文本或界面元素在它们的父元素中的流动方向 FlowDirection.LeftToRight - 内容从左到右流动（默认值） FlowDirection.RightToLeft - 内容从右到左流动 --> <TextBlock FontSize="24" HorizontalAlignment="Left" Text="abcdefg" Width="200" FlowDirection="RightToLeft" /> <!-- IsTextSelectionEnabled - 文本是否可以被选中 --> <TextBlock FontSize="24" Name="lblSource" IsTextSelectionEnabled="True" SelectionChanged="txt_SelectionChanged_1"> <TextBlock.Inlines> <Run>abcdefg</Run> <LineBreak /> <Run>hijklmn</Run> <LineBreak /> <Run>opqrst</Run> </TextBlock.Inlines> </TextBlock> <!--显示 lblSource 中被用户选中的文本（这里的绑定不起作用，应该是bug，所以具体实现放到cs里了）--> <TextBlock FontSize="24" Name="lblCopy" Text="{Binding SelectedText, ElementName=lblSource}" /> </StackPanel> </Grid> </Page>
TextBlockDemo.xaml.cs
/* * TextBlock - 文本显示框 */ using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; namespace XamlDemo.Controls { public sealed partial class TextBlockDemo : Page { public TextBlockDemo() { this.InitializeComponent(); } private void txt_SelectionChanged_1(object sender, RoutedEventArgs e) { // 显示用户选中的文本内容 lblCopy.Text = lblSource.SelectedText; /* * 与文本操作相关的属性和方法还有： ContentStart, ContentEnd, SelectionStart, SelectionEnd, SelectAll(), Select(TextPointer start, TextPointer end) */ } } }
2、TextBox 的 Demo
TextBoxDemo.xaml
<Page x:Class="XamlDemo.Controls.TextBoxDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlDemo.Controls" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Name="root" Background="Transparent"> <StackPanel Margin="120 0 0 0"> <!-- AcceptsReturn - 是否接受回车符 IsReadOnly - 是否只读 SelectedText - 选中的文本内容 --> <TextBox Name="txtDemo" AcceptsReturn="True" TextWrapping="Wrap" MaxLength="50" TextAlignment="Center" HorizontalAlignment="Left" Width="200" Height="100" Text="webabcd" Loaded="txt_Loaded_1" /> <!--用于显示 txt 中被选中的文本内容--> <TextBox Name="txtReadOnly" IsReadOnly="True" Text="{Binding SelectedText, ElementName=txt}" HorizontalAlignment="Left" Width="200" Height="100" Margin="0 10 0 0" /> <!-- InputScope - 指定 SIP（Soft Input Panel）的类型 --> <TextBox InputScope="Number" FlowDirection="RightToLeft" HorizontalAlignment="Left" Margin="0 10 0 0" /> <!-- 后台设置此 TextBox 的 InputScope --> <TextBox Name="txtInputScope" HorizontalAlignment="Left" Margin="0 10 0 0" KeyDown="txtInputScope_KeyDown_1"/> </StackPanel> </Grid> </Page>
TextBoxDemo.xaml.cs
/* * TextBox - 文本输入框 */ using Windows.System; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Input; namespace XamlDemo.Controls { public sealed partial class TextBoxDemo : Page { public TextBoxDemo() { this.InitializeComponent(); this.Loaded += TextBoxDemo_Loaded; } private void txt_Loaded_1(object sender, RoutedEventArgs e) { // 让 txtDemo 获取焦点 txtDemo.Focus(Windows.UI.Xaml.FocusState.Programmatic); // 将 txtDemo 中的文本从第 3 个字符开始的一共 4 个字符设置为选中状态 txtDemo.Select(3, 4); /* * 与文本操作相关的属性和方法还有： SelectionStart, SelectionLength, SelectedText, SelectAll(), Select(int start, int length), GetRectFromCharacterIndex(int charIndex, bool trailingEdge) */ } void TextBoxDemo_Loaded(object sender, RoutedEventArgs e) { // 设置 txtInputScope 的 InputScope InputScope scope = new InputScope(); InputScopeName name = new InputScopeName(); name.NameValue = InputScopeNameValue.ChineseFullWidth; scope.Names.Add(name); txtInputScope.InputScope = scope; } private void txtInputScope_KeyDown_1(object sender, Windows.UI.Xaml.Input.KeyRoutedEventArgs e) { // 判断用户是否按下了 SIP 上的回车键 if (e.Key == VirtualKey.Enter) { // 转移焦点，虚拟键盘会自动隐藏 txtReadOnly.Focus(FocusState.Programmatic); } } } }
3、PasswordBox 的 Demo
PasswordBoxDemo.xaml
<Page x:Class="XamlDemo.Controls.PasswordBoxDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlDemo.Controls" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="120 0 0 0"> <!-- Password - 密码值 PasswordChar - 密码框所显示显示的密码替代字符。默认值为“●” IsPasswordRevealButtonEnabled - 是否显示“显示密码明文”按钮 --> <PasswordBox Width="200" HorizontalAlignment="Left" MaxLength="16" IsPasswordRevealButtonEnabled="True" /> </StackPanel> </Grid> </Page>
PasswordBoxDemo.xaml.cs
/* * PasswordBox - 密码输入框 */ using Windows.UI.Xaml.Controls; namespace XamlDemo.Controls { public sealed partial class PasswordBoxDemo : Page { public PasswordBoxDemo() { this.InitializeComponent(); } } }
4、RichEditBox 的 Demo
RichEditBoxDemo.xaml
<Page x:Class="XamlDemo.Controls.RichEditBoxDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlDemo.Controls" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="120 0 0 0"> <StackPanel Orientation="Horizontal"> <Button Name="btnBold" Content="加粗" Click="btnBold_Click_1" Margin="0 0 10 0" /> <Button Name="btnItalic" Content="斜体" Click="btnItalic_Click_1" Margin="0 0 10 0" /> <TextBox Name="txtSearch" Width="200" Margin="0 0 10 0" /> <Button Name="btnSearch" Content="搜索" Click="btnSearch_Click_1" /> </StackPanel> <!-- RichEditBox - 富文本编辑器控件 --> <RichEditBox x:Name="txtEditor" Width="320" Height="240" HorizontalAlignment="Left" Margin="0 10 0 0" /> </StackPanel> </Grid> </Page>
RichEditBoxDemo.xaml.cs
/* * RichEditBox - 富文本编辑框 * * 开发一个简单的文本编辑器演示如何通过 RichEditBox 编辑文本 */ using System.Collections.Generic; using Windows.UI; using Windows.UI.Text; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; namespace XamlDemo.Controls { public sealed partial class RichEditBoxDemo : Page { public RichEditBoxDemo() { this.InitializeComponent(); } // 使选中的文字变为斜体 private void btnItalic_Click_1(object sender, RoutedEventArgs e) { // 获取选中的文本 ITextSelection selectedText = txtEditor.Document.Selection; if (selectedText != null) { // 实体化一个 ITextCharacterFormat，指定字符格式为斜体 ITextCharacterFormat charFormatting = selectedText.CharacterFormat; charFormatting.Italic = FormatEffect.Toggle; // 设置选中文本的字符格式 selectedText.CharacterFormat = charFormatting; } } // 使选中的文字加粗 private void btnBold_Click_1(object sender, RoutedEventArgs e) { // 获取选中的文本 ITextSelection selectedText = txtEditor.Document.Selection; if (selectedText != null) { // 实体化一个 ITextCharacterFormat，指定字符格式为加粗 ITextCharacterFormat charFormatting = selectedText.CharacterFormat; charFormatting.Bold = FormatEffect.Toggle; // 设置选中文本的字符格式 selectedText.CharacterFormat = charFormatting; } } // 保存已经被高亮的 ITextRange List<ITextRange> _highlightedWords = new List<ITextRange>(); // 高亮显示用户搜索的字符 private void btnSearch_Click_1(object sender, RoutedEventArgs e) { // 清除高亮字符的高亮效果 ITextCharacterFormat charFormat; for (int i = 0; i < _highlightedWords.Count; i++) { charFormat = _highlightedWords[i].CharacterFormat; charFormat.BackgroundColor = Colors.Transparent; _highlightedWords[i].CharacterFormat = charFormat; } _highlightedWords.Clear(); // 获取全部文本，并将操作点移动到文本的起点 ITextRange searchRange = txtEditor.Document.GetRange(0, TextConstants.MaxUnitCount); searchRange.Move(0, 0); bool textFound = true; do { // 在全部文本中搜索指定的字符串 if (searchRange.FindText(txtSearch.Text, TextConstants.MaxUnitCount, FindOptions.None) < 1) { textFound = false; } else { _highlightedWords.Add(searchRange.GetClone()); // 实体化一个 ITextCharacterFormat，指定字符背景颜色为黄色 ITextCharacterFormat charFormatting = searchRange.CharacterFormat; charFormatting.BackgroundColor = Colors.Yellow; // 设置指定文本的字符格式（高亮效果） searchRange.CharacterFormat = charFormatting; } } while (textFound); } } }
5、RichTextBlock 的 Demo
RichTextBlockDemo.xaml
<Page x:Class="XamlDemo.Controls.RichTextBlockDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlDemo.Controls" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent" > <StackPanel Margin="120 0 0 0"> <!-- RichTextBlock - 用于显示富文本的控件 Blocks - 富文本的内容 Paragraph - 每一个 Paragraph 代表一段内容，其继承自 Block Inlines - 每个 Paragraph 下都有一个内联元素集合，其用法与 TextBlock 的 Inlines 基本相同，不同之处在于只有在 RichTextBlock 中才能使用 InlineUIContainer TextIndent - 指定此段文本的首行的缩进量 注：其他 n 多属性基本同 TextBlock --> <RichTextBlock FontSize="14.667" HorizontalAlignment="Left"> <RichTextBlock.Blocks> <Paragraph TextIndent="20"> Windows 8是由微软公司开发的，具有革命性变化的操作系统。该系统旨在让人们的日常电脑操作更加简单和快捷，为人们提供高效易行的工作环境Windows 8支持来自Intel、AMD和ARM的芯片架构。Windows Phone 8采用和Windows 8相同的NT内核并且内置诺基亚地图。2011年9月14日，Windows 8开发者预览版发布，宣布兼容移动终端，微软将苹果的IOS、谷歌的Android视为Windows 8在移动领域的主要竞争对手。2012年8月2日，微软宣布Windows 8开发完成，正式发布RTM版本。2012年10月将正式推出Windows 8，微软自称触摸革命将开始 </Paragraph> <Paragraph> <InlineUIContainer> <StackPanel HorizontalAlignment="Left"> <TextBlock Text="显示一张图片" /> <Image Source="/Assets/Logo.png" Width="100" Height="100" /> </StackPanel> </InlineUIContainer> </Paragraph> </RichTextBlock.Blocks> </RichTextBlock> </StackPanel> </Grid> </Page>
RichTextBlockDemo.xaml.cs
/* * RichTextBlock - 富文本显示框 */ using Windows.UI.Xaml.Controls; namespace XamlDemo.Controls { public sealed partial class RichTextBlockDemo : Page { public RichTextBlockDemo() { this.InitializeComponent(); } } }
6、RichTextBlockOverflow 的 Demo
RichTextBlockOverflowDemo.xaml
<Page x:Class="XamlDemo.Controls.RichTextBlockOverflowDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlDemo.Controls" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="120 0 0 0" Orientation="Horizontal"> <RichTextBlock HorizontalAlignment="Left" Width="200" Height="100" OverflowContentTarget="{Binding ElementName=txtOverflow}"> <Paragraph> 一打开Windows 8计算机，用户就会发现明显的变化。呈现在用户眼前的不再是熟悉的桌面，而是由漂亮、现代化的瓷贴(tile)以及最适合在触控屏上运行的全屏应用构成的环境。这就是“开始”屏，它取代了Windows用户熟悉的“开始”菜单。开始屏不只是菜单，而是占据整个显示屏的一个完整的计算环境，有自己独立的应用和控件。用户仍然可以使用过去的桌面和老式软件，在Windows 8中，桌面就像另外一款应用，用户可以通过点击开始屏上的图标或按钮运行桌面。 这是一个大胆的举措，基于瓷贴的环境非常好，将受到用户的欢迎。这一环境让人感觉很自然，特别是在触控屏设备上，使Windows进入了平板电脑时代。它可能甚至标志着一个漫长过渡期的开始，新设计将逐步取代原来的设计，当然，这取决于微软吸引新型应用的速度。 Windows将提供两种完全不同的用户体验。微软的目的是提供一款既能在传统PC，也能在平板电脑上运行的操作系统，包括采用触控方式操作的天气应用和采用鼠标操作的Excel都能在Windows 8中运行。这一策略完全不同于苹果，苹果的iPad平板电脑和Mac计算机运行不同的操作系统。 双环境策略可能会让传统PC用户感到困惑。新、旧两种环境都可以通过触控、鼠标、键盘进行操作，但触控更适合新环境，鼠标、键盘更适合旧环境。 Windows 8将带有两种不同版本的IE，许多功能也不相同。例如，新型应用通常缺乏传统应用中的标准菜单、工具条、改变尺寸和关闭按钮。微软坚信用户困惑是暂时的，将被运行Office等传统办公软件的能力所抵消。Office不能在iPad或Android平板电脑上运行。 Windows 8可能给用户带来更多困惑。Windows 8有两种版本：一个版本面向标准的X86 PC，另一款版本――Windows RT面向配置ARM架构芯片的设备。 当然，两种版本之间的区别很大。在X86设备上，用户可以运行新型应用，也可以通过桌面环境运行传统的Windows应用。但是，用户不能在ARM设备上安装和运行传统Windows应用。能同时在X86和ARM设备上运行的唯一一款主要软件是一款新版Office，但ARM版Office不包含Outlook。用户可以通过网络商店下载所有新型应用。 微软将首次推出自主品牌平板电脑Surface，与传统硬件合作伙伴推出的Windows 8和Windows RT平板电脑竞争。 </Paragraph> </RichTextBlock> <!-- RichTextBlock - 富文本显示框 OverflowContentTarget - 当 RichTextBlock 中的内容溢出时，将溢出文字绑定到指定的 RichTextBlockOverflow 中 RichTextBlockOverflow - 用于显示 RichTextBlock 或其他 RichTextBlockOverflow 中的溢出文字 OverflowContentTarget - 当此 RichTextBlockOverflow 中的内容也溢出时，将溢出文字绑定到指定的其他 RichTextBlockOverflow 中 HasOverflowContent - 是否有溢出内容可显示 ContentSource - 源内容，返回对应的 RichTextBlock --> <RichTextBlockOverflow Name="txtOverflow" Width="200" Height="100" OverflowContentTarget="{Binding ElementName=txtOverflow2}" Margin="20 0 0 0" /> <RichTextBlockOverflow Name="txtOverflow2" Width="200" Height="100" OverflowContentTarget="{Binding ElementName=txtOverflow3}" Margin="20 0 0 0" /> <RichTextBlockOverflow Name="txtOverflow3" Width="200" Height="100" Margin="20 0 0 0" /> </StackPanel> </Grid> </Page>
RichTextBlockOverflowDemo.xaml.cs
/* * RichTextBlockOverflow - 溢出文本显示框，用于显示 RichTextBlock 或其他 RichTextBlockOverflow 中的溢出文字 */ using Windows.UI.Xaml.Controls; namespace XamlDemo.Controls { public sealed partial class RichTextBlockOverflowDemo : Page { public RichTextBlockOverflowDemo() { this.InitializeComponent(); } } }
OK
[源码下载]
