'Clicked' events on elements inside DockPanel not reacting

How-to Discussions
1

Hello.

I have a couple of elements inside a DockPanel which have Clicked attributes calling a function in JS.
When I try to click the elements inside this DockPanel it seems like they wont react. Seems like this could be a problem that occurs because of the hierarchy and that the DockPanel is blocking the elements beneath it. But I can recall having no problems with this earlier so I find it strange. Or am I missing something?

Here’s a snippet from the DockPanel in question (is located inside an Each tag):

<WhileString Value="{active}" Equals="false">
	<DockPanel ux:Name="FriendContent" Padding="5">
		<StackPanel Dock="Left" Orientation="Horizontal" ItemSpacing="5" Clicked="{acceptFriend}">
			<Selectable Value="{id}" />

			<Clicked>
				<ToggleSelection />
			</Clicked>

			<Rectangle CornerRadius="2.5" Width="40" Height="40" ux:Name="FriendImage">
				<ImageFill StretchMode="UniformToFill">
					<Base64ImageSource Base64="{base64}" />
				</ImageFill>
				<Shadow Size="2" Distance="2" Color="#0004" />

				<WhileBusy>
					<Rectangle CornerRadius="2.5" Width="40" Height="40">
						<ImageFill StretchMode="UniformToFill" File="../../Assets/Dummy-images/default_user.png"/>
					</Rectangle>
				</WhileBusy>
			</Rectangle>

			<hangout.Text Alignment="VerticalCenter" Color="White" Font="NeueBold" FontSize="18" Value="{firstname} {lastname}" />

			<WhilePressed>
				<Change FriendOverlay.Opacity=".25" Easing="CubicInOut" Duration="0.25" />
			</WhilePressed>
		</StackPanel>

		<StackPanel Orientation="Horizontal" ItemSpacing="5" Dock="Right">
			<hangout.IconButton Icon="&#xf234;" ButtonColor="Hangout.Green" Clicked="{acceptFriend}"/>
			<hangout.IconButton Icon="&#xf235;" ButtonColor="Hangout.Red" Clicked="{declineFriend}"/>
		</StackPanel>

		<Rectangle ux:Name="FriendOverlay" Color="Black" Layer="Overlay" Opacity="0" />
		<Rectangle Color="PrimaryColor" Layer="Background" />
	</DockPanel>
</WhileString>

Thank you in advance!

2

It appears to me the culprit might be this line:

<Rectangle ux:Name="FriendOverlay" Color="Black" Layer="Overlay" Opacity="0" />

Since you’ve put it in Layer="Overlay", it’s on top of everything else, even if Opacity is zero.

3

Ah of course, there it is… Didn’t think about that one. Thank you!