如何在列表框的文本块上添加点击事件？

Question

我正在开发 Windows Phone 7 应用程序。我的应用程序中有一个列表框。我正在与该列表框进行动态绑定。列表框的代码如下：

<ListBox x:Name="FirstListBox" Margin="0,0,-12,0" ItemsSource="{Binding Items}" >
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Margin="0,0,0,17" Width="432">
                <TextBlock  Text="{Binding ID}" Width="440"></TextBlock>
                <TextBlock Text="{Binding IsCompany}" Width="440"></TextBlock>                                                                       
                <TextBlock Foreground="Red" Text="{Binding CompanyORIndividual}" Width="440"></TextBlock>                                                                            
                <TextBlock  Text="{Binding MicrosoftContact}" Width="440"></TextBlock>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
    <ListBox.Template>
        <ControlTemplate>
            <ScrollViewer HorizontalScrollBarVisibility="Visible">
                <ItemsPresenter />
            </ScrollViewer>
        </ControlTemplate>
        </ListBox.Template>
</ListBox>

该列表框位于枢轴控件内部。我想在以下文本块中添加链接或单击事件一。

<TextBlock Foreground="Red" Text="{Binding CompanyORIndividual}" Width="440"></TextBlock>

因此，单击 CompanyORIndividual 文本块后，用户应该导航到另一个 xaml 页面。如何做到这一点。您能给我提供事件处理程序的代码吗？您能给我提供可以解决上述问题的代码或链接吗？如果我做错了什么，请指导我。如果有比我上面的问题更好的想法，请提出建议。

Answer 1

您可以用网格包裹 TextBlock，并为其指定透明颜色。然后你将一个 NavigateToPageAction 附加到 Grid，就像这样，

xmlns:Custom="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:ic="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions"

<Grid Background="Transparent">
    <Custom:Interaction.Triggers>
        <Custom:EventTrigger EventName="MouseLeftButtonDown">
            <ic:NavigateToPageAction TargetPage="/Views/YourView.xaml" />
        </Custom:EventTrigger>
    </Custom:Interaction.Triggers>
<TextBlock Foreground="Red" Text="{Binding CompanyORIndividual}" HorizontalAlignment="Left"/>
</Grid>

你需要给 Grid 一个颜色的原因是因为这样做将能够接收鼠标点击。请尝试一下，如果您在使用时遇到问题，请告诉我。

或者，您可以用 Button 包装 TextBlock，然后处理 Button 的单击事件。

更新：

Matt 的说法是正确的，即使用 MouseLeftButtonDown/MouseLeftButtonUp 有时可能会很糟糕。

在我自己的项目中，我为按钮创建了一个简单的样式，其作用类似于可单击的 TextBlock。使用按钮的另一个好处是它可以接收 TiltEffect 并允许命令。

<Style x:Key="TextButtonStyle" TargetType="Button">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
    <Setter Property="Foreground" Value="{StaticResource PhoneAccentBrush}"/>
    <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
    <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiLight}"/>
    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeLarge}"/>
    <Setter Property="Padding" Value="{StaticResource PhoneTouchTargetOverhang}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid Background="Transparent">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver"/>
                            <VisualState x:Name="Pressed"/>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
</Style>

Answer 2

我建议使用 Tap 手势（来自 Silverlight Toolkit) 在文本块上。这将避免用户滚动列表框时错误检测鼠标按钮向上或向下事件的问题。在我看来，这还提供了比检测列表框中更改的 SelectedItem 更好的用户体验。

Answer 3

这是我使用 VS2010 所做的。

1. 在 xaml 窗口中选择 TextBlock 控件。
2. 在属性窗口中，选择事件。
3. 找到 MouseLeftButtonUp，然后双击空值文本框，这将引导您到窗口后面的 xaml.cs 代码，并创建一个新方法。
4. 将 this.Close(); 放入该方法中。

Answer 4

作为我在 WP8 (Silverlight) 中遇到的类似问题的解决方法，我使用了具有透明背景的按钮和 Click 事件处理程序。

现在的问题是，每当用户触摸/单击按钮时，纯色 PhoneAccent 颜色就会设置为按钮的背景（在用户按住按钮的时间段内）。

为了避免这种情况，您可以设置按钮的 ClickMode="Pressed" 并在 Click 事件中使用 MyButton.Background = new SolidColorBrush(Colors.透明);

每当 Button 处于按下状态时触发 Click 事件时，背景就会设置为透明，因此当 Button 处于该状态时，背景颜色会设置为 Button。当按钮处于按下状态时，不设置 ClickMode="Pressed" 将不会设置背景颜色。