控件（文本类）: TextBox, PasswordBox

介绍
背水一战 Windows 10 之控件（文本类）

TextBox
PasswordBox

示例
1、TextBox 的示例 1
Controls/TextControl/TextBoxDemo1.xaml

<Page

    x:Class="Windows10.Controls.TextControl.TextBoxDemo1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Windows10.Controls.TextControl"

    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="10 0 10 10">

            <!--

                TextBox - 文本输入框

                    Text - 文本值

                    Header - 可以设置一个纯文本，不能命中测试，空 Header 的话不会占用任何空间

                    HeaderTemplate - 可以将 Header 设置为任何 xaml，且支持命中测试

                    MaxLength - 最大字符数（默认是 0 代表无限制）

                    PlaceholderText - 占位符水印

                    AcceptsReturn - 是否允许输入和显示回车符和换行符

                    IsSpellCheckEnabled - 是否开启拼写检查功能

                    IsTextPredictionEnabled - 是否开启输入预测功能

                    DesiredCandidateWindowAlignment - IME 的对齐方式（IME - Input Method Editor; SIP - Soft Input Panel）

                        Default - 当使用硬键盘时，IME 会随着光标移动；当使用软键盘时，IME 停靠于 SIP

                        BottomEdge - 当使用硬键盘时，IME 会与文本编辑控件的底部边缘和左侧对齐（经测试仅微软输入法有效，也许是第三方输入法没有实现某个接口）；当使用软键盘时，IME 停靠于 SIP

            -->

            <TextBox Name="textBox1" Margin="5" Height="100"

                     Header="文本框"

                     PlaceholderText="enter your text"

                     MaxLength="32"

                     TextWrapping="Wrap"

                     AcceptsReturn="True"

                     IsSpellCheckEnabled="False"

                     IsTextPredictionEnabled="True"

                     DesiredCandidateWindowAlignment="Default" />

            <TextBox Name="textBox2" Margin="5"

                     Text="textBox2"

                     TextAlignment="Center"

                     IsReadOnly ="True">

                <TextBox.HeaderTemplate>

                    <DataTemplate>

                        <TextBlock Text="文本框" Foreground="Red" />

                    </DataTemplate>

                </TextBox.HeaderTemplate>

            </TextBox>

            <!--

                InputScope - 指定 SIP（Soft Input Panel）的类型

            -->

            <TextBox Name="textBox3" Margin="5" InputScope="Number" />

            <!--

                在 CodeBehind 端设置此 TextBox 的 InputScope

            -->

            <TextBox Name="textBox4" Margin="5" />

            <!--

                TextWrapping - 换行方式

                    NoWrap - 不换行

                    Wrap - 换行，必要时可截断单词

                    WrapWholeWords - 换行，但是绝不截断单词，即使单词可能会显示不全（经测试无效，TextBlock 是支持的）

            -->

            <TextBox Width="100" HorizontalAlignment="Left" Text="abcdefghijklmnopq www" Margin="5" TextWrapping="NoWrap" />

            <TextBox Width="100" HorizontalAlignment="Left" Text="abcdefghijklmnopq www" Margin="5" TextWrapping="Wrap" />

            <!--

                 TextAlignment - 文本的水平对齐方式

                    Center, Left（默认值）, Right, Justify（两端对齐，经测试无效，TextBlock 是支持的）

            -->

            <TextBox Text="i am a &quot;TextBlock&quot;" Margin="5" TextAlignment="Right" />

        </StackPanel>

    </Grid>

</Page>

Controls/TextControl/TextBoxDemo1.xaml.cs

/*

 * TextBox - 文本输入框（继承自 Control, 请参见 /Controls/BaseControl/ControlDemo/）

 */

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Input;

namespace Windows10.Controls.TextControl

{

    public sealed partial class TextBoxDemo1 : Page

    {

        public TextBoxDemo1()

        {

            this.InitializeComponent();

            this.Loaded += TextBoxDemo1_Loaded;

        }

        private void TextBoxDemo1_Loaded(object sender, RoutedEventArgs e)

        {

            // 在 CodeBehind 端设置 TextBox 的 InputScope

            InputScope scope = new InputScope();

            InputScopeName name = new InputScopeName();

            name.NameValue = InputScopeNameValue.ChineseFullWidth;

            scope.Names.Add(name);

            textBox4.InputScope = scope;

        }

    }

}

2、TextBox 的示例 2
Controls/TextControl/TextBoxDemo2.xaml

