How to add the click event on textblock of listbox? - windows-phone-7

Question

I am developing window phone 7 application. I have a listbox in my application. I am doing dynamic binding with that listbox. The code of listbox is as follows:
<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>
This listbox is inside the pivot control. I want to add the link or click event one the following textblock.
<TextBlock Foreground="Red" Text="{Binding CompanyORIndividual}" Width="440"></TextBlock>
So that after clicking on the CompanyORIndividual textblock the user should be navigated to the other xaml page. How to do this. Can you please provide me the code with the event handler ? Can you please provide me nay code or link through which I can resolve the above issue ? If I am doing anything wrong then please guide me.If there is any better idea than my above question then please suggest it.

Answer 1

you can wrap the TextBlock with a Grid, and give it a Transparent color. Then you attach a NavigateToPageAction to the Grid, something like this,
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>
The reason that you need to give the Grid a color is because doing so will be able to receive mouse click. Please give it a try and let me know if you have problems using it.
Alternatively, you can wrap the TextBlock with a Button, then handle the Button's click event.
Update:
Matt is right about the thing that using MouseLeftButtonDown/MouseLeftButtonUp may sometimes be bad.
In my own project I have created a simple style for a button which acts like a clickable TextBlock. Also another good thing of using a button is it can receive the TiltEffect and allow Commanding.
<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

I'd recommend using a Tap gesture (from the Silverlight Toolkit) on the TextBlock. This will avoid issues with incorrectly detecting mousebutton up or down events when the user is scrolling the listbox. In my opinion this also provides a better user experience than detecting SelectedItem changed on the Listbox.

Answer 3

Here is what I did using VS2010.
Select the TextBlock control in the xaml window.
In the properties window, select Events.
Locate MouseLeftButtonUp, and double-click in the empty value text box, that will lead you to the xaml.cs code behind window, and will create a new method.
Place this.Close(); in that method.

Answer 4

As workaround for a similar problem I faced in WP8 (Silverlight), I used a Button with transparent background and a Click event handler.
Now the problem with this is that, whenever the user touches/clicks on the button, a solid PhoneAccent color is set as the button's background (for the time period user holds it).
To avoid this, you can set the button's ClickMode="Pressed" and in Click event set the background to transparent with MyButton.Background = new SolidColorBrush(Colors.Transparent);
Background is set to transparent whenever the Click event is fired with Button in Pressed state so the background color is set to Button when it is in that state. Not setting the ClickMode="Pressed" will not set Background color when Button is in pressed state.