Transparent list/editbox with visible text

[wizzler]

I've got a Listbox and an Editbox which i want to lower the alpha to make it more transparent but I don't want to have the textitems lowered too. How can i achieve this?

[CrazyEddie]

Hi,

I think the way that I would do this would be to modify the looknfeel skin. There's a couple of approaches depending on your needs. If you just want all lists to have that effect you can add an appropriate XML element in there to set the alpha for individual imagery sections - if you want it configurable, it's a similar approach but you have to define a property that will control the colours applied instead.

Example the first: Setting 0.4 alpha for all lists, for TaharezLook...
In the TaharezLook.looknfeel file, find the definition of the "TaharezLook/Listbox" and where you see this:

Code: Select all

        <StateImagery name="Enabled">
            <Layer>
                <Section section="main" />
            </Layer>
        </StateImagery>

Change it to, for example, this:

Code: Select all

        <StateImagery name="Enabled">
            <Layer>
                <Section section="main">
                    <Colours topLeft="66FFFFFF" topRight="66FFFFFF" bottomLeft="66FFFFFF" bottomRight="66FFFFFF" />
                </Section>
            </Layer>
        </StateImagery>

Example the second: Using a property to control the colours (and therefore alpha):
Again, in TaharezLook.looknfeel file the Listbox definition, and at the top add a new property definition:

Code: Select all

        <PropertyDefinition name="BoxColour" initialValue="FFFFFFFF" redrawOnWrite="true" />

This creates a new property called "BoxColour" that we can set to affect the colouring of the box later.

Now again we find the StateImagery sections and get it to use our property as the source of the colours:

Code: Select all

        <StateImagery name="Enabled">
            <Layer>
                <Section section="main">
                    <ColourProperty name="BoxColour" />
                </Section>
            </Layer>
        </StateImagery>

Then you can set the BoxColour in code or XML via the regular properties interface.

HTH

CE.

[wizzler]

Hi,

I think the way that I would do this would be to modify the looknfeel skin. There's a couple of approaches depe...
/.../
HTH

CE.

I've played around with the looknfeel now and i seem to get it. I think i need to read up some on the Falagard system.

The problem you describe is that i can set this look for all listboxes, but when I load it in a .layout like so:

Code: Select all

<GUILayout >
    <Window Type="DefaultWindow" Name="Root" >
        <Property Name="UnifiedAreaRect" Value="{{-0.000976563,0},{0,0},{0.999023,0},{1,0}}" />
        <Window Type="TaharezLook/Listbox" Name="/ChatBox/List" >
            <Property Name="Alpha" Value="0.4" />
            <Property Name="UnifiedAreaRect" Value="{{0.0109374,0},{0.784375,0},{0.33418,0},{0.947135,0}}" />
        </Window>
        <Window Type="TaharezLook/Editbox" Name="/ChatBox/Text" >
      <Property Name="Alpha" Value="1" />
      <Property Name="MaxTextLength" Value="1073741823" />
      <Property Name="UnifiedAreaRect" Value="{{0.00996085,0},{0.954948,0},{0.332227,0},{0.990104,0}}" />
      <Property Name="TextParsingEnabled" Value="True" />
        </Window>
        <Window Type="TaharezLook/ImageButton" Name="/Button/Fireball" >
       <Property Name="NormalImage" Value="set:Spells image:Fireball" />
            <Property Name="UnifiedAreaRect" Value="{{0.7,0},{0.90,0},{0.76,0},{0.98,0}}" />
        </Window>
        <Window Type="TaharezLook/ImageButton" Name="/Button/Scourge" >
      <Property Name="NormalImage" Value="set:Spells image:Scourge" />
            <Property Name="UnifiedAreaRect" Value="{{0.7,0},{0.82,0},{0.76,0},{0.9,0}}" />
        </Window>
    </Window>
</GUILayout>


then the alpha is affecting the whole listbox. I guess i need to rebuild it in the .looknfeel.

[Jamarr]

I'm not sure if I fully understand the question, but wouldn't it be simpler to call setInheritsAlpha(false) whenever you add an item to the listbox?

[CrazyEddie]

Yes I understand that setting the Alpha affects the text, it's supposed to Using the second solution that I suggested above would give you a new property for the Listbox named "BoxColour". You could then set that in the layout instead of Alpha, and you should get the results you desire. So that part of the layout might look like this instead:

Code: Select all

        <Window Type="TaharezLook/Listbox" Name="/ChatBox/List" >
            <Property Name="BoxColour" Value="66FFFFFF" />
            <Property Name="UnifiedAreaRect" Value="{{0.0109374,0},{0.784375,0},{0.33418,0},{0.947135,0}}" />
        </Window>

To get that working you just have to add those two small changes to the TaharezLook.looknfeel.

Another option is to subclass the ListboxItem based class you're using and override the draw function so that it does not use the alpha from the owning window.

@Jamarr: Alas, in this case setting the inherited alpha to disabled does not have the desired effect because the old style ListboxItem content is not window based. So I think setting it would have no effect.

CE.

[wizzler]

Yes I understand that setting the Alpha affects the text, it's supposed to Using the second solution that I suggested above would give you a new property for the Listbox named "BoxColour". You could then set that in the layout instead of Alpha, and you should get the results you desire. So that part of the layout might look like this instead:

Code: Select all

        <Window Type="TaharezLook/Listbox" Name="/ChatBox/List" >
            <Property Name="BoxColour" Value="66FFFFFF" />
            <Property Name="UnifiedAreaRect" Value="{{0.0109374,0},{0.784375,0},{0.33418,0},{0.947135,0}}" />
        </Window>

To get that working you just have to add those two small changes to the TaharezLook.looknfeel.

Another option is to subclass the ListboxItem based class you're using and override the draw function so that it does not use the alpha from the owning window.

@Jamarr: Alas, in this case setting the inherited alpha to disabled does not have the desired effect because the old style ListboxItem content is not window based. So I think setting it would have no effect.

CE.

Thanks CE. You're the best!