穩扎穩打Silverlight(63) - 5.0文本之Character Spacing, RichTextBlock 和 RichTextBlockOverflow, TextOptions

[索引頁]
[源碼下載]

穩扎穩打Silverlight(63) - 5.0文本之Character Spacing, RichTextBlock 和 RichTextBlockOverflow, TextOptions

作者：webabcd


介紹
Silverlight 5.0 文本

• Character Spacing - 字符間距
• RichTextBlock 和 RichTextBlockOverflow - 只讀 RichTextBox 及文本溢出后的顯示方式
• TextOptions - 文字清晰方式

在線DEMO
http://www.cnblogs.com/webabcd/archive/2012/03/05/2379862.html


示例
1、Character Spacing（字符間距）
Text/CharacterSpacing.xaml

<navigation:Page x:Class="Silverlight50.Text.CharacterSpacing" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="CharacterSpacing Page">
    <StackPanel>
        
        <!--
            設置行間距，可參考 http://www.cnblogs.com/webabcd/archive/2008/10/20/1314770.html 中的 LineHeight 和 LineStackingStrategy 
        -->
        
        <!--
            CharacterSpacing - 用於設置字符間距
                具體字符間隔像素計算公式如下：字體大小 * CharacterSpacing值 / 1000 = 字符間距像素值
        -->
        
        <TextBlock Text="aaaaaaaaaaaaaaaaaa" />
        <TextBlock Text="aaaaaaaaaaaaaaaaaa" CharacterSpacing="100" />
        <TextBlock Text="aaaaaaaaaaaaaaaaaa" CharacterSpacing="1000" />
        <TextBlock Text="aaaaaaaaaaaaaaaaaa" FontSize="32" CharacterSpacing="1000" />
        
    </StackPanel>
</navigation:Page>

2、RichTextBlock 和 RichTextBlockOverflow（只讀 RichTextBox 及文本溢出后的顯示方式）
Text/RichTextBlockOverflow.xaml

<navigation:Page x:Class="Silverlight50.Text.RichTextBlockOverflow" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="RichTextBlockOverflow Page">
    <StackPanel>

        <!--
            RichTextBlock - 一個只讀的 RichTextBox
                OverflowContentTarget - 當 RichTextBlock 中的內容溢出時，將溢出文字綁定到指定的 RichTextBlockOverflow 中
        
            RichTextBlockOverflow - 用於顯示 RichTextBlock 或其他 RichTextBlockOverflow 中的溢出文字
                OverflowContentTarget - 當此 RichTextBlockOverflow 中的內容也溢出時，將溢出文字綁定到指定的其他 RichTextBlockOverflow 中
        -->
        
        <RichTextBlock HorizontalAlignment="Left" Width="200" Height="100" OverflowContentTarget="{Binding ElementName=txtOverflow}">
            <Paragraph>
                Microsoft Silverlight是微軟所發展的 Web 前端應用程序開發解決方案，是微軟豐富型互聯網應用程序（Rich Internet Application）策略的主要應用程序開發平台之一，以瀏覽器的外掛組件方式，提供 Web 應用程序中多媒體（含影音流與音效流）與高度交互性前端應用程序的解決方案，同時它也是微軟 UX（用戶經驗）策略中的一環，也是微軟試圖將美術設計和程序開發人員的工作明確切分與協同合作發展應用程序的嘗試之一。                
            </Paragraph>
        </RichTextBlock>

        <RichTextBlockOverflow Name="txtOverflow" HorizontalAlignment="Left" Margin="100" />

    </StackPanel>
</navigation:Page>

3、TextOptions（文字清晰方式）
Text/TextOptions.xaml

