stef
stef

Reputation: 261

Set x and y on mouse click

I have a rectangle and i want to set the location (x,y) when the user presses the mouse button for 1 pixel left and 1 pixel down, so i get a simple feedback.

    <Canvas x:Name="canvas">
        <Canvas.Resources>
            <Style x:Key="myStyle" TargetType="Rectangle">
                <Setter Property="Fill" Value="AliceBlue" />
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Fill" Value="Green"  />
                    </Trigger>
                    <EventTrigger RoutedEvent="Button.Click" >
                        <BeginStoryboard>
                            <Storyboard TargetProperty="Canvas.Left">
                                <Int16Animation From="10" To="100" Duration="0:0:0:1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Style.Triggers>
            </Style>
        </Canvas.Resources>

        <Rectangle x:Name="rect" Width="120" Height="120" Canvas.Left="10" Canvas.Top="10" Style="{StaticResource myStyle}" />
    </Canvas>

With my current solution, the mouse over Trigger works. But for my EventTriggers nothing happens?

Any ideas how to accomplish this?

Thanks

Upvotes: 0

Views: 146

Answers (1)

Clemens
Clemens

Reputation: 128136

There are a few things wrong here.

  • There is no Button.Click event on a Rectangle. Use for example MouseLeftButtonUp instead.
  • Canvas.Left is an attached property. You have to write the property name in parenthesis.
  • It is of type double, hence should be animated by a DoubleAnimation.

Write the EventTrigger like this:

<EventTrigger RoutedEvent="MouseLeftButtonUp" >
     <BeginStoryboard>
         <Storyboard TargetProperty="(Canvas.Left)">
             <DoubleAnimation From="10" To="100" Duration="0:0:0.1" />
         </Storyboard>
    </BeginStoryboard>
</EventTrigger>

Upvotes: 1

Related Questions