ProgressBarFill with image

How can I use in vertical progress bar my image (such as photo) instead of ordinary line?
I don't need to scale it, because the scaling distorts image.
For example: http://www.picamatic.com/view/8753739_PBImage2/

You need to create skin and template for Progress next way:
Base is simple widget with gray head image, then empty widget, that represent progress bar line and child widget on this line with Align::Bottom.
And also you need to set "FlowDirection" BottomToTop in template for that progress bar, or from code call progressBar->setFlowDirection(MyGUI::FlowDirection::BottomToTop);

I'm not sure I understood, but I tried create the ProgressBarImage

Skin:
<Resource type="ResourceSkin" name="ProgressbarImageSkin" size="128 256" texture="ForgottenSkins.png">
<BasisSkin type="SubSkin" offset="0 0 128 256" align="Stretch">
<State name="normal" offset="0 0 128 256"/>
</BasisSkin>
<BasisSkin type="SubSkin" offset="0 0 128 256" align="Bottom">
<State name="normal" offset="0 0 128 256"/>
</BasisSkin>
</Resource>

Template:
<Resource type="ResourceLayout" name="ProgressBarImage" version="3.2.0">
<Widget type="Widget" skin="ProgressBarImageSkin" position="0 0 128 256" name="Root">
<Property key="MoveToClick" value="true"/>
<Property key="FlowDirection" value="BottomToTop"/>
<UserString key="LE_TargetWidgetType" value="ProgressBarImage"/>
<UserString key="TrackWidth" value="7"/>
<UserString key="TrackFill" value="false"/>
<UserString key="TrackSkin" value="SliderTrackHSkin"/>
<Widget type="Widget" skin="PanelEmpty" position="2 1 122 14" align="HStretch Top" name="TrackPlace">
<Property key="NeedKey" value="false"/>
<Property key="InheritsPick" value="true"/>
</Widget>
</Widget>
</Resource>

And layout:
<Widget type="ProgressBar" skin="ProgressBarImage" position_real="0.7 0.8 0.3 0.2">
<Widget type="ImageBox" skin="ImageBox" position_real="0.0 0.0 1.0 1.0" name="img_PSHintBar">
<Property key="ImageResource" value="Panels"/>
<Property key="ImageGroup" value="HintBarGroup"/>
<Property key="ImageName" value="HintBarBkg"/>
<Widget type="ImageBox" skin="ImageBox" position_real="0.0 0.0 1.0 1.0" name="img_PSHintBarFill" align="HCenter Bottom">
<Property key="ImageResource" value="Panels"/>
<Property key="ImageGroup" value="HintBarGroup"/>
<Property key="ImageName" value="HintBarFill"/>
</Widget>
</Widget>
</Widget>

Don`t work.
Could you explain me that in detail?

?

Please, help me, guys!

I did it, but it only works in pixels and don't work in percents.
Rather, the maximum height in pixels progressbar always remains constant regardless of the size of progress bar in percents (in the layout). Highlighted in blue letters.
For example:


Skin:<Resource type="ResourceSkin" name="ProgressBarImageTrackVSkin" size="80 541" texture="ForgottenSkins.png">
<BasisSkin type="SubSkin" offset="0 0 80 541" align="Bottom">
<State name="normal" offset="1968 240 80 541"/>
</BasisSkin>
</Resource>

Template:<Resource type="ResourceLayout" name="ProgressBarImage" version="3.2.0">
<Widget type="Widget" skin="PanelEmpty" position="0 0 80 541" name="Root">
<UserString key="TrackFill" value="true"/>
<UserString key="TrackSkin" value="ProgressBarImageTrackVSkin"/>
</Widget>
</Resource>

Layout:<Widget type="ProgressBar" skin="ProgressBarImage" position_real="0.5 0.3 0.05 0.5" align="Stretch" layer="Info" name="TEST">
<Property key="FlowDirection" value="BottomToTop"/>
<Property key="Range" value="100"/>
<Property key="RangePosition" value="100"/>
</Widget>