CEGUI (Crazy Eddie's GUI) Forums

Posted: **Mon Jul 17, 2006 20:27**

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

Posted: **Wed Jul 02, 2008 23:28**

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

Posted: **Thu Jul 03, 2008 07:13**

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.

Posted: **Thu Jul 03, 2008 11:43**

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

Posted: **Thu Jul 03, 2008 12:44**

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.

Posted: **Thu Jul 03, 2008 13:53**

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

Posted: **Thu Jul 03, 2008 18:24**

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.

CEGUI (Crazy Eddie's GUI) Forums

put an image front of the text item in a list

put an image front of the text item in a list