New Fashion Windows 8 Development (18): Make input controls similar to the single-row book

I believe we have used this single-row book when I was in elementary school or junior high school. Can we make this format for user input content, such as text boxes?

By the way, the Sina Weibo Win8 client, when posting a new microblog, the input box also has this effect. Let's take a look at the figure below.

 

Sina Weibo's input control first sets the textbox background to {X: NULL}, then places an image control under the textbox, and then references an image.

My practice is similar. I just put a grid element instead of an image under the textbox. The grid is divided into several rows, and each row has a rectangle with a height of 1, it looks like a straight line. Similarly, this effect is also made. See.

 

How is it? Even though it is not highly technical, it has initially implemented an input interface similar to a single album.

 

The method is not complex. First, you can use a user control to make these items typeset.

<Usercontrol X: class = "app1.ucxaml" 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" width = "450" Height = "270"> <usercontrol. resources> <style X: key = "linestyle" targettype = "rectangle"> <setter property = "verticalignment" value = "bottom"/> <setter property = "fill" value = "red"/> <setter property = "horizontalalignment" value = "stretch"/> <setter property = "height" value = "1"/> <setter property = "opacity" value = "0.6 "/> </style> <style X: key = "txtstyle" targettype = "textbox"> <setter property = "background" value = "{X: null} "/> <setter property =" foreground "value =" black "/> <setter property =" fontsize "value =" 28 "/> <setter property =" textwrapping" value = "Wrap"/> </style> </usercontrol. resources> <grid background = "lightgray"> <grid canvas. zindex = "0"> <grid. rowdefinitions> <rowdefinition Height = "40"/> <rowdefinition Height = "38"/> <rowdefinition Height = "38"/> <rowdefinition Height = "38"/> <rowdefinition height = "38"/> </grid. rowdefinitions> <rectangle grid. row = "0" style = "{staticresource linestyle}"/> <rectangle grid. row = "1" style = "{staticresource linestyle}"/> <rectangle grid. row = "2" style = "{staticresource linestyle}"/> <rectangle grid. row = "3" style = "{staticresource linestyle}"/> <rectangle grid. row = "4" style = "{staticresource linestyle}"/> </GRID> <textbox name = "TXT" canvas. zindex = "1" style = "{staticresource txtstyle}" maxlength = "120" type = "codeph" text = "/codeph"/> </GRID> </usercontrol>

We constantly adjust how the line height matches the text in textbox until it looks like it is about the same, that is, to coordinate the font size in textbox and the Row Height of grid.

 

Then, we can reference this user control on other pages.

 
<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}"> <local: ucxaml/> </GRID> </Page>
 

This is a stupid way to make everyone laugh. Haha, if you think it is useful, study it. If you think of a more powerful method, you don't have to read it. Ha!