<Page

    x:Class="Windows10.Controls.TextControl.TextBoxDemo2"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Windows10.Controls.TextControl"

    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="10 0 10 10">

            <!--用于显示 Segoe UI Emoji 字符-->

            <TextBox Name="textBox1" Margin="5" TextWrapping="Wrap" />

            <TextBox Name="textBox2" Margin="5" />

            <TextBlock Name="textBlock2" Margin="5" />

            <TextBox Name="textBox3" Margin="5" />

            <ScrollViewer Margin="5" Height="300">

                <TextBlock Name="textBlock3" />

            </ScrollViewer>

        </StackPanel>

    </Grid>

</Page>

Controls/TextControl/TextBoxDemo2.xaml.cs

/*

 * TextBox - 文本输入框（继承自 Control, 请参见 /Controls/BaseControl/ControlDemo/）

 *     IsColorFontEnabled - 是否以彩色方式显示 Segoe UI Emoji 之类的字符（默认值是 true）

 *     SelectAll() - 选中全部内容（先要获取焦点后，才能做这个操作）

 *     Select(int start, int length) - 选中指定范围的内容（先要获取焦点后，才能做这个操作）

 *     SelectedText - 选中的内容

 *     SelectionStart - 选中内容的起始位置

 *     SelectionLength - 选中内容的字符数

 *     SelectionHighlightColor - 选中文本的颜色

 *     PreventKeyboardDisplayOnProgrammaticFocus - 通过 FocusState.Programmatic 让 TextBox 获取焦点时，是否不显示软键盘

 *     GetLinguisticAlternativesAsync() - 获取输入法编辑器 (IME) 窗口中的候选词列表（经测试仅微软输入法有效，也许是第三方输入法没有实现某个接口）

 *     GetRectFromCharacterIndex(int charIndex, bool trailingEdge) - 获取指定字符的边缘位置的 Rect 对象

 *         charIndex - 字符的位置

 *         trailingEdge - false 代表前边缘（左边缘），true 代表后边缘（右边缘）

 *

 *     TextBox 的相关事件的说明详见代码部分的注释

 */

using System;

using System.Text;

using Windows.UI;

using Windows.UI.Popups;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Media;

namespace Windows10.Controls.TextControl

{

    public sealed partial class TextBoxDemo2 : Page

    {

        public TextBoxDemo2()

        {

            this.InitializeComponent();

            this.Loaded += TextBoxDemo2_Loaded;

        }

        private void TextBoxDemo2_Loaded(object sender, RoutedEventArgs e)

        {

            // 显示 Segoe UI Emoji 字符

            StringBuilder strContect = new StringBuilder();

            for (int code = 0x1F600; code < 0x1F6C6; code++)

            {

                strContect.Append(char.ConvertFromUtf32(code));

            }

            // 是否以彩色方式显示 Segoe UI Emoji 之类的字符（默认值是 true）

            textBox1.IsColorFontEnabled = true;

            textBox1.Text = strContect.ToString();

            textBox2.Text = "123456";

            // 当通过 FocusState.Programmatic 让 textBox2 获取焦点时，不显示软键盘

            textBox2.PreventKeyboardDisplayOnProgrammaticFocus = true;

            // 通过 FocusState.Programmatic 让 textBox2 获取焦点

            textBox2.Focus(FocusState.Programmatic);

            // 获取焦点后，才能 Select() 或 SelectAll()

            textBox2.Select(1, 4); // SelectAll() - 选中全部

            textBox2.SelectionHighlightColor = new SolidColorBrush(Colors.Orange);

            textBlock2.Text = "SelectedText: " + textBox2.SelectedText;

            textBlock2.Text += Environment.NewLine;

            textBlock2.Text += "SelectionStart: " + textBox2.SelectionStart;

            textBlock2.Text += Environment.NewLine;

            textBlock2.Text += "SelectionLength: " + textBox2.SelectionLength;

            textBlock2.Text += Environment.NewLine;

            // 获取第 1 个字符的左边缘的 Rect 对象

            textBlock2.Text += "GetRectFromCharacterIndex(0, false): " + textBox2.GetRectFromCharacterIndex(0, false).ToString();

            textBlock2.Text += Environment.NewLine;

            // 获取第 1 个字符的右边缘的 Rect 对象

            textBlock2.Text += "GetRectFromCharacterIndex(0, true): " + textBox2.GetRectFromCharacterIndex(0, true).ToString();

            // TextBox 的相关事件的说明及演示如下

            // 当文本发生变化时触发的事件

            textBox3.TextChanging += TextBox3_TextChanging;

            // 当文本发生变化后触发的事件

            textBox3.TextChanged += TextBox3_TextChanged;

            // 选中的文本发生变化后触发的事件

            textBox3.SelectionChanged += TextBox3_SelectionChanged;

            // 在 TextBox 中做粘贴操作时触发的事件

            textBox3.Paste += TextBox3_Paste;

            // 在 TextBox 中打开上下文菜单时触发的事件（触摸屏长按或鼠标右键）

            textBox3.ContextMenuOpening += TextBox3_ContextMenuOpening;

            // 在打开、更新或关闭输入法编辑器 (IME) 窗口时触发的事件（经测试仅微软输入法有效，也许是第三方输入法没有实现某个接口）

            textBox3.CandidateWindowBoundsChanged += TextBox3_CandidateWindowBoundsChanged;

            // 当通过输入方法编辑器 (IME) 组成的文本出现变化时触发的事件

            textBox3.TextCompositionChanged += TextBox3_TextCompositionChanged;

            // 当用户开始通过输入方法编辑器 (IME) 组成文本时触发的事件

            textBox3.TextCompositionStarted += TextBox3_TextCompositionStarted;

            // 当用户停止通过输入方法编辑器 (IME) 组成文本时触发的事件

            textBox3.TextCompositionEnded += TextBox3_TextCompositionEnded;

        }

