In This Topic
The pair box is represented by the NPairBox class. It is a widget that pairs two arbitrary widgets, which is a commonly used UI construction. By using pair boxes you can easily create buttons with image and text, combo box and list box items with image and so on. In case the BoxesRelations is not set to Overlay, the widgets are internally arranged with a Stack Layout.
Child Elements
The pair box is a branch node containing two widgets - Box1 and Box2. The following code example creates an image and text pair box:
| Pair Box Example |
Copy Code
|
NPairBox pairBox = new NPairBox();
pairBox.Box1 = new NImageBox(NImage.FromFile("C:\\SomeImage.png")));
pairBox.Box2 = new NLabel("Some Text");
pairBox.BoxesRelation = ENPairBoxRelation.Box1BeforeBox2;
|
You can also use the static Create method of the NPairBox class to create image and text pair boxes even faster:
| Pair Box Create Method |
Copy Code
|
NPairBox pairBox = NPairBox.Create(NImage.FromFile("C:\\SomeImage.png"), "Some Text");
|
Properties
The pair box exposes the following properties:
| Name |
Description |
| Spacing |
Defines the spacing between the boxes of the pair box |
| BoxesRelation |
Defines the relative placement of the boxes. Can be one of the following:
- Overlay - Specifies that box1 and box2 share the same space.
- Box1AboveBox2 - Specifies that box1 is displayed vertically above box2.
- Box2AboveBox1 - Specifies that box2 is displayed vertically above box1.
- Box1BeforeBox2 - Specifies that box1 is displayed horizontally before box2.
- Box2BeforeBox1 - Specifies that box2 is displayed horizontally before box1.
|
| FillMode |
Determines the fill mode of the stack layout the 2 boxes are arranged with. Has effect only if BoxesRelation is not set to Overlay |
| FitMode |
Determines the fit mode of the stack layout the 2 boxes are arranged with. Has effect only if BoxesRelation is not set to Overlay |
Pair Box and Unisize Box
The sizing behavior of NUnisizeBox is described by the Unisize Box topic. Because the pair box is often used in conjunction with the unisize box, the NPairBox class provides a constructor that lets you easily embed the boxes passes as arguments inside unisize group boxes. For example:
| Pair Box with Unisize Boxes Examples |
Copy Code
|
NStackPanel stack = new NStackPanel();
NPairBox pair1 = new NPairBox("I am small", new NButton("I am larger button than small button"), true);
stack.Add(pair1);
NPairBox pair2 = new NPairBox("I am larger than small", new NButton("I am small button"), true);
stack.Add(pair2);
NUniSizeBoxGroup group = new NUniSizeBoxGroup(stack);
|
This code produces the following image:
This is because the widgets created for the labels and buttons in the previous example are embedded inside unisize boxes (the last parameter of the NPairBox constructor is true).
When using this technique it is nice to know that by default the NUnisizeBox assigned as Box1 has the "Box1" sizing group, while the NUnisizeBox assigned as Box2 has the "Box2" sizing group.
See Also
