HitTestMode. Stop click propagation

How-to Discussions
1

I did read some posts that talked about this and the HitTestMode docs too, but I still can’t solve the problem with the following code.

This is a class that I use in a number of pages that shows some icons with which the user may send mails, share content, etc.

<Panel ux:Class="Icons" > 
    <DockPanel Alignment="Right" Margin="0,0,10,0">
        <Image File="Assets/envelope.png" Dock="Left" Width="18">
        	<Clicked>
        		<LaunchEmail To="" Subject="{title}" CarbonCopy="" BlindCarbonCopy="" Message="{email_msg}" />
    		</Clicked>
        </Image>
        <Image File="Assets/phone-call.png" Dock="Left" Width="18" Margin="10,0,0,0" />
        <Image File="Assets/share-1.png" Dock="Left" Width="18" Margin="10,0,0,0">
        	<Clicked Handler="{clickShare}"/>
        </Image>
        <Image File="Assets/unlink.png" Dock="Left" Width="18" Margin="10,0,0,0" />
        <Image File="Assets/placeholder.png" Dock="Left" Width="18" Margin="10,0,0,0" />
    </DockPanel>
</Panel>

The two Clicked work fine. They launch the e-Mail and the Share modules but as soon as the user has finished writing the mail or sharing the content (or simply as he cancel the operation) the click will propagate and the interaction will continue to the page that hosts this class.

I understand that I have to put a panel behind that blocks all other interactions, but I did not find the correct place where to put it:

First try:

<Panel ux:Class="Icons" > 
    <DockPanel>
         [...]
    </DockPanel>
    <Panel HitTestMode="None" />
</Panel>

Second try:

<Panel ux:Class="Icons" >
    <Panel>
        <DockPanel>
             [...]
        </DockPanel>
    </Panel>
    <Panel HitTestMode="None" />
</Panel>

Third try:

<Panel>
   <Image File="Assets/share-1.png" Dock="Left" Width="18" Margin="10,0,0,0">
       <Clicked Handler="{clickShare}"/>
   </Image>
<Panel>
<Panel HitTestMode="None" />
2

Would you be able to prepare a complete, ready-to-run example that we could check? It’s hard to understand the challenge without being able to see what’s wrong.

As for HitTestMode, setting it to None means that all clicks will go right through the element. For a Panel that should consume all clicks and not pass anything through, you’re after HitTestMode="LocalBounds" instead.

3

In the past days I tried my best before asking again help, but I did not manage to work it out. Below there’s a stripped out version of the app I’m willing to build.

The problem is that any click on the share text inside the <Icons> panel goes through the panel itself and clicks the <NewsItem> outputting the <DebugAction> message. I would like that when share is clicked the click stops there.

<App>
<JavaScript>

    var Observable      = require("FuseJS/Observable");
    var email           = require('FuseJS/Email');
    var share           = require("FuseJS/Share");

    var data            = Observable();


    var json = {
        "events": [
            {

                items: [
                    {
                        "title": "Live. Faucibus dignissim parturient.",
                        "description": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium."    
                    },
                    {
                        "title": "Live. Taciti ante scelerisque consequat.",
                        "description": "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit."   
                    },
                    {
                        "title": "Dance. Condimentum adipiscing leo.",
                        "description": "At vero eos et accusamus et iusto odio dignissimos ducimus."       
                    },
                    {
                        "title": "Party. Ut vestibulum tincidunt consectetur.",
                        "description": "Ut enim ad minima veniam, quis nostrum exercitationem."       
                    },
                    {
                        "title": "Party. Parturient mi urna commodo.",
                        "description": "Quis autem vel eum iure reprehenderit qui in ea."   
                    },
                    {
                        "title": "Party. Pharetra pretium nisl felis.",
                        "description": "Et harum quidem rerum facilis est et expedita distinctio."   
                    }
                ]
            }
        ]
    };
    

    data.replaceAll(json.events);

    module.exports = {
        data:           data,
        clickShare:     clickShare
    };


	function clickShare(args) {
        share.shareText(args.data.title);
    }	



