看微博、或者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); } }
需要原代碼的可以留下郵箱地址,我發給你們。