Development of New Fashion Windows 8 (16): How to handle text Overflow

In this blog, http://blog.csdn.net/tcjiaan.

 

To be accurate, I will share with you some tips. I do not know whether you like it or not.

Well, let's stop talking nonsense. Let's first look at what kind of running results I want to achieve.

 

 

Yes, it is similar to the typographical effect of a newspaper. How can this problem be achieved?

This involves a class-richtextblockoverflow. The purpose is that when the text in richtextblock overflows (that is, the current richtextblock cannot display a long text), it can be displayed on richtextblockoverflow.

The overflowcontenttarget attribute of richtextblock is set to the richtextblockoverflow of the text to be displayed next. If the first richtextblockoverflow is still insufficient, you can add more richtextblockoverflow, set the overflowcontenttarget attribute of the previous richtextblockoverflow to the new richtextblockoverflow, and so on.

You can use the hasoverflowcontent attribute to determine whether the text overflows.

 

Okay, let's talk about the principle. The following is a hands-on implementation.

 

1. Start Visual Studio for win 8 and create a new project.

2. mainpage. XAML is relatively simple. The button is used to select a long text file, and the text box is used to input the font size. A stackpanel is used to arrange text.

<Page X: class = "app1.mainpage" xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml" xmlns: Local = "using: app1" 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}"> <grid. rowdefinitions> <rowdefinition Height = "Auto"/> <rowdefinition Height = "*"/> </grid. rowdefinitions> <stackpanel grid. row = "0" orientation = "horizontal" margin = "25"> <button content = "Open File" Click = "onclick"/> <textblock text = "font size" margin = "37,0, 0, 0 "fontsize =" 24 "verticalignment =" center "/> <textbox name =" txtsize "verticalignment =" center "margin =" 8, 0, 130 "width =" "text =" 16 "> <textbox. inputscope> <inputscope. names> <inputscopename namevalue = "Number"/> </inputscope. names> </inputscope> </textbox. inputscope> </textbox> </stackpanel> <scrollviewer margin = "15" grid. row = "1" horizontalscrollbarvisibility = "Auto" horizontalscrollmode = "Auto"> <stackpanel name = "stpanel" orientation = "horizontal"/> </scrollviewer> </GRID> </ page>

3. paste the complete Code in the background.

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; using Windows. storage. stre AMS; using Windows. storage. pickers; using Windows. UI. XAML. parameters; namespace app1 {public sealed partial class mainpage: Page {const double ct_width = 400d; // The width of the text block const double ct_height = 500d; // height of the text block const double ct_margin = 25D; // margin of the text block public mainpage () {This. initializecomponent ();} private async void onclick (Object sender, routedeventargs e) {// read content from a text file fileopenpicker oppicker = N EW fileopenpicker (); oppicker. filetypefilter. add (". TXT "); oppicker. commitbuttontext = "open"; oppicker. suggestedstartlocation = pickerlocationid. desktop; storagefile file = await oppicker. picksinglefileasync (); If (file! = NULL) {using (irandomaccessstream stream = await file. openasync (fileaccessmode. read) {// read text from the stream. Considering UTF-8 is garbled, // use the stream class to read the text. // use the gb2312 encoding format string MSG = string. empty; using (Stream STRM = stream. asstream () {streamreader render = new streamreader (STRM, system. text. encoding. getencoding ("gb2312"); MSG = render. readtoend ();} // remove the Special Line Break MSG = MSG. replace ("",""). replace ("\ n ",""). replace ("\ r", "\ n "). replace ("\ t", ""); stpanel. children. clear (); // to support text segmentation, use richtextblock tbcontent = new richtextblock (); tbcontent. width = ct_width; tbcontent. height = ct_height; tbcontent. textwrapping = textwrapping. wrap; tbcontent. margin = New thickness (ct_margin); paragraph pH = new paragraph (); Ph. textindent = 33; run txtrun = new run (); txtrun. TEXT = MSG; Ph. inlines. add (txtrun); tbcontent. blocks. add (ph); tbcontent. fontsize = convert. todouble (txtsize. text); stpanel. children. add (tbcontent); // update the status to check whether any text tbcontent exists. updatelayout (); bool isflow = tbcontent. hasoverflowcontent; // except for the first text block, richtextblock is followed by richtextblockoverflow. // we need two variables: richtextblockoverflow oldflow = NULL and newflow = NULL; if (isflow) {oldflow = new richtextblockoverflow (); oldflow. width = ct_width; oldflow. height = ct_height; oldflow. margin = New thickness (ct_margin); tbcontent. overflowcontenttarget = oldflow; stpanel. children. add (oldflow); oldflow. updatelayout (); // continue to judge whether there is any overflow isflow = oldflow. hasoverflowcontent;} while (isflow) {newflow = new richtextblockoverflow (); newflow. height = ct_height; newflow. width = ct_width; newflow. margin = New thickness (ct_margin); oldflow. overflowcontenttarget = newflow; stpanel. children. add (newflow); newflow. updatelayout (); // continue to judge whether there is any overflow text isflow = newflow. hasoverflowcontent; // when a gun variable is filled with text, // point the reference of the first variable to the current richtextblockoverflow // ensure that the overflowcontenttarget attribute can be connected to oldflow = newflow ;}}}}}}

In fact, the focus is to add text blocks cyclically. I also commented on the code.