Front: Smobiler is a development platform that uses. NET language to develop apps in the VS environment, perhaps more convenient than Xamarin
First, the target style
We want to achieve the effect in the following actions:
1. Drag a Buttongroup control to the form interface from "Smobiler components" on the toolbar
2. Modify the properties of the Buttongroup control A.allowedit property
Gets or sets whether to support long press the control into edit mode, setting the property to "True", 1;
When this property is "true", and the Edit property in the Buttons property is "True", it is possible to enter edit mode by long pressing the control, that is, the Delete button is supported
B.buttons Property
Open the Collection Editor and click "Add", edit property (whether edit is supported), Selected property (whether selected), Text property (child button text), Value property (internal value, not displayed on the interface), 2, figure 3;
C.buttonstyle Property
These include the Borderradius property (control border angle), BackColor property (control background color), ForeColor property (control text color), bordercolor property (control border color), Selectbackcolor Property (Control selection State background color), Selectforecolor property (Control selection State text color) and Selectbordercolor property (control selection State Border color), 4;
|
|
|
|
Figure 1 |
Figure 2 |
Figure 3 |
Figure 4 |
Set the Borderradius property to "10", 5;
Set the BackColor property to "White", 6;
Set the ForeColor property to "102, 102, 102", which means RGB color, 7;
Set the BorderColor property to "234, 234, 234", which means RGB color, 8;
|
|
|
|
Figure 5 |
Figure 6 |
Figure 7 |
Figure 8 |
Set the Selectbackcolor property to "255, 245, 233", which means RGB color, 9;
Set the Selectforecolor property to "251, 104, 65", which means RGB color, 10;
Set the Selectbordercolor property to "251, 104, 65", which means RGB color, 11;
D.fontsize Property
Sets the font size of the control, sets the property to "13", the control's font size is 13, 12;
|
|
|
|
Figure 9 |
Figure 10 |
Figure 11 |
Figure 12 |
E.location Property
Make the control appear in the appropriate position, 13;
F.rowbuttoncount Property
Sets the number of buttons in a single line, which is set by default to "0", 14;
When this property is set to "0", the control automatically sets the button size based on the contents of the current button, and when the property is set greater than "0", each row is fixed to show the number of rowbuttoncount specified.
G.size Property
Set the width and height of the control, set the property to (300, 73), 15;
H.multiselect Property
Sets whether the control supports multiple selections, the default setting is "True", that is, multi-selection is supported, 16;
If the property is set to "False", only the radio function is supported;
|
|
|
|
Figure 13 |
Figure 14 |
Figure 15 |
Figure 16 |
Second, the mobile phone effect display
. NET Language app development platform--smobiler Learning log: How to quickly implement a button group function