Silverlight sketchflow: Component screen change state on click

I have a component screen which has 2 states: show and hide. When I click some button the component moves onto the stage. Now when you click the component I want it to move back out of the stage. With normal elements this works by using activate state but with co开发者_开发知识库mponent screens it doesn't seem to do anything.

Anybody know how to solve this?

XML:

The component inside my screen:

<local:googlemaps x:Name="googlemaps" Margin="97,0,97,-509" d:IsPrototypingComposition="True" Cursor="Hand" VerticalAlignment="Bottom" d:LayoutOverrides="Height" RenderTransformOrigin="0.5,0.5">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="MouseLeftButtonDown">
            <pi:ActivateStateAction TargetState="hide"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
    <local:googlemaps.RenderTransform>
        <CompositeTransform/>
    </local:googlemaps.RenderTransform>
</local:googlemaps>

The component screen:

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:pc="http://schemas.microsoft.com/prototyping/2010/controls"
    mc:Ignorable="d"
    x:Class="EurekaScreens.googlemaps"
    d:DesignWidth="606" d:DesignHeight="480" Height="480" Width="606">

    <Grid x:Name="LayoutRoot">
        <Rectangle Fill="#FF212121" Margin="10,8,0,0" Stroke="Black"/>
        <Rectangle Fill="#FF212121" Margin="0,0,4,3" Stroke="Black" HorizontalAlignment="Right" Width="602"/>
        <Image Margin="1,1,5,4" Source="google maps.jpg" Stretch="Fill"/>
        <pc:SketchRectangleSL HorizontalAlignment="Right" Height="30" Margin="0,0,15,11" Style="{StaticResource Rectangle-Sketch}" VerticalAlignment="Bottom" Width="87"/>
        <TextBlock HorizontalAlignment="Right" Margin="0,0,36,13" Style="{StaticResource SubtitleLeft-Sketch}" TextWrapping="Wrap" Text="CLOSE" VerticalAlignment="Bottom" FontSize="18.667" Height="23" Width="44"/>
    </Grid>
</UserControl>

Could you post the xaml for the component screen, and the screen containing it? Does it work to click anywhere on the component? I am thinking possibly that it has no background so doesn't receive click events. You could try assigning a background that is clear.

Otherwise, post the xaml and I'll see if I can help.

I'm not entirely sure why, but for some reason it seems like the mouse down event isn't getting to the behavior. When I wrap the component screen in a grid, and put the behavior on a grid, it seems to work properly:

<Grid HorizontalAlignment="Right" Margin="0,-2,-625,2" Width="606" Background="#00000000">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseLeftButtonUp">
                    <pi:ActivateStateAction TargetState="hide"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
            <local:Screen_2 x:Name="screen_2" Height="480" Width="606" d:IsPrototypingComposition="True" RenderTransformOrigin="0.5,0.5">
                <local:Screen_2.RenderTransform>
                    <CompositeTransform/>
                </local:Screen_2.RenderTransform>
            </local:Screen_2>
        </Grid>