listbox margin/padding

[Arcanor]

This is probably simple to do, but I've been searching and can't find the answer.

I've got a listbox control and the listboxtextitems that it contains are showing their text too close to the left edge of the window. How can I add 10 pixels in between the left edge of the window and the beginning of the actual text?

I tried shrinking the listbox in relation to its parent container, but unfortunately the listbox itself has a frame, and I don't think it can be disabled or hidden.

Thanks in advance.

[CrazyEddie]

Hi,

There are a couple of options...

1) Modify / subclass ListboxTextItem and change the ListboxTextItem::draw function so that it adds the padding you need.
2) Modify the looknfeel XML so that the named areas (ItemRenderingArea and the others) for Listbox have the left edge shifted over a bit.

Both options have good and bad sides, personally I'd probably plump for option 2.

CE.

[Arcanor]

Thanks CE, I had been looking in the .layout file. I'll look in the .looknfeel file instead.

[Arcanor]

I'm still a bit confused as to how to implement your suggestion #2 above. I'm looking in my looknfeel file at what I think is the correct place. Here is the top bit of my listbox definition section:

Code: Select all

    <WidgetLook name="ArcanoriaLook/Listbox">
        <NamedArea name="ItemRenderingArea">
            <Area>
                <Dim type="LeftEdge" ><ImageDim imageset="ArcanoriaLook" image="StaticFrameLeft" dimension="Width" /></Dim>


In accordance with the examples in the NamedArea documentation (in http://www.cegui.org.uk/FalDocs/node37.html) I had expected to see an AbsoluteDim or UnifiedDim element inside there (which I could easily modify), but I'm not sure what the ImageDim element is doing, or how I can set the Width dimension that it specifies.

[CrazyEddie]

Hi,

Yeah, this is a little more complex some operations, and requires the use of some arithmetic in the skin. Basically, you want something like this:

Code: Select all

<WidgetLook name="ArcanoriaLook/Listbox">
   <NamedArea name="ItemRenderingArea">
      <Area>
         <Dim type="LeftEdge" >
            <ImageDim imageset="ArcanoriaLook" image="StaticFrameLeft" dimension="Width">
               <DimOperator op="Add">
                  <AbsoluteDim value="10" />
               </DimOperator>
            </ImageDim>
         </Dim>
...

Doesn't really need any explanation, but this takes the width of the image used for the listbox frame edge, and adds 10. The result is then used as the left edge of the named area.

HTH

CE.

[Arcanor]

Thanks CE, that did it.

[Arcanor]

One last question on this topic...

Is it possible to apply this sort of formatting on a per window basis, dynamically?

[CrazyEddie]

One way to have it configurable is to define a new property that will be used to control the padding, this can have it's own default value and can be used like any other 'normal' property from within code, script and XML. The property definition should go at the top of the WidgetLook definition:

Code: Select all

<PropertyDefinition name="LeftPadding" initialValue="10" redrawOnWrite="true" />

Then you need to modify the area definition from earlier to use this property instead of a absolute value. This is done by way of the PropertyDim element:

Code: Select all

<WidgetLook name="ArcanoriaLook/Listbox">
   <NamedArea name="ItemRenderingArea">
      <Area>
         <Dim type="LeftEdge" >
            <ImageDim imageset="ArcanoriaLook" image="StaticFrameLeft" dimension="Width">
               <DimOperator op="Add">
                 <PropertyDim name="LeftPadding" />
               </DimOperator>
            </ImageDim>
         </Dim>
...

In that example, it's expecting a single float value to use as the padding, though you can extend that if you like to require the LeftPadding to be a unified co-ordinate value by adding the optional 'type' attribute to PropertyDim to specify the base for the scale component (you'd then also have to modify the property definition initial value to be a UDim value such as "{0,10}").

HTH

CE.

[Arcanor]

Awesome, it's working perfectly. Very instructive, thanks so much CE!