"Clickable" textblock?

Question

I have a WP7 app where I would like to have a "clickable" TextBlock area, that when a user clicks on the TextBlock, it puts it into edit mode (a different control). This would add another explicit step for a user before editing text.

There is no click event for the TextBlock (which doesn't surprise me).

Is there any way to do this? Wrapped in another control, or something similar?

Churn

Answer 1

Yes, there is a click event. Its called MouseLeftButtonDown

textBlock1.MouseLeftButtonDown +=new MouseButtonEventHandler(textBlock1_MouseLeftButtonDown);

private void textBlock1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{

}

Minoan

Check that the event doesn't fire when a user is scrolling. The Click of a button is smart enough to be cancelled when the user was beginning a gesture/swipe. – Leggett

According to my test, MouseLeftButtonUp acts exactly like click. Why not try that? – Arachne

Note that 7.1 (Mango) adds the Tap event. – Arkansas

Answer 2

I have solved this by creating a Button with the TextBlock inside its Template like this:

<Button Click="button_Click">
    <Button.Template>
        <ControlTemplate>
            <TextBlock ... />
        </ControlTemplate>
    </Button.Template>
</Button>

It's a bit more markup, but you don't need to write any code, it is provided by the framework and works properly.

Shagreen

@KaanonMacFarlane what do you mean? – Bartle

Answer 3

You can associate a click event using gesture support.

edit: by doing it this way your behaviour will be consistant with a Click (tap) with respect to the user moving their finger across the display during the operation. Click will not fire under mousedown, move off control, mouseup. Tap gesture works the same. Not all users know they can abort a click by moving their mouse/finger, but some do and you'll get caught out on this if not handling it correctly. MouseLeftButtonUp handling works the same way, but I wouldn't recommend relying on this as it's not by design and there may be unanticipated changes or conflicts with other controls.

Computation

@Alan I disagree with the reasoning for your down vote. I disagree with your solution also. MouseLeftButton down is not behaviourly consistent with a click event in all cases. You argue keeping it simple, I would argue the marked answer is an approximation to the solution. I feel no cause to remove this answer as a result of your down vote. – Computation

+1, no reason for a downvote here. Good tip about gesture support! – Attaint

Answer 4

There are several answers which advice to use MouseLeftButton events, but I saw a lot of examples where this approach goes wrong. I recommend to place TextBlock (or other control/controls) into a Button with a custom style (removed all borders/margins except content control). It's MUCH MUCH BETTER!

 <Button Style={StaticResource OnlyContentStyle}>
      <Button.Content>
           <TextBlock />
      </Button.Content>
 </Button>

Unrighteous

you need to create OnlyContentStyle style as mentioned in my answer – Unrighteous

and how do you do that? I just think that your idea is much better, but your answer is not very thourough. Also there are some quotes missing... – Impress

@Unrighteous Please further explain how to create that style to be used by the button. – Radiometer

In Blend: right click on Button, edit Template - Edit a Copy. Than remove all Borders, animations and so on – Unrighteous

Answer 5

Another way of doing it is using Seva's solution but adding a bit more so scrolling won't trigger the 'Click'

bool _IsMouseDown = false;

private void Textblock_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    _IsMouseDown = true;
}

private void Textblock_MouseLeave(object sender, MouseEventArgs e)
{
    _IsMouseDown = false;
}

private void Textblock_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    if (_IsMouseDown)
    {
        _IsMouseDown = false;

        //ITS a CLick do something!
        Textblock clickedButton = (Textblock)sender;
        AddNumberToRolledNumbers(Convert.ToInt32(clickedButton.Tag),clickedButton.Background );
     }
}

Goosy

Answer 6

It sounds like you just need a button. Change the control template to remove the border styling etc. and make your own (or clear the existing) visual states. Or even edit it so the 'depressed' state gives a little 3D projection.

Also, with a button, you can also use the Command on the button if you're using MVVM.

Luke

Leggett

Answer 7

private void txtPersonName_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        var txtPersonName = e.OriginalSource as TextBlock;

        if (txtPersonName == null) return;

        MouseButtonEventHandler eveMouseLeftButtonUp = (sen, eve) => NavigationService.Navigate(new Uri("/Views/PersonPage.xaml?personId=" + txtPersonName.Tag, UriKind.RelativeOrAbsolute));
        MouseEventHandler eveMouseMove = (sen, eve) => txtPersonName.MouseLeftButtonUp -= eveMouseLeftButtonUp;

        txtPersonName.MouseLeftButtonUp += eveMouseLeftButtonUp;
        txtPersonName.MouseMove += eveMouseMove;
    }

I prefer to add one event and do the rest dynamically.

Grunberg

Answer 8

Catch Click event for UWP Control can be done using PointerReleased

Droit