Cascades Development

[contryboy]

Hi All,

I want to implment a button with custom image and text, what I did is to use a ImageButton to show the background, upon which I put a label to show the text. From documentation, I learnd that I should set overlapTouchPolicy: OverlapTouchPolicy.Allow on the label to have the button receive the click event.  How ever, it does not work: when I click on the label, it does not trigger the click event on the button. Here is the code:

         Container {
             layout: AbsoluteLayout {
             }
             preferredWidth: 768
             preferredHeight: 126
                          
             ImageButton {
                 id: sendButton
                 preferredWidth: 186
                 preferredHeight: 82
                 layoutProperties: AbsoluteLayoutProperties {
                     positionX: 560
                     positionY: 22
                 }
                 defaultImageSource: "images/title_btn_normal.png"
                 pressedImageSource: "images/title_btn_press.png"
                 onClicked: {
                     //do something                 }
             }
             
             Label {
                 text: qsTr("A button")
                 layoutProperties: AbsoluteLayoutProperties {
                     positionX: 600
                     positionY: 40
                 }
                 overlapTouchPolicy: OverlapTouchPolicy.Allow
             }
         }

Anyone has an ideaon how to resolve this problem?

Thanks,

Dong

[sanshah90 · Accepted solution]

Hi,

You didn't handle the label's click event. If you click on image (not on label) the click event works in your code.

Try below code to handle the label's click event : 

Container {
        layout: AbsoluteLayout {
        }
        preferredWidth: 768
        preferredHeight: 126
        ImageButton {
            id: sendButton
            preferredWidth: 186
            preferredHeight: 82
            layoutProperties: AbsoluteLayoutProperties {
                positionX: 560
                positionY: 22
            }
            overlapTouchPolicy: OverlapTouchPolicy.Allow
            defaultImageSource: "direction_normal.png"
            pressedImageSource: "direction_over.png"
//            onClicked: {
//            }
        }
        Label {
            id: lbl1
            text: qsTr("A button")
            layoutProperties: AbsoluteLayoutProperties {
                positionX: 600
                positionY: 40
            }
//            overlapTouchPolicy: OverlapTouchPolicy.Allow    // Comment this line
            gestureHandlers: [
                TapHandler {
                    onTapped: {
                        // Handle the label click event
                        //lbl1.text = "label clicked worked..."
                    }
                }
            ]
        }
    }

Thanks

[contryboy]

Thanks, this workaround works fine. How ever, I still think the overlap policy should work for this. should that be a bug? or do I misunderstand it?

[sanshah90]

Hi,

It is not a bug.

I have mentioned in my last post.

You didn't handle the label's click event. If you click on image (not on label) the click event works in your code evenif you dont put overlaptouchpolicy statemet.You must handle the label's touch to make it work.

Thanks

[contryboy]

Upon my understanding, the overlapTouchPolicy is used to make the overlapTouch transparent to the component underneath. e.g. If I have a label above a button, if I set the lable's overlapTouchPolicy to allow, then the touch event will goes directly into the button.

Is this how the overlapTouchPolicy used? If not, how it works?

Thanks,

Dong

[Guillaume_LACHAUD]

The code shown as a solution works to detect tap but doesn't work as expected regarding the imageButton. The pressed event is never received in the ImageButton when the Label is presed.

I have tried to tweak this with the touchPropagationMode but to no avail. Any idea ?

[Zucco]

I was going crazy with this... But finally I found something that works.

First of all, put your label inside a container and then, set the touchPropagationMode of the container to none.

Check this code:

Container {
layout: DockLayout {}

    ImageButton {..}

    Container {
           touchPropagationMode: TouchPropagationMode.None

           Label {..}

     }

}