Silverlight VisualStates overlap each other

Question

I created 2 VisualState. The second overlap the first. So if i want to click on the first state button on that position where the second state has another button, - so the second state button overlap the first state button -, the second button will be clicked. I use Blend 4 RC.

Thank you for your replies!

<Grid x:Name="MainGrid" Background="White">
  <i:Interaction.Triggers>
   <i:EventTrigger>
    <ei:GoToStateAction StateName="One"/>
   </i:EventTrigger>
  </i:Interaction.Triggers>
  <VisualStateManager.CustomVisualStateManager>
   <ei:ExtendedVisualStateManager/>
  </VisualStateManager.CustomVisualStateManager>
  <VisualStateManager.VisualStateGroups>
   <VisualStateGroup x:Name="VisualStateGroup" ei:ExtendedVisualStateManager.UseFluidLayout="True">
    <VisualState x:Name="One">
     <Storyboard>
      <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
      <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="button" d:IsOptimized="True"/>
     </Storyboard>
    </VisualState>
    <VisualState x:Name="Two">
     <Storyboard>
      <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid1" d:IsOptimized="True"/>
      <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="button1" d:IsOptimized="True"/>
     </Storyboard>
    </VisualState>
   </VisualStateGroup>
  </VisualStateManager.VisualStateGroups>
  <Grid x:Name="grid" Margin="8,8,17,19" Opacity="0">
   <Button x:Name="button" Content="button" HorizontalAlignment="Left" Margin="8,104,0,90" Opacity="0" Width="178">
    <i:Interaction.Triggers>
     <i:EventTrigger EventName="Click">
      <ei:GoToStateAction StateName="Two"/>
     </i:EventTrigger>
    </i:Interaction.Triggers>
   </Button>
  </Grid>
  <Grid x:Name="grid1" Margin="8,8,8,19" Opacity="0">
   <Button x:Name="button1" Content="button1" HorizontalAlignment="Left" Margin="8,149,0,34" Opacity="0" Width="146">
    <i:Interaction.Triggers>
     <i:EventTrigger EventName="Click">
      <ei:GoToStateAction StateName="One"/>
     </i:EventTrigger>
    </i:Interaction.Triggers>
   </Button>
  </Grid>

 </Grid>