Complete DataTemplate clickable?

Question

I have following DataTemplate for usage within my phone.LongListSelector in my XAML view:

    <DataTemplate x:Name="myLocationsListTemplate">
        <StackPanel Margin="0,0,0,15">
            <Grid VerticalAlignment="Top" Margin="0,0,5,0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="120" />
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0" TextTrimming="WordEllipsis" Text="{Binding Name}" TextWrapping="NoWrap" Style="{StaticResource PhoneTextLargeStyle}" VerticalAlignment="Top" Margin="0,0,0,22" />
                <Image Grid.Column="0" Width="138" Height="25" Source="/mAppData/stars-3.png" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="0"/>
                <TextBlock Grid.Column="1" Text="{Binding DistanceInMeterFormatted, FallbackValue=fallback, TargetNullValue=nullvalue, Mode=OneWay}" TextWrapping="NoWrap" Style="{StaticResource PhoneTextSubtleStyle}" HorizontalAlignment="Right" Margin="0,0,-3,20" VerticalAlignment="Bottom"/>
                <TextBlock Grid.Column="1" Text="vor 10 min." TextWrapping="NoWrap" Margin="0" Style="{StaticResource PhoneTextSubtleStyle}" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
            </Grid>
            <Grid VerticalAlignment="Top" Margin="0,10,0,0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Image Grid.Column="0" Width="100" Height="100" Source="{Binding PreviewImg1}"/>
                <Image Grid.Column="1" Width="100" Height="100" Source="{Binding PreviewImg2}"/>
                <Image Grid.Column="2" Width="100" Height="100" Source="{Binding PreviewImg3}"/>
                <Image Grid.Column="3" Width="100" Height="100" Source="{Binding PreviewImg4}"/>
            </Grid>
        </StackPanel>
    </DataTemplate>

Now I want the complete DataTemplate Content made "clickable". Means: If user clicks on a TextBlock or one of the four Images or on whatever displayed in die List, an action should be performed with a databound property (saying the Name from the bound data should be given).

Any ideas how to get this working?

Answer 1

Why don't you just stick your entire template into a button? You can style the button if needs be to remove any default appearance you don't like. eg.

<Style x:Key="BlankButtonStyle" TargetType="ButtonBase">

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ButtonBase">
                <ContentPresenter />
            </ControlTemplate>
        </Setter.Value>
    </Setter>

    <Setter Property="Background" Value="Transparent" />
</Style>