<navigation:Page x:Class="Silverlight50.Text.TextOptions" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="TextOptions Page">
    <StackPanel>

        <!--
            TextOptions.TextFormattingMode - 文字的格式化模式
                Display - 采用度量的方式在整個像素范圍內繪制文字
                Ideal - 相對沒有 Display 清晰（默認值）

            TextOptions.TextHintingMode - 文字的呈現行為
                Fixed - 文本無動畫效果時效果好（默認值）
                Animated - 文本有動畫效果時效果好

            TextOptions.TextRenderingMode - 文字的渲染方式
                Auto - 自動，默認會使用 ClearType（默認值）
                Aliased - 雙層抗鋸齒
                Grayscale - 灰度抗鋸齒
                ClearType - 平滑方式，使用最合適的方式來呈現文本
        -->
        
        <TextBlock Text="中文中文中文 Default（Ideal Fixed Auto）" />

        <TextBlock Text="中文中文中文 Ideal, Fixed, Auto" TextOptions.TextFormattingMode="Ideal" TextOptions.TextHintingMode="Fixed" TextOptions.TextRenderingMode="Auto" />
        <TextBlock Text="中文中文中文 Ideal, Fixed, Aliased" TextOptions.TextFormattingMode="Ideal" TextOptions.TextHintingMode="Fixed" TextOptions.TextRenderingMode="Aliased" />
        <TextBlock Text="中文中文中文 Ideal, Fixed, Grayscale" TextOptions.TextFormattingMode="Ideal" TextOptions.TextHintingMode="Fixed" TextOptions.TextRenderingMode="Grayscale" />
        <TextBlock Text="中文中文中文 Ideal, Fixed, Cleartype" TextOptions.TextFormattingMode="Ideal" TextOptions.TextHintingMode="Fixed" TextOptions.TextRenderingMode="ClearType" />

        <TextBlock Text="中文中文中文 Ideal, Animated, Auto" TextOptions.TextFormattingMode="Ideal" TextOptions.TextHintingMode="Animated" TextOptions.TextRenderingMode="Auto" />
        <TextBlock Text="中文中文中文 Ideal, Animated, Aliased" TextOptions.TextFormattingMode="Ideal" TextOptions.TextHintingMode="Animated" TextOptions.TextRenderingMode="Aliased" />
        <TextBlock Text="中文中文中文 Ideal, Animated, Grayscale" TextOptions.TextFormattingMode="Ideal" TextOptions.TextHintingMode="Animated" TextOptions.TextRenderingMode="Grayscale" />
        <TextBlock Text="中文中文中文 Ideal, Animated, Cleartype" TextOptions.TextFormattingMode="Ideal" TextOptions.TextHintingMode="Animated" TextOptions.TextRenderingMode="ClearType" />

        <TextBlock Text="中文中文中文 Display, Fixed, Auto" TextOptions.TextFormattingMode="Display" TextOptions.TextHintingMode="Fixed" TextOptions.TextRenderingMode="Auto" />
        <TextBlock Text="中文中文中文 Display, Fixed, Aliased" TextOptions.TextFormattingMode="Display" TextOptions.TextHintingMode="Fixed" TextOptions.TextRenderingMode="Aliased" />
        <TextBlock Text="中文中文中文 Display, Fixed, Grayscale" TextOptions.TextFormattingMode="Display" TextOptions.TextHintingMode="Fixed" TextOptions.TextRenderingMode="Grayscale" />
        <TextBlock Text="中文中文中文 Display, Fixed, Cleartype" TextOptions.TextFormattingMode="Display" TextOptions.TextHintingMode="Fixed" TextOptions.TextRenderingMode="ClearType" />

        <TextBlock Text="中文中文中文 Display, Animated, Auto" TextOptions.TextFormattingMode="Display" TextOptions.TextHintingMode="Animated" TextOptions.TextRenderingMode="Auto" />
        <TextBlock Text="中文中文中文 Display, Animated, Aliased" TextOptions.TextFormattingMode="Display" TextOptions.TextHintingMode="Animated" TextOptions.TextRenderingMode="Aliased" />
        <TextBlock Text="中文中文中文 Display, Animated, Grayscale" TextOptions.TextFormattingMode="Display" TextOptions.TextHintingMode="Animated" TextOptions.TextRenderingMode="Grayscale" />
        <TextBlock Text="中文中文中文 Display, Animated, Cleartype" TextOptions.TextFormattingMode="Display" TextOptions.TextHintingMode="Animated" TextOptions.TextRenderingMode="ClearType" />

    </StackPanel>
</navigation:Page>

OK
[源碼下載]