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

score 23 · Accepted Answer · edited Feb 08 '12 at 20:42

23

Yes, there is a click event. Its called MouseLeftButtonDown

textBlock1.MouseLeftButtonDown +=new MouseButtonEventHandler(textBlock1_MouseLeftButtonDown);

private void textBlock1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{

}

edited Feb 08 '12 at 20:42

MyKuLLSKI

5,285
3
20
39

answered Nov 29 '10 at 21:38

alansiqueira27

8,129
15
67
111

1

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. – Luke Puplett Dec 18 '10 at 18:38
1

According to my test, MouseLeftButtonUp acts exactly like click. Why not try that? – Haozhun Dec 09 '11 at 03:41
4

Note that 7.1 (Mango) adds the Tap event. – Michael Itzoe Sep 21 '12 at 19:02

score 14 · Answer 2 · answered Dec 26 '11 at 10:00

14

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.

answered Dec 26 '11 at 10:00

Mark Vincze

7,737
8
42
81

@KaanonMacFarlane what do you mean? – Louis Rhys Nov 28 '12 at 01:55

Mick N · Answer 3 · 2010-12-04T04:34:46.723

7

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.

edited Dec 04 '10 at 04:34

answered Nov 29 '10 at 22:05

Mick N

14,892
2
35
41

@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. – Mick N Dec 08 '10 at 17:15
+1, no reason for a downvote here. Good tip about gesture support! – Fredrik Hedblad Jan 06 '11 at 08:20

score 5 · Answer 4 · answered Dec 06 '11 at 11:07

5

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>

answered Dec 06 '11 at 11:07

Ku6opr

8,126
2
24
31

you need to create `OnlyContentStyle` style as mentioned in my answer – Ku6opr Jan 07 '13 at 10:01
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... – vidstige Jan 07 '13 at 17:41
@Ku6opr Please further explain how to create that style to be used by the button. – Migisha Aug 26 '13 at 08:35
2

In Blend: right click on Button, edit Template - Edit a Copy. Than remove all Borders, animations and so on – Ku6opr Nov 21 '13 at 18:24

score 3 · Answer 5 · edited Feb 08 '12 at 20:41

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 );
     }
}

score 2 · Answer 6 · answered Nov 30 '10 at 19:53

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

score 0 · Answer 7 · answered Feb 21 '23 at 02:15

0

Catch Click event for UWP Control can be done using PointerReleased

answered Feb 21 '23 at 02:15

Hugo

2,077
2
28
34

score 0 · Answer 8 · answered Nov 04 '11 at 13:27

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.

"Clickable" textblock?

8 Answers8