Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

how to set webbutton background when the MouseEnter by xml . #682

Closed
wyj3531 opened this issue Nov 24, 2021 · 9 comments
Closed

how to set webbutton background when the MouseEnter by xml . #682

wyj3531 opened this issue Nov 24, 2021 · 9 comments
Assignees
Labels

Comments

@wyj3531
Copy link

wyj3531 commented Nov 24, 2021

  <style type="button" id="command-ok">
        <component>
            <foreground>white</foreground>
        </component>
        <painter>
            <decorations>
                <decoration>
                    <WebShape round="4"/>
                    <WebShadow type="outer" width="2"/>
                    <LineBorder color="87, 100, 255"/>
                    <GradientBackground>
                        <color>87, 100, 255</color>
                    </GradientBackground>
                    <ButtonLayout>
                        <ButtonIcon constraints="icon"/>
                        <ButtonText constraints="text"/>
                    </ButtonLayout>
                </decoration>
                <decoration states="focused">
                    <LineBorder color="87, 100, 255"/>
                </decoration>
                <decoration states="pressed">
                    <WebShadow type="outer" opacity="1"/>
                    <WebShadow type="inner" width="0"/>
                    <ColorBackground color="87, 100, 255"/>
                </decoration>
                <decoration states="disabled">
                    <WebShadow type="outer" opacity="0"/>
                    <LineBorder color="lightGray"/>
                    <ButtonLayout>
                        <ButtonText color="120,120,120" ignoreCustomColor="true"/>
                    </ButtonLayout>
                </decoration>
            </decorations>
        </painter>
    </style>
@wyj3531
Copy link
Author

wyj3531 commented Nov 24, 2021

mouse hover

@mgarin mgarin self-assigned this Nov 24, 2021
@mgarin
Copy link
Owner

mgarin commented Nov 24, 2021

You can use hover state for that:

<decoration states="hover">
    <ColorBackground color="black"/>
</decoration>

You can also use any other background implementation there, for example GradientBackground or ImageTextureBackground.

You can also find the comprehensive list of states in DecorationState interface:
https://github.com/mgarin/weblaf/blob/master/modules/ui/src/com/alee/painter/decoration/DecorationState.java
It also contains some additional comments and references to painters in which those states are available.

Here is the hover state mention:
https://github.com/mgarin/weblaf/blob/master/modules/ui/src/com/alee/painter/decoration/DecorationState.java#L99

@wyj3531
Copy link
Author

wyj3531 commented Nov 25, 2021

i add hover bg. when mouse hover button ,then press button the press color not effect

@mgarin
Copy link
Owner

mgarin commented Nov 25, 2021

Order of <decoration> blocks defines how they override each other, so you should have hover state one before the pressed one. Since default button style doesn't have a hover state - you can't really insert it before the pressed state if you are overriding the default button style.

So in this case I recommend to make a fully custom style for your button (you can copy-paste it from default style) and simply add hover state inbetween. Also make sure to add overwrite="true" marker for decorations block to make sure you aren't using any pre-existing decorations from the default style.

Here is an example:

    <style type="button" id="custom" padding="2,4,2,4">
        <component>
            <foreground>black</foreground>
        </component>
        <painter>
            <decorations overwrite="true">
                <decoration>
                    <WebShape round="3" />
                    <WebShadow type="outer" width="2" />
                    <LineBorder color="170,170,170" />
                    <GradientBackground>
                        <color>white</color>
                        <color>223,223,223</color>
                    </GradientBackground>
                    <ButtonLayout>
                        <ButtonIcon constraints="icon" />
                        <ButtonText constraints="text" />
                    </ButtonLayout>
                </decoration>
                <decoration states="hover">
                    <ColorBackground color="black"/>
                </decoration>
                <decoration states="focused">
                    <LineBorder color="85,130,190" />
                </decoration>
                <decoration states="pressed">
                    <WebShadow type="outer" opacity="0" />
                    <WebShadow type="inner" width="6" />
                    <ColorBackground color="210,210,210" />
                </decoration>
                <decoration states="disabled">
                    <WebShadow type="outer" opacity="0" />
                    <LineBorder color="lightGray" />
                    <ButtonLayout>
                        <ButtonText color="120,120,120" ignoreCustomColor="true" />
                    </ButtonLayout>
                </decoration>
            </decorations>
        </painter>
    </style>

@wyj3531 wyj3531 closed this as completed Nov 29, 2021
@wyj3531
Copy link
Author

wyj3531 commented Dec 14, 2021

i want to add hover color and select color in table by xml.how to add it

@wyj3531
Copy link
Author

wyj3531 commented Dec 14, 2021

        <rowPainter>
            <decorations>
                <decoration states="odd">
                    <WebShape round="0"/>
                    <ColorBackground color="255,255,255"/>
                </decoration>
            </decorations>
        </rowPainter>

        <!-- Cell selection painter -->
        <selectionPainter>
            <decorations>
                <decoration>
                    <WebShape round="0"/>
                    <GradientBackground>
                        <color>235, 235, 237</color>
                        <color>235, 235, 237</color>
                    </GradientBackground>
                </decoration>
            </decorations>
        </selectionPainter>

    </painter>

@mgarin
Copy link
Owner

mgarin commented Dec 14, 2021

Do you mean hover and select for cells?
If so -

Hover isn't tracked for separate cells right now, so that will have to be implemented from the ground up in the component itself & it's painter. Can't really give any advice on this right now since this requires some investigation on how to properly implement it. I've made a separate issue for the improvement for future updates: #690

As for cell selection - you can change it by modifying the <selectionPainter> in the table style:
https://github.com/mgarin/weblaf/blob/master/modules/ui/src/com/alee/skin/light/resources/table.xml#L37
That painter will only be applied to cell bounds and only when cell is selected.

@wyj3531
Copy link
Author

wyj3531 commented Dec 15, 2021

i just mean how to add the hover color fo the whole row

@mgarin
Copy link
Owner

mgarin commented Dec 15, 2021

It's the same as for cells - currently you cannot, because hover isn't tracked for separate rows/columns/cells.
I've made a separate issue for the improvement for future updates: #690
Once that enhancement is implemented it will be possible via style.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants