put an image front of the text item in a list

[franckypoune]

Good evening,
I would like to add an image front of the text itm in a listbox control.
Which manner i should proceed? using listboxitem class?

Thanks for your help

[Tiresias]

hello again
digging in our upgrade to cegui we are finding some doubts about what can be done and how long it woudl take, and how

concerning this post on image+text in itemList: how can we achieve this easily ?

thanks

[scriptkid]

Hi,

this page might be of help, where a sample is given on how to create a custom list item.

http://www.cegui.org.uk/wiki/index.php/ ... istboxItem

But this isn't "easy". It requires some understanding about how Cegui connects to it's Falagard module and such. But if you get it to compile, you might be able to change it to your needs

HTH.

[Tiresias]

is it based on the pseudoList ?
we thought about using the pseudolist, will it be a good move?

[CrazyEddie]

I think for the ItemEntry based ItemListbox, the easiest approach is to customise the LookNFeel for the ListboxItem (or, if you need to retain the original text only itme, create a new LookNfeel one and a scheme mapping) - the whole point of the skinning system is to allow customisation of the way things look without having to touch any code

Basically, you will be looking to add an ImageryComponent that utilises a property to holds the imageset/image to be used. This then enables you to set the image/icon for each item via setProperty, and also from a layout file.

If you get stuck, perhaps I could find the time to post an example.

CE.

[Tiresias]

Hello
thanks for helping,

the cegui code is very special,
i think we would need some code snipset. ...

at the moment i have no idea how to implement it

[CrazyEddie]

Hi,

The following is a replacement WidgetLook definition for the TaharezLook/ListboxItem skin definition. It adds an image property named "IconImage", and the imageset/image specified for that is then drawn to the left of the item text label. The size of the icon is made to be square and based off of the line spacing of the font. You can customise all this further as you need:

Code: Select all

    <!--
    ***************************************************
        TaharezLook/ListboxItem
    ***************************************************
    -->
    <WidgetLook name="TaharezLook/ListboxItem">
        <PropertyDefinition name="TextColour" initialValue="FFFFFFFF" redrawOnWrite="true" />
        <PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" />
        <PropertyDefinition name="SelectionBrush" initialValue="set:TaharezLook image:ListboxSelectionBrush" redrawOnWrite="true" />
        <PropertyDefinition name="SelectionColour" initialValue="FF4444AA" redrawOnWrite="true" />
        <PropertyDefinition name="IconImage" initialValue="" redrawOnWrite="true" />
        <Property name="Selectable" value="True" />
        <NamedArea name="ContentSize">
            <Area>
                <Dim type="LeftEdge" >
                    <AbsoluteDim value="0" />
                </Dim>
                <Dim type="TopEdge" >
                    <AbsoluteDim value="0" />
                </Dim>
                <Dim type="Width" >
                    <FontDim type="HorzExtent" padding="6">
                        <DimOperator op="Add">
                            <FontDim type="LineSpacing" padding="6" />
                        </DimOperator>
                    </FontDim>
                </Dim>
                <Dim type="Height" >
                    <FontDim type="LineSpacing" />
                </Dim>
            </Area>
        </NamedArea>
        <ImagerySection name="label">
            <TextComponent>
                <Area>
                    <Dim type="TopEdge">
                        <AbsoluteDim value="0" />
                    </Dim>
                    <Dim type="LeftEdge">
                        <FontDim type="LineSpacing" padding="3" />
                    </Dim>
                    <Dim type="RightEdge">
                        <UnifiedDim scale="1" offset="-3" type="RightEdge" />
                    </Dim>
                    <Dim type="BottomEdge">
                        <UnifiedDim scale="1" type="BottomEdge" />
                    </Dim>
                </Area>
            </TextComponent>
        </ImagerySection>
        <ImagerySection name="icon">
            <ImageryComponent>
                <Area>
                    <Dim type="TopEdge">
                        <AbsoluteDim value="0" />
                    </Dim>
                    <Dim type="LeftEdge">
                        <AbsoluteDim value="0" />
                    </Dim>
                    <Dim type="Width">
                        <FontDim type="LineSpacing" />
                    </Dim>
                    <Dim type="BottomEdge">
                        <FontDim type="LineSpacing" />
                    </Dim>
                </Area>
                <ImageProperty name="IconImage" />
                <VertFormat type="Stretched" />
                <HorzFormat type="Stretched" />
            </ImageryComponent>
        </ImagerySection>
        <ImagerySection name="selection">
            <ImageryComponent>
                <Area>
                    <Dim type="TopEdge">
                        <AbsoluteDim value="0" />
                    </Dim>
                    <Dim type="LeftEdge">
                        <AbsoluteDim value="0" />
                    </Dim>
                    <Dim type="RightEdge">
                        <UnifiedDim scale="1" type="RightEdge" />
                    </Dim>
                    <Dim type="BottomEdge">
                        <UnifiedDim scale="1" type="BottomEdge" />
                    </Dim>
                </Area>
                <ImageProperty name="SelectionBrush" />
                <ColourProperty name="SelectionColour" />
                <VertFormat type="Stretched" />
                <HorzFormat type="Stretched" />
            </ImageryComponent>
        </ImagerySection>
        <StateImagery name="Enabled">
            <Layer>
                <Section section="label">
                    <ColourProperty name="TextColour" />
                </Section>
                <Section section="icon" />
            </Layer>
        </StateImagery>
        <StateImagery name="Disabled">
            <Layer>
                <Section section="label">
                    <ColourProperty name="TextColour" />
                </Section>
                <Section section="icon" />
            </Layer>
        </StateImagery>
        <StateImagery name="SelectedEnabled">
            <Layer>
                <Section section="selection" />
                <Section section="label">
                    <ColourProperty name="SelectedTextColour" />
                </Section>
                <Section section="icon" />
            </Layer>
        </StateImagery>
        <StateImagery name="SelectedDisabled">
            <Layer>
                <Section section="selection" />
                <Section section="label">
                    <ColourProperty name="SelectedTextColour" />
                </Section>
                <Section section="icon" />
            </Layer>
        </StateImagery>
    </WidgetLook>


CE.