テキストとその上に画像がある矩形のタップイベント

Question

エンドユーザーに感触のようなタイルを与えるUIを作成しようとしています。

<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" /> 

ここで、タップイベントハンドラを矩形に割り当てたいとします。問題は、私が矩形にのみ割り当てる場合は、ユーザーがテキストや画像をクリックしても機能しないということです。テキストと画像が四角形の上に表示され、四角形全体がクリック可能である、つまりタップイベントに応答するような操作をしたいと考えています。

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

Answer 1

置き、これらすべての要素：ボタンへのTextBlockとImage

Answer 2

Placeに、これらすべてのものを同一のタップイベントを割り当てる伴い、ボタンイベントを使用していない解決策を探してい

GridまたはStackPanelとし、そのコンテナでイベントを使用します。子として複数のコントロールを含めることができ、rectangle/textblock/imageにキャッチされていないときにそのイベントを取得します。

Answer 3

は、おそらくこれは...助け

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> 

コードビハインド：

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