Silverlight4Beta之RichTextArea

Silverlight4Beta4发布了，大量的新特性让我们这些sl fans兴奋不已。接下来的日子里我会根据一些官方资料为大家介绍sl4Beta中的新玩意。

在Silverlight4中新加入的RichTextArea控件允许通过更多的途径显示富文本。我们可以将其看做WPF中富文本支持的轻量级版本。

新的System.Windows.Documents命名空间包含以下类

• Paragraph
• Hyperlink
• Inline
• InlineUIContainer
• LineBreak
• Run
• Span

我们可以通过使用这些类在RichTextArea中显示富文本。

RichTextArea控件的Blocks属性（其为Content类型）是一系列Block（现在主要是Paragraph ）的集合。

Paragraph类是一系列Inlines的集合，这些Inline可以是Span, InlineUIContainer, Run, LineBreak, Hyperlink 等等。

这就意味着我们可以将上面所列的元素结合起来在通过RichTextArea显示富文本内容：

<UserControl
    x:Class="SilverlightApplication27.MainPage"
    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"
    d:DesignHeight="300"
    d:DesignWidth="400">

    <Grid
        x:Name="LayoutRoot"
        Background="White">
        <RichTextArea
            TextWrapping="Wrap"
            IsReadOnly="False">
            <Paragraph>The quick brown fox jumped over the lazy dog</Paragraph>
            <Paragraph
                TextDecorations="Underline"
                FontSize="24"
                TextAlignment="Right"
                FontFamily="Courier New">The quick brown fox jumped over the lazy dog
            </Paragraph>
            <Paragraph>
                The quick brown fox jumped over the lazy dog
                <LineBreak />
                The quick brown fox jumped over the lazy dog
                <LineBreak />
                <Italic>
                    The quick brown fox jumped over the lazy dog
                </Italic>
            </Paragraph>
            <Paragraph>
                The quick brown fox jumped over the lazy dog
                <InlineUIContainer>
                    <Rectangle
                        Margin="2"
                        Fill="Red"
                        Width="48"
                        Height="12" />
                </InlineUIContainer> with a red rectangle
            </Paragraph>
            <Paragraph>
                <Hyperlink
                    NavigateUri="http://www.microsoft.com"
                    TargetName="">Go to Microsoft.com</Hyperlink>
            </Paragraph>
            <Paragraph>
                <Run
                    Text="The quick brown " />
                <Run >fox jumped over the lazy dog</Run>
            </Paragraph>
            <Paragraph>
                <Span FontSize="24">
                    <Run>The quick brown fox jumped over the lazy dog</Run>
                    <Run>The quick brown fox jumped over the lazy dog</Run>
                </Span>
            </Paragraph>
        </RichTextArea>
    </Grid>
</UserControl>

上面的代码中给出了Paragraph, Span, Run, Hyperlink, InlineUIContainer的示例，其中最强大的是InlineUIContainer，它允许我们将任何UI元素放入文档。

运行截图如下：

并且它不是只读的，我们可以在运行时任意修改其内容：

我们甚至可以删除那个红色的矩形。而且它还支持撤销、重做操作。

当然，所有的这些XAML标记的元素也都可以使用编程的方式创建和控制，从而实现绑定，动画等等。

我们也可以将Silverlight中的其他元素放到InlineUIContainer中，比如我在下面的代码中放入一个Button：

<UserControl
    x:Class="SilverlightApplication27.MainPage"
    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"
    d:DesignHeight="300"
    d:DesignWidth="400">

    <Grid
        x:Name="LayoutRoot"
        Background="White">
        <RichTextArea
            TextWrapping="Wrap"
            IsReadOnly="False">
            <Paragraph>
                This is some text and then there's a piece of UI
                <LineBreak />
                <InlineUIContainer>
                    <Button
                        Content="Click Me" 
                        Click="Button_Click"/>
                </InlineUIContainer>
                <LineBreak />
                and then there's some more text and some space for more still;
                <LineBreak />
                <Run
                    x:Name="runToModify" />
            </Paragraph>
        </RichTextArea>
    </Grid>
</UserControl>

由于RichTextArea处于可编辑（IsReadOnly="False"）状态下，所以这里的Button的IsEnabled为False。下面我将RichTextArea的IsReadOnly改为True

<RichTextArea
            TextWrapping="Wrap"
            IsReadOnly="True">

这样我们的Button就可用了，我们再为其添加一个点击事件：

public partial class MainPage : UserControl {
    public MainPage() {
        InitializeComponent();
    }

    private void Button_Click(object sender, RoutedEventArgs e) {
        runToModify.Text = "dynamically added some more text";
    }
}

嘿嘿，结果符合预期：

RichTextArea提供了很多事件，比如TextInputEvent, TextInputStartEvent, TextInputUpdateEvent等，它还有一个很有用的Selection属性。

OK,have fun with silverlight！