Tap event for a rectangle with text and image on top of it

问题

I am trying to create a UI which gives a tile like feel to the end user. I have three elements - rectangle,text and image in the following manner:

<Rectangle Name="systemTime" Height="173" Width="173" Grid.Column="0" Grid.Row="0" Fill="{StaticResource PhoneAccentBrush}" Opacity="0.85" Margin="0,12,12,12" />
<TextBlock Text="System Time" Grid.Row="0" Grid.Column="0" FontSize="{StaticResource PhoneFontSizeMediumLarge}" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="12,0,0,15" />
<Image Source="images\System time.jpg" Grid.Row="0" Grid.Column="0" Width="150" Height="115" HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="0.9" Margin="-10,0,0,20" />

Now I want to assign a Tap event handler to the rectangle. The problem is that if I assign it only to the rectangle then it doesn't work if the user clicks on the text or image. I want to do something such that the the text and image appear on top of the rectangle plus the entire rectangle is clickable, i.e. it responds to the tap event!

Looking for a solution which does not involve assigning the same tap event to the Textblock and Image

回答1:

Place all these elements into a Grid or StackPanel and use the event on that container. They can contain more then one control as the children and will take that event when it's not caught by rectangle/textblock/image.

回答2:

Perhaps this helps...

XAML:

<Grid Tap="Grid_Tap">
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" />
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>
  <Rectangle Grid.Column="0" Grid.Row="0" 
             Width="100" Height="100"
             Fill="Red" />
  <TextBlock Grid.Column="0" Grid.Row="0" 
             VerticalAlignment="Bottom" TextAlignment="Left" 
             Text="YourText" />
  <Image Grid.Column="0" Grid.Row="0" 
         ImageSource="Images/YourImage.png" />
</Grid>

Code-Behind:

private void Grid_Tap(object sender, GestureEventArgs e)
{
  MessageBox.Show("Hello World!");
}

回答3:

Place all these stuff into button and use button events:

<Button>
   <Grid>
      <Rectangle ... />
      <TextBlock ... />
      <Image ... />
   </Grid>
</Button>

来源：https://stackoverflow.com/questions/9354499/tap-event-for-a-rectangle-with-text-and-image-on-top-of-it

标签

xaml

windows-phone-7.1

windows-phone-7