Thanks for posting the image; this is absolutely what the core progress bar is intended for.
Are you using a source version of CEGUI where you could apply the progress bar fix? If you're using source, I can post the appropriate patch - it's only a couple of lines changed - to fix the clipping bug (without the fix you might have a hard time getting this to work correctly without resorting to hacks).
Whether a progress bar is stretched or tiled, or whatever, is not something that is set in stone (or even code) - it's possible to define multiple variants of the progress bar - all with different approaches to imagery arrangement - via the XML looknfeel and scheme system.
The ImageProperty element is only valid in the ImageryComponent, not the FrameComponent. In reference to the Vector2 property question, you'll have to elaborate (which property and on what object, at least).
A simple "two image" progress bar looknfeel WidgetLook definition might look something like this:
Code: Select all
<WidgetLook name="MyGUISkin/HealthBar">
<Property name="VerticalProgress" value="True" />
<NamedArea name="ProgressArea">
<Area>
<Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
<Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
<Dim type="Width" ><UnifiedDim scale="1" type="Width" /></Dim>
<Dim type="Height" ><UnifiedDim scale="1" type="Height" /></Dim>
</Area>
</NamedArea>
<ImagerySection name="background">
<ImageryComponent>
<Area>
<Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
<Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
<Dim type="Width" ><UnifiedDim scale="1" type="Width" /></Dim>
<Dim type="Height" ><UnifiedDim scale="1" type="Height" /></Dim>
</Area>
<Image imageset="MyImageset" image="ProgressBackground" />
<VertFormat type="Stretched" />
<HorzFormat type="Stretched" />
</ImageryComponent>
</ImagerySection>
<ImagerySection name="progress" >
<ImageryComponent>
<Area>
<Dim type="LeftEdge" ><UnifiedDim scale="0" type="LeftEdge" /></Dim>
<Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
<Dim type="Width" ><UnifiedDim scale="1" type="Width" /></Dim>
<Dim type="Height" ><UnifiedDim scale="1" type="Height" /></Dim>
</Area>
<Image imageset="MyImageset" image="ProgressForeground" />
<VertFormat type="Stretched" />
<HorzFormat type="Stretched" />
</ImageryComponent>
</ImagerySection>
<StateImagery name="Enabled">
<Layer>
<Section section="background" />
</Layer>
</StateImagery>
<StateImagery name="EnabledProgress">
<Layer>
<Section section="progress" />
</Layer>
</StateImagery>
<StateImagery name="Disabled" />
<StateImagery name="DisabledProgress" />
</WidgetLook>
To reiterate,though, this will only work correctly with the clipping fix, without it the ProgressForeground image would not be clipped according to the current progress, but instead scaled to fit within it.
CE.