Windows Phone 8 XAML app - Clickable Rectangle object

Question

I'm in need of making a rectangle clickable, at which it will run a function that animates it and does some stuff. I've tried to browse Microsoft's API, but I don't find anything and I'm going crazy because of this. This will be the last time I touch XAML, but I really need to know how to get this to work.

<Grid Background=Transparent>
    <Grid same same>
        <Rectangle MouseLeftButtonDown="moveClick" x:Name="red" 
                Fill="Red" Height="125" Width="125" Stroke="Pink" 
            StrokeThickness="10" Margin="106,196,225,348" 
            />
    </Grid>
</Grid>

This is one of my rectangles and I have a function called moveClick in the .xaml.cs file that should be called. In that function there is some code firing up an animation that will target this rectangles. Since I have a lot of rectangles I want to animate I am changing the target depending on which one is pressed. Problem is, the MouseEvent isn't happening. I have googled for hours but Microsoft's help is useless. I don't know what to do.

I can't really post more code than this because then I'd have to rewrite it all over due to my PC I'm programming on has no internet connection. THis is my laptop and I'm going through my phone because my normal internet is down. My desktop has no wifi.

SO, can anybody who has had experience with Windows apps tell me what the reason could be? Is it because I'm in a grid? I saw somewhere that it has to have a transparent background. It is. I'm so clueless because there's nothing to go on because wherever I look, I find something irrelevant or dead ends.

EDIT: Just to clarify, the animation works. I temporarily set it to run by pressing a button used for something else. And it works. It just doesn't work when touching the Rectangles.

EDIT TWO: I'm just using the template, and just added stuff under the ContentPanel as they call it.

score 1 · Accepted Answer · edited May 23 '17 at 11:58

An alternative/lazy approach is this:

<Button Click="moveClick" BorderThickness="0"  Background="Transparent">
    <Rectangle x:Name="red" 
     Fill="Red" Height="125" Width="125" Stroke="Pink" 
     StrokeThickness="10" Margin="94,184,213,336" 
     />
<Button>

In the click handler you can get the inner rectangle with the recursive function grabbed from this question: How to get children of a WPF container by type?

public static T GetChildOfType<T>(this DependencyObject depObj) where T : DependencyObject
{
    if (depObj == null) return null;

    for (int i = 0; i < VisualTreeHelper.GetChildrenCount(depObj); i++)
    {
        var child = VisualTreeHelper.GetChild(depObj, i);

        var result = (child as T) ?? GetChildOfType<T>(child);
        if (result != null) return result;
    }
    return null;
}

har07 · Answer 2 · 2014-02-23T05:47:06.637

0

The rectangle it self works fine here. MouseLeftButtonDown get invoked. It is more likely that the way you place it that matter. Can't guess without looking more XAML code.

Wild guess for workarounds, try with Tap event too and explicitly set IsHitTestVisible="True" :

......
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <StackPanel>
        <Rectangle MouseLeftButtonDown="moveClick" x:Name="red" 
                Fill="Red" Height="125" Width="125" Stroke="Pink" 
                StrokeThickness="10" Margin="106,196,225,348" 
                Tap="red_Tap" IsHitTestVisible="True"
                />
    </StackPanel>
</Grid>
......

Both event get invoked when I tap the rectangle with this setting. And when IsHitTestVisible set to false, both event doesn't get invoked, just as I expect.

edited Feb 23 '14 at 05:47

answered Feb 23 '14 at 05:19

har07

88,338
12
84
137

See my edit for a short description of how it is placed. – Simon Feb 23 '14 at 05:37
ok checked it out, can't see any problem with that too. My updated answer shows how I tested it, very similar to yours and both events get invoked. Sorry, can't suggest anything more than this answer if I can't replicate the problem. – har07 Feb 23 '14 at 05:51

Windows Phone 8 XAML app - Clickable Rectangle object

2 Answers2