        private void TextBox3_TextChanging(TextBox sender, TextBoxTextChangingEventArgs args)

        {

            textBlock3.Text += "TextChanging: " + textBox3.Text;

            textBlock3.Text += Environment.NewLine;

        }

        private void TextBox3_TextChanged(object sender, TextChangedEventArgs e)

        {

            textBlock3.Text += "TextChanged: " + textBox3.Text;

            textBlock3.Text += Environment.NewLine;

        }

        private void TextBox3_SelectionChanged(object sender, RoutedEventArgs e)

        {

            textBlock3.Text += "SelectionChanged: " + textBox3.SelectedText;

            textBlock3.Text += Environment.NewLine;

        }

        private async void TextBox3_Paste(object sender, TextControlPasteEventArgs e)

        {

            await new MessageDialog("禁用粘贴").ShowAsync();

            // 将路由事件设置为已处理，从而禁用粘贴功能

            e.Handled = true;

        }

        private void TextBox3_ContextMenuOpening(object sender, ContextMenuEventArgs e)

        {

            textBlock3.Text += "ContextMenuOpening";

            textBlock3.Text += Environment.NewLine;

        }

        private void TextBox3_CandidateWindowBoundsChanged(TextBox sender, CandidateWindowBoundsChangedEventArgs args)

        {

            // CandidateWindowBoundsChangedEventArgs.Bounds - 获取 IME 窗口的 Rect 对象

            textBlock3.Text += "CandidateWindowBoundsChanged: " + args.Bounds.ToString();

            textBlock3.Text += Environment.NewLine;

        }

        private async void TextBox3_TextCompositionChanged(TextBox sender, TextCompositionChangedEventArgs args)

        {

            // TextCompositionChangedEventArgs.StartIndex - 通过 IME 组成的文本的起始位置

            // TextCompositionChangedEventArgs.Length - 通过 IME 组成的文本的长度

            textBlock3.Text += $"TextCompositionChanged StartIndex:{args.StartIndex}, Length:{args.Length}";

            textBlock3.Text += Environment.NewLine;

            // GetLinguisticAlternativesAsync() - 获取输入法编辑器 (IME) 窗口中的候选词列表（经测试仅微软输入法有效，也许是第三方输入法没有实现某个接口）

            var candidateWords = await textBox3.GetLinguisticAlternativesAsync();

            textBlock3.Text += "candidate words: " + string.Join(",", candidateWords); ;

            textBlock3.Text += Environment.NewLine;

        }

        private void TextBox3_TextCompositionStarted(TextBox sender, TextCompositionStartedEventArgs args)

        {

            // TextCompositionStartedEventArgs.StartIndex - 通过 IME 组成的文本的起始位置

            // TextCompositionStartedEventArgs.Length - 通过 IME 组成的文本的长度

            textBlock3.Text += $"TextCompositionStarted StartIndex:{args.StartIndex}, Length:{args.Length}";

            textBlock3.Text += Environment.NewLine;

        }

        private void TextBox3_TextCompositionEnded(TextBox sender, TextCompositionEndedEventArgs args)