</JavaScript>

<ScrollView Margin="0,0,0,0">
    <StackPanel ItemSpacing="6" >
        <Each Items="{data.items}">
            <NewsItem />
        </Each>
    </StackPanel>
</ScrollView>


<Panel ux:Class="NewsItem">
    <StackPanel Margin="6,0,6,0">
        <Clicked>
            <DebugAction Message="This should not appear when 'share' is clicked." />
        </Clicked>
            
        <StackPanel Margin="6,6,0,0">
            <Text Value="{title}" Alignment="Left" FontSize="16" />
            <Text Value="{description}" Alignment="Left" FontSize="16" />

            <Icons Dock="Bottom" Margin="0,0,0,6" />  

        </StackPanel>

        <Rectangle Layer="Background" Color="#fff" CornerRadius="1">
            <Stroke Color="#E6E6E6" Width="1" />
            <Shadow Size="2" Distance="2" Color="#C4C4C4" />
        </Rectangle>
    </StackPanel>
</Panel>



<Panel ux:Class="Icons" > 
    <DockPanel Alignment="Right" Margin="0,0,10,0">
        <DockPanel Dock="Right" Padding="8,2,8,2">
            <Text Value="share" Color="#ED1C24">
                <Clicked Handler="{clickShare}"/>
            </Text>
        </DockPanel>
    </DockPanel>
</Panel>

</App>
4

Thanks for taking the time to make a reproduction!

All you want to do is move the Clicked on the parent to somewhere deeper in the tree. There, I fixed it for you:

<App>
    <JavaScript>
    var Observable      = require("FuseJS/Observable");
    var email           = require('FuseJS/Email');
    var share           = require("FuseJS/Share");
    var data            = Observable();
    var json = {
        "events": [
            {

                items: [
                    {
                        "title": "Live. Faucibus dignissim parturient.",
                        "description": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium."    
                    },
                    {
                        "title": "Live. Taciti ante scelerisque consequat.",
                        "description": "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit."   
                    },
                    {
                        "title": "Dance. Condimentum adipiscing leo.",
                        "description": "At vero eos et accusamus et iusto odio dignissimos ducimus."       
                    },
                    {
                        "title": "Party. Ut vestibulum tincidunt consectetur.",
                        "description": "Ut enim ad minima veniam, quis nostrum exercitationem."       
                    },
                    {
                        "title": "Party. Parturient mi urna commodo.",
                        "description": "Quis autem vel eum iure reprehenderit qui in ea."   
                    },
                    {
                        "title": "Party. Pharetra pretium nisl felis.",
                        "description": "Et harum quidem rerum facilis est et expedita distinctio."   
                    }
                ]
            }
        ]
    };
    data.replaceAll(json.events);

    function clickShare(args) {
        console.log("Share was clicked");
        share.shareText(args.data.title);
    }

    module.exports = {
        data:           data,
        clickShare:     clickShare
    };
    </JavaScript>

    <ScrollView Margin="6">
        <StackPanel ItemSpacing="6" >
            <Each Items="{data.items}">
                <NewsItem />
            </Each>
        </StackPanel>
    </ScrollView>

    <Panel ux:Class="NewsItem">
        <DockPanel Margin="6">
            <Icons Dock="Bottom" />
            <StackPanel>
                <Clicked>
                    <DebugAction Message="This should not appear when 'share' is clicked." />
                </Clicked>
                <Text Value="{title}" Alignment="Left" FontSize="16" />
                <Text Value="{description}" Alignment="Left" FontSize="16" />
            </StackPanel>
        </DockPanel>

        <Rectangle Color="#fff" CornerRadius="1">
            <Stroke Color="#E6E6E6" Width="1" />
            <Shadow Size="2" Distance="2" Color="#C4C4C4" />
        </Rectangle>
    </Panel>

    <Panel ux:Class="Icons"> 
        <DockPanel Alignment="Right" Margin="0,0,10,0">
            <DockPanel Dock="Right" Padding="8,2">
                <Clicked Handler="{clickShare}" />
                <Text Value="share" Color="#ED1C24" />
            </DockPanel>
        </DockPanel>
    </Panel>

