How to use Gestures to change content of a customcontrol?

Question

I'm lost...Back to SO :)

The following code correctly displays lines of text through my customcontrol, ccGistaFigure. I am now placing an InkCanvas over the control. Initially, the InkCanvas will be set to recognize Gestures only.

What I am trying to figure out is how upon receiving a specific gesture, the InkCanvas can tell the customcontrol to change itself or, is there a way of having the XAML swap out the ccGistaFigure for another ccGistaFigure object?

Specifically, if I tap over a word on the InkCanvas, I want to be able to determine what word I tapped over and force the customcontrol to add spaces between the letters of that word. So if the word is "Testing", then a tap (or gesture) over the word should change the text to "T_e_s_t_i_n_g".

(ccGistaFigure derives from FrameworkElement and is displaying strings directly from a FormattedText object).

Assuming I can determine the word that was tapped on, what is the best method to change the display?

My current XAML is:

<UserControl x:Class="Nova5.UI.Views.Ink.InkEditorView"
       .....

<Grid Background="#FFE24848" >

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="3*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
        <Canvas Grid.Row="1" Grid.RowSpan="3">

        <ScrollViewer VerticalScrollBarVisibility="Auto" 
            Width="{Binding Parent.ActualWidth, Mode=OneWay, RelativeSource={RelativeSource Self}}"
            Height="{Binding Parent.ActualHeight, Mode=OneWay, RelativeSource={RelativeSource Self}}" 
              >
           <Grid Background="White" >
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition Height="100"/>
                </Grid.RowDefinitions>
                <wc:ccGistaFigure Grid.Row="0"
                                  Text="{Binding Text, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}" 
                                  LineHeight="{Binding LineHeight, UpdateSourceTrigger=PropertyChanged,Mode=OneWayToSource}"
                                  AscenderlineOffset="{Binding AscenderlineOffset, UpdateSourceTrigger=PropertyChanged,Mode=OneWayToSource}"
                                  DescenderlineOffset="{Binding DescenderlineOffset, UpdateSourceTrigger=PropertyChanged,Mode=OneWayToSource}"
                                  MidlineOffset="{Binding MidlineOffset,UpdateSourceTrigger=PropertyChanged,Mode=OneWayToSource}"
                                  BaselineOffset="{Binding BaselineOffset, UpdateSourceTrigger=PropertyChanged, Mode=OneWayToSource}"
                                  WritingPadSize="{Binding WritingPadSize, UpdateSourceTrigger=PropertyChanged, Mode=OneWayToSource}"
                                  />


                <InkCanvas  Grid.Row="0" Grid.RowSpan="2"
                    Background="Transparent" 
                    DefaultDrawingAttributes="{Binding Pen}" 
                    EditingMode="{Binding EditingMode}" 
                    Strokes="{Binding Strokes}" />

            </Grid>
        </ScrollViewer>
    </Canvas>

</Grid>
</UserControl>

Any idea is most appreciated. Thanks.

It's a bit unclear what exactly is being asked: do you have problems of actually 'expanding' the letters? Or do you have problem of hooking into the event of "hey, ccGistaFigure was being clicked on"? Or do you have any other problems? — Erti-Chris Eelmaa, Dec 21 '14 at 21:47
@ChrisEelmaa I actually have problems with all the above, but I was mostly hoping for an XAML approach to somehow "switching" out the first ccGistaFigure with a second ccGistaFigure where the text was been changed. The biggest problem, though, will be determining exactly which character was clicked on. (Note: I will be using "gestures" as provided by the InkCanvas with a pen). Thanks. — Alan Wayne, Dec 22 '14 at 04:09
What do you mean by "biggest problem is determining exactly which character was clicked on?" - why do you need to know that? I thought we were talking about words. — Erti-Chris Eelmaa, Dec 22 '14 at 20:11

score 1 · Answer 1 · answered Dec 21 '14 at 21:55

1

If you want to enable touch events on the ccGistaFigure, you'd have to do so:

<wc:ccGistaFigure 
     x:Name="gistaFigure"
     TouchDown="TouchEventHandler"
     IsManipulationEnabled="true" ../>

and define this in the code-behind:

private void TouchEventHandler(object sender, TouchEventArgs e)
{
    gistaFigure.InternalText = string.Join("_", gistaFigure.Text.ToCharArray())
}

answered Dec 21 '14 at 21:55

Erti-Chris Eelmaa

25,338
6
61
78

Thanks. You answered the first part of this -- Use events. gistaFigure is of type FrameworkElement, there is no "InternalText", unless you mean the Text dependency property? Thanks. – Alan Wayne Dec 22 '14 at 04:12
@AlanWayne: It's hard to answer because the question is pretty broad. You can't change `Text` because that would override the actual binding. Are you going to need functionality where the same touch event will bring word back "together"? M_Y_W_O_R_D => MYWORD after clicking on it? Either way what you end up doing is eithe: wrapping the ccGistaFigure inside custom control, or writing attached property. – Erti-Chris Eelmaa Dec 22 '14 at 20:14

How to use Gestures to change content of a customcontrol?

1 Answers1