Silverlight sketchflow: Component screen change state on click.

Question

Hello,

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 component 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>

Answer 1

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>