</App>
5

Sorry Uldis, my fault. I understood your suggestion but stripping out the code from my app I over simplified it. The design of the NewsItem class is a bit more complicated.

<Panel ux:Class="NewsItem">
<StackPanel Margin="6,0,6,0">
    <Clicked>
        <DebugAction Message="Ok! You did not clicked 'share'." />
    </Clicked>
    <StackPanel>                    
        <Rectangle Color="#fff" Height="80">
            <Stroke Color="#E6E6E6" Width="1" />
            <Text Value="image" Alignment="Center" FontSize="13" />
        </Rectangle>
        <DockPanel>
            <StackPanel Dock="Left">
                 <Rectangle Width="80" Height="100" Margin="6,6,0,6">
                     <Stroke Width="1" Color="#CDCDCD" />
                     <StackPanel Alignment="Center">
                          <Text Value="numbers" Alignment="Center" FontSize="13" />
                     </StackPanel>
                 </Rectangle>
             </StackPanel> 
             <StackPanel Margin="6,6,0,0">
                 <Text Value="{title}" TextTruncation="Standard" Alignment="Left" FontSize="16" Margin="0,0,6,0"/>
                 <Text Value="{description}" Alignment="Left" FontSize="13" Margin="0,0,6,0" />
              </StackPanel>
              <Icons Dock="Bottom" Margin="0,0,0,6"/>  
        </DockPanel>
    </StackPanel>
    <Rectangle Layer="Background" Color="#fff" CornerRadius="1">
        <Stroke Color="#E6E6E6" Width="1" />
        <Shadow Size="2" Distance="2" Color="#C4C4C4" />
    </Rectangle>
</StackPanel>
</Panel>

When previewed you will notice that the share button is aligned at the bottom with the rectangle on the left.

Thank you for the patience.

6

The complexity of the component does not make any difference. You still need to simply put the Clicked in the right place.

If necessary, you can put multiple Clicked with the same callback on a number of different elements (image, title, description, …).

7

Ok. Done!
If someone happens in this post this is how I solved it:

<Panel ux:Class="NewsItem">
    <StackPanel Margin="6,0,6,0">
        <StackPanel>                    
            <Panel Height="80" HitTestMode="LocalBounds">
                <Text Value="image" Alignment="Center" FontSize="13" />
                <Clicked>
                    <DebugAction Message="Ok! You did not clicked 'share'." />
                </Clicked>
            </Panel>
            <DockPanel Color="#FFF">
                <StackPanel Dock="Left">
                    <Rectangle Width="80" Height="100" Margin="6,6,0,6" Color="#fff">
                        <Stroke Width="1" Color="#CDCDCD" />
                        <StackPanel Alignment="Center">
                            <Text Value="numbers" Alignment="Center" FontSize="13" />
                        </StackPanel>
                          <Clicked>
                            <DebugAction Message="Ok! You did not clicked 'share'." />
                        </Clicked>
                    </Rectangle>
                </StackPanel> 
                <StackPanel Margin="6,6,0,0" HitTestMode="LocalBounds">
                    <Text Value="{title}" TextTruncation="Standard" Alignment="Left" FontSize="16" Margin="0,0,6,0"/>
                    <Text Value="{description}" Alignment="Left" FontSize="13" Margin="0,0,6,0" />
                    <Clicked>
                        <DebugAction Message="Ok! You did not clicked 'share'." />
                    </Clicked>
                </StackPanel>
                <Icons Dock="Bottom" Margin="0,0,0,6"/>  
            </DockPanel>
        </StackPanel>
        <Rectangle Layer="Background" Color="#fff" CornerRadius="1">
            <Stroke Color="#E6E6E6" Width="1" />
            <Shadow Size="2" Distance="2" Color="#C4C4C4" />
        </Rectangle>
    </StackPanel>
</Panel>