Is there a way to show in tooling what UI elements that is blocking the event calls?
E.g. I have a click event attached to a UI element and something is stacked on top of it with a click event blocking it?
Hi!
There is no tool like this at the moment, but that’s a good feature suggestion.
To solve your specific problem, can you please share some related code or a test case?
Yes, the following code has a clicked event bound to a function check, that is not triggered. I believe it has to do with the stacking of elements here somehow. If I move the click event to a different item it is triggered fine. Very hard though when I have nested components to figure out which one is blocking as the code grows…
<Grid ux:Class="Project.Card" ux:Name="card" Rows="auto,auto" >
<string ux:Property="Id" />
<JavaScript>
exports.pushProfile = function(){
router.push("profilePage", {
id : this.Id.value
});
}.bind(this);
function check() {
console.log("Ok");
};
module.exports = {
check: check
};
</JavaScript>
<ScrollView ux:Dependency="scrollView" />
<Panel ux:Dependency="detailView" />
<Router ux:Dependency="router"/>
<WhileTrue ux:Name="inDetailView">
<Change card.LayoutMaster="detailView" />
<BringToFront />
</WhileTrue>
<LayoutAnimation>
<Move Vector="1" RelativeTo="WorldPositionChange" Duration="0.3" Easing="QuadraticInOut"/>
<Resize RelativeTo="SizeChange" Vector="1" Duration="0.3" Easing="QuadraticInOut" />
</LayoutAnimation>
<DropShadow />
<StackPanel Row="1" Padding="14,0,14,20" >
<Rectangle Layer="Background" CornerRadius="0,0,3,3" Color="White"/>
<DockPanel>
<Project.ProfileImage Url="{kuddler.profilePictureUrl}" Clicked="{pushProfile}"/>
<StackPanel Margin="10">
<Text Value="@{kuddler.username}" FontSize="18"/>
<Text Value="{kuddler.displayName}" FontSize="12"/>
</StackPanel>
<Image File="../Assets/flag@3x.png" Dock="Right" Width="20" Height="20" Alignment="TopRight" Margin="0,12"/>
</DockPanel>
<Text Value="{picture.description}" TextWrapping="Wrap" />
<Grid ColumnCount="2" Margin="0,10,0,0">
<StackPanel Orientation="Horizontal" Alignment="Left">
<Text Value="4" Alignment="Right" FontSize="14" TextColor="#aaa"/>
<Text Value=" " Alignment="Right" FontSize="14" TextColor="#aaa"/>
<Text Value="{loc.comments}" FontSize="14" TextColor="#aaa"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Alignment="Right">
<Text Value="5" Alignment="Right" FontSize="14" TextColor="#aaa"/>
<Text Value=" " Alignment="Right" FontSize="14" TextColor="#aaa"/>
<Text Value="{loc.mins_ago}" FontSize="14" TextColor="#aaa"/>
</StackPanel>
</Grid>
</StackPanel>
<Panel Row="0" BoxSizing="FillAspect" Aspect="1">
<Panel Alignment="TopRight" Width="30" Height="30" Margin="10">
<Text Value="{picture.likes}" TextColor="White" Alignment="Center" FontSize="12"/>
<Circle Color="Coral"/>
<Clicked>
<Toggle Target="showReactions"/>
</Clicked>
</Panel>
<WhileInteracting Source="scrollView">
<!-- Consider Delay="0.1" to make sure we don't remove by accident -->
<Set showReactions.Value="false"/>
</WhileInteracting>
<WhileTrue ux:Name="showReactions">
<Change reactions.Opacity="1" Duration="0.25"/>
</WhileTrue>
<Panel ux:Name="reactions" Opacity="0">
<StackPanel Alignment="Center" HitTestMode="LocalBounds">
<Text Value="Send a Reaction" FontSize="25" TextColor="White" Alignment="Center"/>
<Grid ColumnCount="3" RowCount="1" CellSpacing="20" Margin="20,5">
<Project.TongueIcon />
<Project.LoveIcon />
<Project.WowIcon />
</Grid>
</StackPanel>
<Rectangle Layer="Background" Opacity="0.7">
<LinearGradient StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="#FA8B64" />
<GradientStop Offset="1" Color="#E3234D" />
</LinearGradient>
</Rectangle>
</Panel>
<Panel Clicked="{check}">
<Rectangle Color="Blue" Opacity="0.5" />
<Rectangle CornerRadius="3,3,0,0" >
<ImageFill WrapMode="ClampToEdge" Url="{picture.s3Url}" StretchMode="UniformToFill"/>
</Rectangle>
</Panel>
</Panel>
</Grid>
Which of the panels are you trying to click?
Ah, you mean the one at the bottom, of course, with {check}.
The general rule in UX markup is that higher “up” in the code --> higher “up” in the Z-order. So Placing clickable things at the very bottom of the file is usually not what you want. The higher up panels may transparently overlay the lower down panels and block intpu. Try moving the clickable things to the top of the file.