完整的 DataTemplate 可点击？答案

【问题标题】：Complete DataTemplate clickable?完整的 DataTemplate 可点击？
【发布时间】：2014-05-07 06:36:12
【问题描述】：

我在我的 XAML 视图中的 phone.LongListSelector 中使用了以下 DataTemplate：

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

现在我希望将完整的 DataTemplate 内容设为“可点击”。意思是：如果用户点击 TextBlock 或四个图像之一或列表中显示的任何内容，则应使用数据绑定属性执行操作（即应给出绑定数据中的 Name）。

任何想法如何让它工作？

【问题讨论】：

使用 selectedIndexchanged 事件而不是 longlistselector 上的任何点击事件。

标签： c# xaml windows-phone-8 mvvm

【解决方案1】：

为什么不将整个模板粘贴到一个按钮中？如果需要删除您不喜欢的任何默认外观，您可以设置按钮样式。例如。

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

【讨论】：

听起来是个好主意。我现在用<Button> 附上了StackPanel。但还有两个问题：我必须将您的 sn-p 放在 XAML 文件中的哪个位置？以及如何在按钮的单击事件中访问绑定项？
样式资源可以放在资源链中的任何位置（每个元素都有一个 .Resources 集合）。像这样的样式在整个应用程序中都很有用，因此我个人会将其粘贴在 app.xaml 中。按钮具有可以绑定到视图模型上的命令的命令属性。我会使用它而不是点击事件，否则使用按钮没有意义，任何元素都可以引发点击事件
将您在我页面上的 sn-p 放入 <phone:PhoneApplicationPage.Resources>，编辑在 <Setter Property... 上表示，OverridesDefaultStyle 和 FocusVisualStyle 该成员未被重新识别。
抱歉，这些是 Silverlight 中没有的 WPF 属性。您可能可以删除这些行。
谢谢。将TargetType 从ButtonBase 更改为Button，删除了这两行，现在一切正常。