Development of New Fashion Windows 8 (23): buttons

I believe it has never been written before.ProgramAfter all, as a basic UI element, as long as it is a graphical operating system, buttons are indispensable, even some DOS programs have buttons. Therefore, this is something that is visible and everywhere.

 

In the development of Win8 "Panel tiles", we often use the following buttons.

As we can see above, we can better understand that it is the class derived from buttonbase.

 

Button

A button is the most basic, commonly used, and standard button control. It has an event-click inherited from the buttonbase public base class. I don't need to introduce this event, I think my friends who have been playing the program for a few days have heard of its name.

In the past, in the winform application, we set the text displayed on the button to modify its text attribute. We also know that since the emergence of WPF, the button has a content attribute, this makes the content model of the content control more flexible. We can set a string for the content attribute, or it can be other, such as an image, a rectangle, or a more complex UI layout, all in all, it can be used for uielement.

For example:

 
<Button content = "Hello, xiaopan"/>
 

A simple N button object is declared. After running, you can see the effect shown in.

If you think that text is not brilliant enough, you can also make some new ideas, such:

<Button> <button. content> <grid. columndefinitions> <columndefinition width = "Auto"/> <columndefinition width = "*"/> </grid. columndefinitions> <ellipse grid. column = "0" width = "20" Height = "20" fill = "skyblue"/> <textblock grid. column = "1" text = "a graph on the left"/> </GRID> </button. content> </button>
 

In this way, the content of the button is not so monotonous, with a circle on the left and text on the right.

We can also set the border color and Border width for the button. Note that these are inherited from control, and almost most controls can be played like this.

 
<Button borderthickness = "2" borderbrush = "lightgreen" content = "123456"/>
 

 

For the border size, that is, the borderthickness attribute, if you set only one value, as shown in area 2 above, it indicates that the Border width on the top, bottom, left, and right of the control is the same, both are 2. If we do not want them to be all equal, we can use the following four values:, and 3, which respectively represent the width of the four sides above the border. The order is: Left-top-right-bottom. This is a bit like in CSS, but the order is not the same.

 
<Button borderthickness = "3, 2, 0, 0" borderbrush = "pink" content = "abcdefghijk"/>
 

In this way, we can only see the border on the left and the top, but the border on the right and bottom will not be seen, as shown in.

You can set the background through the background attribute, which is inherited from control.

 
<Button background = "green" foreground = "lightgray" content = "Hahahaha"/>
 

The most important thing about a button is its click event.

[XAML]

 
<Button content = "Click here" Click = "onclickme"/>
 

