Windows phone中用RichTextBox實現文字、圖片混合排版

看微博、或者qq空間時，經常能看到這種文字加圖片的例子：

我最開始的思路是用幾個stackpanel，幾個TextBox，幾個image來實現，實現起來很是麻煩。微軟為我們提供了很好的解決方案，richtextbox就是很好的選擇；具體可參考 http://msdn.microsoft.com/zh-cn/library/ee681613(v=VS.95).aspx 。

這裡我簡單實現了一文混排。

思路是這樣的：首先我們希望能把圖片文字，同一般的文字分離開來，便於我們產生文字還是圖片。

               例如：  "大家好，hello，希望大家喜歡[disdain]，開心哦[joyful]哈哈哈！"

               我們可以把它拆分成 :    "大家好，hello，希望大家喜歡"  +  "[disdain]"  +  "，開心哦"  +  "[joyful]"  +"哈哈哈！" 

               其中第一個我們叫它一般字元，第二個表示圖片的我們叫它圖片字元。

               於是我們希望定義一個數組來存這5個欄位。於是我們定義一個string[] 數組

               並且分別定義兩個字串來分別來賦值 一般字元 和  圖片字元。

               接下來就是一些篩選加判斷將一般字元和圖片字元分離開來，具體實現方法在My Code裡大家可以參考一下（方法有很多種，我的有些繁瑣，歡迎大家分享一下更簡便的方法。）

               需要原始碼的留下郵箱，我發給你們。

1.篩選方法：

 1   string abc = "大家好，hello，希望大家喜歡[disdain]，開心哦[joyful]哈哈哈！";  //我們要轉換成文字加圖片的內容 2         public MainPage() 3         { 4             InitializeComponent(); 5  6             ObservableCollection<FaceItem> faceItemList = new ObservableCollection<FaceItem>(); 7        8             FaceItem item1 = new FaceItem { FaceName = "[disdain]", FaceUri = "Emotions/[disdain].png" }; 9          10             FaceItem item2 = new FaceItem { FaceName = "[joyful]", FaceUri = "Emotions/[joyful].png" };11        12             faceItemList.Add(item1);13             faceItemList.Add(item2);14          15             this.FaceList.ItemsSource = faceItemList;16 17 18             char[] abcs = abc.ToCharArray();           //將需要轉換的內容轉換成char數組，便於我們進行篩選操作，例如：“大家好，hello，希望大家喜歡[disdain]，開心哦[joyful]哈哈哈！”19             string strs = "";                          //文字（非"[]"類型的文字）  例如：“大家好，hello，希望大家喜歡”20             string strface = "";                       //圖片（"[]"類型的文字）    例如：“[disdain]”21             List<string> list = new List<string>();    //我們把文字和圖片放入其中，最後我們通過遍曆這個list來動態為richbox新增內容22             for (int i = 0; i < abcs.Count(); i++)23             {24                 if (abcs[i].ToString() != "[")           25                 {26                     for (int j = 0; j < abcs.Count() - i ; j++)27                     {28                         if (abcs[i + j].ToString() != "[")29                         {30                             strs = strs + abcs[i + j].ToString();31                             if (i + j == abcs.Count()-1)32                             {33                               if (abcs[i+j].ToString()!="]") 34                               {35                                 i = i + j ;36                                 break;37                               }38                             }39                         }40                         else 41                         {42                             i = i + j-1;43                             break;44                         }45                        46                     }  47                     if (strs!="")48                    {49                       list.Add(strs);50                        strs = "";51                     }52                 }53                 if (abcs[i].ToString() == "[")54                 {55                     for (int j = 0; j < abcs.Count()-i; j++)56                     {57                         if (abcs[i + j].ToString() != "]")58                         {59                             strface = strface + abcs[i + j].ToString();60                            61                         }62                         if (abcs[i + j].ToString() == "]")63                         {64                             strface = strface + abcs[i + j].ToString();65                             i = i + j; 66                             break;67                         }  68 69                     } 70                     FaceItem itemnew = new FaceItem { FaceName = strface, FaceUri = "Emotions/" + strface + ".png" };71                         if (true)72                         {73                             list.Add(strface);74                             strface = "";75 76                         }77                 }

2. 下面是繪製內容：

   //// 動態產生richbox內的內容            Paragraph ph = new Paragraph(); //放到for迴圈外面，因為只有一個段落就夠了            content1.Blocks.Add(ph);        //放入到richbox中            for (int i = 0; i < list.Count();i++ )             {                if (list[i].ToString().StartsWith("["))                {                    // Run myRun= new Run();                    InlineUIContainer iu = new InlineUIContainer();                    Image im = new Image();                    im.Source = new BitmapImage(new Uri("Emotions/" + list[i].ToString() + ".png", UriKind.RelativeOrAbsolute));                    im.Height = 30;                    iu.Child = im;                                     ph.Inlines.Add(iu);                }                else                {                    Run myRun = new Run();                    myRun.Text = list[i].ToString();                    ph.Inlines.Add(myRun);                                   }                            }

 

                   需要原代碼的可以留下郵箱地址，我發給你們。