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[] 數組

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

               接下來就是一些篩選加判斷將一般字符和圖片字符分離開來,具體實現方法在我的代碼里大家可以參考一下(方法有很多種,我的有些繁瑣,歡迎大家分享一下更簡便的方法。)

               需要源代碼的留下郵箱,我發給你們。

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);
                   
                } 
               
            }

 

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM