[Windows 8 App]文字編輯控制項-----RichEditBox

2013-12-02

RichEditBox控制項

多正文格式是一種跨平台的文件格式

在這種格式下可以編輯文字、圖片、連結等等內容

通過RichEditBox控制項就可以對多正文格式的文件進行編輯

我們透過下面的範例來說明

新增一個專案【RichEditBox】，在【MainPage.xaml】的Grid中新增一個RichEditBox、二個Button

新增完畢後，輸入以下程式碼：

<Page
    x:Class="RichEditBox.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:RichEditBox"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <RichEditBox Name="EditorDocument" FontSize="40" Margin="221,109,232,305" Background="White" />
        <Button Name="OpenButton" Content="打開多正文格式文件" FontSize="40" Margin="221,544,0,125" Width="445" Height="99" Click="OpenButton_Click" />
        <Button Name="SaveButton" Content="儲存多正文格式文件" FontSize="40" Margin="698,544,0,125" Width="436" Height="99" Click="SaveButton_Click" />
    </Grid>
</Page>

設計畫面：

設計完畢後，在Grid中有兩個按鈕

首先，先點擊【打開多正文格式文件】的按鈕兩下

就會開啟【MainPage.xaml.cs】

在【MainPage.xaml.cs】的【OpenButton_Click】事件中，輸入以下程式碼

Windows.Storage.Pickers.FileOpenPicker picker = new Windows.Storage.Pickers.FileOpenPicker();

            picker.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.DocumentsLibrary;

            picker.FileTypeFilter.Add(".doc");

            Windows.Storage.StorageFile file = await picker.PickSingleFileAsync();

            randAccStream = await file.OpenAsync(Windows.Storage.FileAccessMode.ReadWrite);

            EditorDocument.Document.LoadFromStream(Windows.UI.Text.TextSetOptions.FormatRtf,randAccStream);

然後，換【SaveButton_Click】事件中，輸入以下程式碼

EditorDocument.Document.SaveToStream(Windows.UI.Text.TextGetOptions.FormatRtf,randAccStream);

完整的【MainPage.xaml.cs】程式碼：

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Windows.Storage.Streams;

// 空白頁項目範本已記錄在 http://go.microsoft.com/fwlink/?LinkId=234238

namespace RichEditBox
{
    /// <summary>
    /// 可以在本身使用或巡覽至框架內的空白頁面。
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

        }
        

        /// <summary>
        /// 在此頁面即將顯示在框架中時叫用。
        /// </summary>
        /// <param name="e">描述如何到達此頁面的事件資料。Parameter
        /// 屬性通常用來設定頁面。</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }
        public IRandomAccessStream randAccStream;
        private async void OpenButton_Click(object sender, RoutedEventArgs e)
        {
            Windows.Storage.Pickers.FileOpenPicker picker = new Windows.Storage.Pickers.FileOpenPicker();

            picker.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.DocumentsLibrary;

            picker.FileTypeFilter.Add(".rtf");

            Windows.Storage.StorageFile file = await picker.PickSingleFileAsync();

            randAccStream = await file.OpenAsync(Windows.Storage.FileAccessMode.ReadWrite);

            EditorDocument.Document.LoadFromStream(Windows.UI.Text.TextSetOptions.FormatRtf,randAccStream);
        }

        private void SaveButton_Click(object sender, RoutedEventArgs e)
        {
            EditorDocument.Document.SaveToStream(Windows.UI.Text.TextGetOptions.FormatRtf,randAccStream);
        }
    }
}

專案的執行畫面：

這是一個RTF文件，裡面是一段測試文

我們執行專案

點擊【打開多正文格式文件】，選擇【測試RTF】的文件，裡面是【測試RTF】的一段文字

我們編輯裡面的文字，修改成下列的文字，修改完成後典籍【儲存多正文格式文件】

我們開啟儲存起來的RTF文件看看裡面有沒有修改成我們所儲存的文字

我們所修改的文字有被存取起來

回首頁