Hello Dinesh,
following could be the steps and restrictions to take in account:
1. Restriction 1: you will need to use Embedded Wizard version 13 or newer.
2. Restriction 2: The value range 2..20 will not work with two values representing the same number of segments. For example value 2 and 3 should display 1 segment. Value 4 and 5 should display 2 segment. You will need to configure the value bar with a range 0..10 where value 1 corresponds to 1 segment, value 2 to 2 segments and so far.
3. Restriction 3: The width of the value bar will have to be exact the width of a single segment multiplied by the range. For example, if the segment has the width 10 and the range is 0..10, then the width of the widget has to be 100 pixel.
4. Create an image representing a single segment of the value bar. Note, the section Specify the bitmap and color for the Value Bar's left track image. The image has thus to be composed of three equally sized sections. For test purpose I have created following image:
5. Add the image as new Bitmap resource to the project.
6. Add a Horizontal Value Bar config object and connect it to the Value Bar.
7. In the config object select the bitmap (from step 5) in property TrackLeftBitmap. Furthermore, modify the properties TrackLeftMarginLeft and TrackLeftMarginRight to be both -10. The value 10 corresponds to 1/3 of the width of the used image (from step 4). Following screenshot demonstrates the configuration:
8. Connect the config object to a Value Bar widget.
9. Ensure the Value Bar widget has the width of 100 pixel (10 * the width of a single segments from the bitmap (step 4) which is 10 pixel).
10. Configure the value range to be 0 .. 10.
The results are then following, (e.g. for the value 2):
If the above approach is too restrictive for your application case, the alternative is the creation of your own Value Bar widget. To simplify that you could use the prepared component templates. To display a strip of images, I would recommend the view Wallpaper.
Best regards
Paul Banach
