ZIndex: Number;
The ZIndex property sets the order for layers in a sector.
To execute the example, the page must contain the Speedometer component named speed1 (see Example of Creating a Fuel Gauge Unit). Add to the page a button, clicking which changes the order of sectors arrangement:
<input TYPE="button" VALUE="createSector" ONCLICK="createSector()"> <script> function createSector() { if (speed1.getScales(1).getSectors(1)) return; var sector0 = new PP.Ui.GaugeSector({ StartValue: 0, EndValue: 50, Background: {PPType: PP.SolidColorBrush, Color: "#9FDFDF"}, StartSize: 2, EndSize: 2, Offset: -10, Border: {PPType: PP.SolidColorBrush, Color: "#333333"} }); var sector1 = new PP.Ui.GaugeSector({ StartValue: 30, EndValue: 50, Background: {PPType: PP.SolidColorBrush, Color: "orange"}, StartSize: 2, EndSize: 2, Offset: -10, ZIndex:10 }); var sector2 = new PP.Ui.GaugeSector({ StartValue: 20, EndValue: 40, Background: {PPType: PP.SolidColorBrush, Color: "blue"}, StartSize: 5, EndSize: 5, Offset: -10, ZIndex:5 }); speed1.getScales(1).setSector(sector0, 0); speed1.getScales(1).addSector(sector1); speed1.getScales(1).addSector(sector2); speed1.render(speed1, this); } </script> <input TYPE="button" VALUE="setZIndex" ONCLICK="setZIndex()"> <script> function setZIndex() { if (speed1.getScales(1).getSectors(1)) { var sector1 = speed1.getScales(1).getSectors(1).getZIndex(); var sector2 = speed1.getScales(1).getSectors(2).getZIndex(); speed1.getScales(1).getSectors(1).setZIndex(sector2); speed1.getScales(1).getSectors(2).setZIndex(sector1); } } </script>
Clicking the createSector button adds three overlapping sectors. Then click the setZIndex button to edit sectors arrangement.
See also: