程式師世界 >> 編程語言 >> .NET網頁編程 >> 關於.NET >> Windows 8 Store Apps學習(1) 文本控件

Windows 8 Store Apps學習(1) 文本控件

編輯：關於.NET

TextBlock, TextBox, PasswordBox, RichEd

介紹

重新想象 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 &quot;的常用屬性&quot;" 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();   
        }   
    }   
}

[源碼下載]：http://files.cnblogs.com/webabcd/Windows8.rar