[C #]

Private async void onclickme (Object sender, routedeventargs e) {windows. UI. popups. messagedialog dialog = new windows. UI. popups. messagedialog ("You clicked the button. "); Await dialog. showasync ();}
 

 

Hyperlinkbutton

This is a hyperlink button, similar to the <A> element in HTML. The special property is navigateuri, which is equivalent to the href attribute of a in HTML.

 
<Hyperlinkbutton content = "Sina" navigateuri = "http://www.sina.com.cn/"/>
 

When you click it, the browser is started and the xinlang homepage is opened.

In addition, because it is also derived from buttonbase, the click event is still available.

[XAML]

 
<Hyperlinkbutton content = "Click me" Click = "onclick"/>
 

[C #]

Private async void onclick (Object sender, routedeventargs e) {windows. UI. popups. messagedialog DLG = new windows. UI. popups. messagedialog ("You clicked on the link. "); Await DLG. showasync ();}
 

 

Repeatbutton

This button is a bit interesting. It can repeat the click event, so it has two more attributes than the button.

Delay: After you click the button, it takes a long time for the click event to be repeated. If it is set to 500, click the button again after 0.5 seconds until the user does not press the button.

Interval: The interval at which the click is triggered each time. If the value is 1000, you can press and hold the parameter, and click it once every second.

The preceding two attributes are in milliseconds.

Let's take a look at the example below.

[XAML]

<Grid margin = "20" verticalignment = "TOP"> <grid. columndefinitions> <columndefinition width = "Auto"/> </grid. columndefinitions> <repeatbutton content = "-" interval = "500" delay = "500" Click = "onclicka" grid. column = "0"/> <textblock fontsize = "20" X: Name = "tbvalue" grid. column = "1" text = "0" verticalignment = "center" margin = "7,0, 500 "/> <repeatbutton content =" + "interval =" 500 "delay =" "Click =" onclickb "grid. column = "2"/> </GRID>
 

[C #]

Private void onclicka (Object sender, routedeventargs e) {int VL = int. minvalue; If (! Int. tryparse (this. tbvalue. text, out VL) {VL = 0;} VL-= 1; tbvalue. TEXT = Vl. tostring ();} private void onclickb (Object sender, routedeventargs e) {int VL = int. minvalue; If (! Int. tryparse (tbvalue. Text, out VL) {VL = 0;} VL + = 1; tbvalue. Text = Vl. tostring ();}
 

So you will get the following effect.

 

 

Radiobutton

This control is used to make single-choice questions for users. It is important to make good use of the -- groupname attribute.

N radiobutton can be placed in the same container. However, if there are multiple groupname attributes, that is, multiple groups, each group does not interfere with each other, however, only one radiobutton in the same group can be selected at the same time. Anyway, the group is mutually exclusive.

There is a saying that "one mountain cannot accommodate two tigers", which is very similar to this one. Only one tiger in the first mountain a can dominate the king. Similarly, mountain B is the same. However, A and B do not conflict with each other. They can own a tiger king.

For example:

 
<Stackpanel margin = "25"> <radiobutton content = "" groupname = "sex"/> <radiobutton content = "" groupname = "sex"/> <radiobutton content = "renshile" groupname = "sex"/> <radiobutton margin =, 0, 0 "content =" blue "groupname =" color "/> <radiobutton content =" red "groupname =" color "/> <radiobutton content =" gray "groupname =" color" /> </stackpanel>
 

In the container (stackpanel in the preceding example), there are two groups: Sex and color. In the preceding example, you can select only one of the handsome guys, beautiful girls, and renshile, and the following three groups, blue, red, and Gray can only be selected. However, the options in the two groups do not affect each other. No matter which one you select in the color group, the selection in the sex group is not affected.

 

 

Checkbox

Checkbox and radiobutton are just the opposite. checkbox is dedicated to multiple-choice questions for users. You can select one or two or three or all of them. The ischecked attribute indicates the selection status, which can be selected or not selected. The attribute is bool ?, Therefore, it may be null.

Let's take a look at the example below.

[XAML]

 
<Grid> <stackpanel margin = "25"> <stackpanel X: name = "stackpanellist" orientation = "vertical"> <checkbox content = "apple"/> <checkbox content = "Pears"/> <checkbox content = "Peach"/> <checkbox content = "litchi"/> <checkbox content = "grape"/> <checkbox content = "Yi Zhiguo"/> </stackpanel> <button margin =, "content =" OK select "Click =" onclick "/> <textblock X: Name =" tbresult "margin =, 0, 0 "fontsize =" 18 "/> </stackpanel> </GRID>
 

[C #]

Private void onclick (Object sender, routedeventargs e) {var checkboxs = This. stackpanellist. children; List <string> strlist = new list <string> (); foreach (VAR chkb in checkboxs) {If (chkb is checkbox) {checkbox mycheckbox = (checkbox) chkb; if (mycheckbox. ischecked. hasvalue & mycheckbox. ischecked. value = true) {strlist. add (mycheckbox. content as string) ;}} string strresult = string. format ("My favorite fruits are: {0}", String. join (",", strlist. toarray (); this. tbresult. TEXT = strresult ;}
 

The above example shows how many fruits you have selected and displayed them.