        {

            // TextCompositionEndedEventArgs.StartIndex - 通过 IME 组成的文本的起始位置

            // TextCompositionEndedEventArgs.Length - 通过 IME 组成的文本的长度

            textBlock3.Text += $"TextCompositionEnded StartIndex:{args.StartIndex}, Length:{args.Length}";

            textBlock3.Text += Environment.NewLine;

        }

    }

}

3、PasswordBox 的示例
Controls/TextControl/PasswordBoxDemo.xaml

<Page

    x:Class="Windows10.Controls.TextControl.PasswordBoxDemo"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Windows10.Controls.TextControl"

    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="10 0 10 10">

            <!--

                PasswordBox - 密码输入框

                    Password - 密码值

                    PasswordChar - 密码框所显示显示的密码替代字符。默认值为“●”

                    IsPasswordRevealButtonEnabled - 是否显示“显示密码明文”按钮（弃用了）

                    PasswordRevealMode - 密码显示方式

                        Peek - 密文显示，按下“显示密码明文”按钮时显示明文（默认值）

                        Hidden - 密文显示，“显示密码明文”按钮不可见

                        Visible - 明文显示，“显示密码明文”按钮不可见

                    Header - 可以设置一个纯文本，不能命中测试，空 Header 的话不会占用任何空间

                    HeaderTemplate - 可以将 Header 设置为任何 xaml，且支持命中测试

                    MaxLength - 最大字符数（默认是 0 代表无限制）

                    PlaceholderText - 占位符水印

            -->

            <PasswordBox Name="passwordBox1" Width="200" Margin="5" HorizontalAlignment="Left"

                         Header="密码"

                         PlaceholderText="enter your password"

                         MaxLength="6"

                         PasswordChar="@"

                         PasswordRevealMode="Peek" />

            <PasswordBox Name="passwordBox2" Width="200" Margin="5" HorizontalAlignment="Left">

                <PasswordBox.HeaderTemplate>

                    <DataTemplate>

                        <TextBlock Text="密码" Foreground="Red" />

                    </DataTemplate>

                </PasswordBox.HeaderTemplate>

            </PasswordBox>

            <TextBlock Name="textBlock" Margin="5" />

        </StackPanel>

    </Grid>

</Page>

Controls/TextControl/PasswordBoxDemo.xaml.cs

/*

 * PasswordBox - 密码输入框（继承自 Control, 请参见 /Controls/BaseControl/ControlDemo/）

 *     Password - 密码值

 *     SelectAll() - 选中 PasswordBox 中的所有字符（先要获取焦点后，才能做这个操作）

 *     SelectionHighlightColor - 选中文本的颜色

 *     PreventKeyboardDisplayOnProgrammaticFocus - 通过 FocusState.Programmatic 让 PasswordBox 获取焦点时，是否不显示软键盘

 *     PasswordChanged - Password 属性值发生变化时触发的事件

 *     Paste - 在 PasswordBox 中做粘贴操作时触发的事件

 *     ContextMenuOpening - 在 PasswordBox 中打开上下文菜单时触发的事件（触摸屏长按或鼠标右键）

 */

using System;

using Windows.UI;

using Windows.UI.Popups;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Media;

namespace Windows10.Controls.TextControl

{

    public sealed partial class PasswordBoxDemo : Page

    {

        public PasswordBoxDemo()

        {

            this.InitializeComponent();

            this.Loaded += PasswordBoxDemo_Loaded;

        }

        private void PasswordBoxDemo_Loaded(object sender, RoutedEventArgs e)

        {

            passwordBox2.Password = "123456";

            // 当通过 FocusState.Programmatic 让 passwordBox2 获取焦点时，不显示软键盘

            passwordBox2.PreventKeyboardDisplayOnProgrammaticFocus = true;

            // 通过 FocusState.Programmatic 让 passwordBox2 获取焦点

            passwordBox2.Focus(FocusState.Programmatic);

            passwordBox2.SelectAll(); // 先要获取焦点后，才能做这个操作

            passwordBox2.SelectionHighlightColor = new SolidColorBrush(Colors.Orange);

            passwordBox2.PasswordChanged += (x, y) =>

            {

                textBlock.Text = passwordBox2.Password;

            };

            passwordBox2.Paste += async (x, y) =>

            {

                await new MessageDialog("禁用粘贴").ShowAsync();

                // 将路由事件设置为已处理，从而禁用粘贴功能

                y.Handled = true;

            };

            passwordBox2.ContextMenuOpening += (x, y) =>

            {

                // 触发条件：触摸屏长按或鼠标右键

            };

        }

    }

}

秒客网

控件（文本类）: TextBox, PasswordBox

相关文章