ManipulationStarted does not work for textbox

Question

I have a white canvas, in the shape of an envelope, which contains a Return Address text box, as well as an Address text box. I would like when a user swipes the envelope, the next envelope in a collection of letters, appears on top. I've managed to get ManipulationStarted and ManipulationDelta working for the envelope shaped canvas. I however am unable to get the event handlers working for the text boxes. ManipulationMode has been set to All, for the canvas and text box controls. Can someone suggest to me what I may be doing wrong? Thank you.

Below is an excerpt of my XAML code:

            <StackPanel x:Name="EnvelopeBackground_stackpanel" Height="378" Margin="445,93,0,0" Orientation="Horizontal" VerticalAlignment="Top">
                <Canvas x:Name="EnvelopeBackground_canvas" Height="378" HorizontalAlignment="Left" VerticalAlignment="Top" Width="979" Background="#FFF7F5F5" ManipulationStarted="EnvelopeBackground_canvas_ManipulationStarted" ManipulationDelta="EnvelopeBackground_canvas_ManipulationDelta" PointerWheelChanged="EnvelopeBackground_canvas_PointerWheelChanged" ManipulationMode="All">
                    <Image x:Name="Logo_image" Height="41" Canvas.Left="22" Canvas.Top="22" Width="49" Source="." Stretch="UniformToFill" Visibility="Collapsed"/>
                    <TextBox x:Name="ReturnAddress_textbox" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Return Address" VerticalAlignment="Top" Height="78" Width="255" AcceptsReturn="True" FontSize="12" Canvas.Left="22" Canvas.Top="22" TabIndex="1" ManipulationMode="All" ManipulationStarted="ReturnAddress_textbox_ManipulationStarted" ManipulationDelta="ReturnAddress_textbox_ManipulationDelta"/>
                    <TextBlock x:Name="ReturnAddress_textblock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Return Address" VerticalAlignment="Top" Height="78" Width="255" FontSize="12" Canvas.Left="22" Canvas.Top="22" Visibility="Collapsed" Foreground="Black"/>
                    <TextBox x:Name="Address_textbox" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Address" VerticalAlignment="Top" Height="136" Width="405" AcceptsReturn="True" Canvas.Left="414" Canvas.Top="186" TabIndex="2" ManipulationMode="All" ManipulationStarted="Address_textbox_ManipulationStarted" ManipulationDelta="Address_textbox_ManipulationDelta"/>
                    <TextBlock x:Name="Address_textblock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Address" VerticalAlignment="Top" Height="136" Width="405" Canvas.Left="414" Canvas.Top="186" Visibility="Collapsed" Foreground="Black"/>
                  </Canvas>
	     </StackPanel>

Below is an excerpt of my C# code:

        private void EnvelopeBackground_canvas_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
        {
            UserNavigationInitialPosition = e.Position;
        }

        private void EnvelopeBackground_canvas_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
        {
            ProcessUserInteractionForSwipeMotion(e);
        }

        private void ProcessUserInteractionForSwipeMotion(ManipulationDeltaRoutedEventArgs e)
        {
            if (e.IsInertial)
            {
                Point CurrentPoint = e.Position;
                if (CurrentPoint.X - UserNavigationInitialPosition.X >= 20) //20 is the threshold value, where you want to trigger the swipe right event
                {
                    GoToNextLetter();
                    e.Complete();
                }
                else
                    if (CurrentPoint.X - UserNavigationInitialPosition.X <= -20) //20 is the threshold value, where you want to trigger the swipe right event
                    {
                        GoToPreviousLetter();
                        e.Complete();
                    }
            }
        }

        private void GoToNextLetter()
        {
        }

        private void GoToPreviousLetter()
        {
        }

        private void Address_textbox_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
        {
            UserNavigationInitialPosition = e.Position;
        }

        private void Address_textbox_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
        {
            ProcessUserInteractionForSwipeMotion(e);
        }

Answer 1

Hi,

I can reproduce your problem. But I do not why the problem occur. I will ask senior engineer to investigate the problem. If I have any information about the issue, I will reply to you as soon as possible.

Best Wishes!

---

We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. <br/> Click <a href="http://support.microsoft.com/common/survey.aspx?showpage=1&scid=sw%3Ben%3B3559&theme=tech"> HERE</a> to participate the survey.

Answer 2

Thank you.

Answer 3

a) You should set Manipulation mode to what exactly you want to capture. In this case TranslateRailsY looks most appropriate when you expect a user to swipe from top to bottom or vise a versa to switch between envelops. If this has to be from left to right or right to left then TranslateRailsX will be better. All is not always a good choice.

b) Actually textbox has a scrolling handler that eats up touch manipulation. If you use

ScrollViewer.HorizontalScrollMode="Disabled" ScrollViewer.VerticalScrollMode="Disabled"

on text boxes that will fix your issue.

c) If possible then use Flip View to do what you want, it is just that you will have to switch between items from left to right. See this:

<Page
  x:Class="App3.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:App3"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <FlipView Height="378" Width="979">
            <FlipView.Items>
                <Canvas Height="378" HorizontalAlignment="Left" VerticalAlignment="Top" Width="979" Background="#FFF7F5F5">
                    <Image Height="41" Canvas.Left="22" Canvas.Top="22" Width="49" Source="." Stretch="UniformToFill" Visibility="Collapsed"/>
                    <TextBox   HorizontalAlignment="Left" TextWrapping="Wrap" Text="Return Address" VerticalAlignment="Top" Height="78" Width="255" AcceptsReturn="True" FontSize="12" Canvas.Left="22" Canvas.Top="22" TabIndex="1" />
                    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Return Address" VerticalAlignment="Top" Height="78" Width="255" FontSize="12" Canvas.Left="22" Canvas.Top="22" Visibility="Collapsed" Foreground="Black"/>
                    <TextBox HorizontalAlignment="Left" TextWrapping="Wrap" Text="Address 1" VerticalAlignment="Top" Height="136" Width="405" AcceptsReturn="True" Canvas.Left="414" Canvas.Top="186" TabIndex="2"  />
                    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Address" VerticalAlignment="Top" Height="136" Width="405" Canvas.Left="414" Canvas.Top="186" Visibility="Collapsed" Foreground="Black"/>
                </Canvas>
                <Canvas Height="378" HorizontalAlignment="Left" VerticalAlignment="Top" Width="979" Background="#FFF7F5F5">
                    <Image Height="41" Canvas.Left="22" Canvas.Top="22" Width="49" Source="." Stretch="UniformToFill" Visibility="Collapsed"/>
                    <TextBox   HorizontalAlignment="Left" TextWrapping="Wrap" Text="Return Address" VerticalAlignment="Top" Height="78" Width="255" AcceptsReturn="True" FontSize="12" Canvas.Left="22" Canvas.Top="22" TabIndex="1" />
                    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Return Address" VerticalAlignment="Top" Height="78" Width="255" FontSize="12" Canvas.Left="22" Canvas.Top="22" Visibility="Collapsed" Foreground="Black"/>
                    <TextBox HorizontalAlignment="Left" TextWrapping="Wrap" Text="Address 2" VerticalAlignment="Top" Height="136" Width="405" AcceptsReturn="True" Canvas.Left="414" Canvas.Top="186" TabIndex="2"  />
                    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Address" VerticalAlignment="Top" Height="136" Width="405" Canvas.Left="414" Canvas.Top="186" Visibility="Collapsed" Foreground="Black"/>
                </Canvas>
                <Canvas Height="378" HorizontalAlignment="Left" VerticalAlignment="Top" Width="979" Background="#FFF7F5F5">
                    <Image Height="41" Canvas.Left="22" Canvas.Top="22" Width="49" Source="." Stretch="UniformToFill" Visibility="Collapsed"/>
                    <TextBox   HorizontalAlignment="Left" TextWrapping="Wrap" Text="Return Address" VerticalAlignment="Top" Height="78" Width="255" AcceptsReturn="True" FontSize="12" Canvas.Left="22" Canvas.Top="22" TabIndex="1" />
                    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Return Address" VerticalAlignment="Top" Height="78" Width="255" FontSize="12" Canvas.Left="22" Canvas.Top="22" Visibility="Collapsed" Foreground="Black"/>
                    <TextBox HorizontalAlignment="Left" TextWrapping="Wrap" Text="Address 3" VerticalAlignment="Top" Height="136" Width="405" AcceptsReturn="True" Canvas.Left="414" Canvas.Top="186" TabIndex="2"  />
                    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Address" VerticalAlignment="Top" Height="136" Width="405" Canvas.Left="414" Canvas.Top="186" Visibility="Collapsed" Foreground="Black"/>
                </Canvas>
                <Canvas Height="378" HorizontalAlignment="Left" VerticalAlignment="Top" Width="979" Background="#FFF7F5F5">
                    <Image Height="41" Canvas.Left="22" Canvas.Top="22" Width="49" Source="." Stretch="UniformToFill" Visibility="Collapsed"/>
                    <TextBox   HorizontalAlignment="Left" TextWrapping="Wrap" Text="Return Address" VerticalAlignment="Top" Height="78" Width="255" AcceptsReturn="True" FontSize="12" Canvas.Left="22" Canvas.Top="22" TabIndex="1" />
                    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Return Address" VerticalAlignment="Top" Height="78" Width="255" FontSize="12" Canvas.Left="22" Canvas.Top="22" Visibility="Collapsed" Foreground="Black"/>
                    <TextBox HorizontalAlignment="Left" TextWrapping="Wrap" Text="Address 4" VerticalAlignment="Top" Height="136" Width="405" AcceptsReturn="True" Canvas.Left="414" Canvas.Top="186" TabIndex="2"  />
                    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Address" VerticalAlignment="Top" Height="136" Width="405" Canvas.Left="414" Canvas.Top="186" Visibility="Collapsed" Foreground="Black"/>
                </Canvas>
            </FlipView.Items>
        </FlipView>
    </Grid>
</Page>

Did I understand your issue properly? I hope so.

---

-- Vishal Kaushik --

Please 'Mark as Answer' if my post answers your question and 'Vote as Helpful' if it helps you. Happy Coding!!!

My Samples

My Codeplex Project

Answer 4

Thanks very much for your reply. I added the code you suggested in the b) section of your reply, to my text box controls, and that solved the problem. Regarding the a) section of your reply, I tried assigning different values to the ManipulationMode property of my controls, but no value by itself, was able to get both ManipulationStarted and ManipulationDelta event handlers working. I therefore resorted to assigning the value All to ManipulationMode. Later on, I will try to see if I'm able to get both ManipulationStarted and ManipulationDelta event handlers working, by assigning a combination of values to ManipulationMode.

Regarding the c) section of your reply: thanks for your suggestion. However, my app allows users to print variable amounts of envelopes in bulk. What I want to do, is provide an option for the user to flick back and forth through the stack of letters he wants to print. Because of the variable quantity of letters, it seems best to me, to allow the user to initiate the repopulation of the Return Address, Address, and other fields on the envelope, whenever he swipes the envelope - to simulate moving forwards and backwards throughout the stack - vs. flicking through a finite number of controls.

Below is a fuller representation of envelope canvas:

                <Canvas x:Name="EnvelopeBackground_canvas" Height="378" HorizontalAlignment="Left" VerticalAlignment="Top" Width="979" Background="#FFF7F5F5" ManipulationStarted="EnvelopeBackground_canvas_ManipulationStarted" ManipulationDelta="EnvelopeBackground_canvas_ManipulationDelta" PointerWheelChanged="EnvelopeBackground_canvas_PointerWheelChanged" ManipulationMode="All">
                    <Image x:Name="Logo_image" Height="41" Canvas.Left="22" Canvas.Top="22" Width="49" Source="." Stretch="UniformToFill" Visibility="Collapsed"/>
                    <TextBox x:Name="ReturnAddress_textbox" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Return Address" VerticalAlignment="Top" Height="78" Width="255" AcceptsReturn="True" FontSize="12" Canvas.Left="22" Canvas.Top="22" TabIndex="1" ManipulationMode="All" ManipulationStarted="ReturnAddress_textbox_ManipulationStarted" ManipulationDelta="ReturnAddress_textbox_ManipulationDelta" ScrollViewer.HorizontalScrollMode="Disabled" ScrollViewer.VerticalScrollMode="Disabled"/>
                    <TextBlock x:Name="ReturnAddress_textblock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Return Address" VerticalAlignment="Top" Height="78" Width="255" FontSize="12" Canvas.Left="22" Canvas.Top="22" Visibility="Collapsed" Foreground="Black"/>
                    <TextBox x:Name="Address_textbox" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Address" VerticalAlignment="Top" Height="136" Width="405" AcceptsReturn="True" Canvas.Left="414" Canvas.Top="186" TabIndex="2" ManipulationMode="All" ManipulationStarted="Address_textbox_ManipulationStarted" ManipulationDelta="Address_textbox_ManipulationDelta" ScrollViewer.HorizontalScrollMode="Disabled" ScrollViewer.VerticalScrollMode="Disabled"/>
                    <TextBlock x:Name="Address_textblock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Address" VerticalAlignment="Top" Height="136" Width="405" Canvas.Left="414" Canvas.Top="186" Visibility="Collapsed" Foreground="Black"/>
                    <Rectangle x:Name="OuterLongHorizontalBottomShadowLine_rectangle"  Fill="{StaticResource ApplicationPageBackgroundThemeBrush}" Height="2" Canvas.Left="8" Stroke="{StaticResource ApplicationPageBackgroundThemeBrush}" Canvas.Top="367" Width="973"/>
                    <Rectangle x:Name="OuterLeftVerticalShadowLine_rectangle" Fill="{StaticResource ApplicationPageBackgroundThemeBrush}" Height="368" Canvas.Left="8" Stroke="{StaticResource ApplicationPageBackgroundThemeBrush}" Width="2"/>
                    <Rectangle x:Name="FirstTopHorizontalShadowLine_rectangle" Fill="{StaticResource ApplicationPageBackgroundThemeBrush}" Height="10" Canvas.Left="0" Stroke="{StaticResource ApplicationPageBackgroundThemeBrush}" Width="20"/>
                    <Rectangle x:Name="FirstBottomVerticalShadowLine_rectangle" Fill="{StaticResource ApplicationPageBackgroundThemeBrush}" Height="25" Canvas.Left="969" Stroke="{StaticResource ApplicationPageBackgroundThemeBrush}" Width="20" Canvas.Top="357"/>
                    <Rectangle x:Name="InnterLeftVerticalShadowLine_rectangle" Fill="{StaticResource ApplicationPageBackgroundThemeBrush}" Height="359" Canvas.Left="18" Stroke="{StaticResource ApplicationPageBackgroundThemeBrush}" Width="2"/>
                    <Rectangle x:Name="SecondTopHorizontalShadowLine_rectangle" Fill="{StaticResource ApplicationPageBackgroundThemeBrush}" Height="10" Canvas.Left="-12" Stroke="{StaticResource ApplicationPageBackgroundThemeBrush}" Width="22" RenderTransformOrigin="-0.042,3.5" Canvas.Top="10"/>
                    <Rectangle x:Name="InnerLongHorizontalBottomShadowLine_rectangle"  Fill="{StaticResource ApplicationPageBackgroundThemeBrush}" Height="2" Canvas.Left="20" Stroke="{StaticResource ApplicationPageBackgroundThemeBrush}" Canvas.Top="357" Width="973"/>
                    <Rectangle x:Name="SecondBottomVerticalShadowLine_rectangle" Fill="{StaticResource ApplicationPageBackgroundThemeBrush}" Height="25" Canvas.Left="959" Stroke="{StaticResource ApplicationPageBackgroundThemeBrush}" Width="20" Canvas.Top="368"/>
                    <TextBox x:Name="HorizontalNote_textbox" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Horizontal Note" VerticalAlignment="Top" Height="78" Width="855" AcceptsReturn="True" FontSize="14" Canvas.Left="22" Canvas.Top="113" TabIndex="1" ManipulationMode="All" ManipulationStarted="HorizontalNote_textbox_ManipulationStarted" ManipulationDelta="HorizontalNote_textbox_ManipulationDelta" ScrollViewer.HorizontalScrollMode="Disabled" ScrollViewer.VerticalScrollMode="Disabled"/>
                    <TextBlock x:Name="HorizontalNote_textblock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Horizontal Note" VerticalAlignment="Top" Height="78" Width="855" FontSize="14" Canvas.Left="22" Canvas.Top="113" Visibility="Collapsed" Foreground="Black"/>
                    <TextBox x:Name="LeftNote_textbox" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Left Note" VerticalAlignment="Top" Height="136" Width="305" AcceptsReturn="True" Canvas.Left="22" Canvas.Top="186" TabIndex="2" ManipulationMode="All" ManipulationStarted="LeftNote_textbox_ManipulationStarted" ManipulationDelta="LeftNote_textbox_ManipulationDelta" ScrollViewer.HorizontalScrollMode="Disabled" ScrollViewer.VerticalScrollMode="Disabled"/>
                    <TextBlock x:Name="LeftNote_textblock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Left Note" VerticalAlignment="Top" Height="136" Width="305" Canvas.Left="22" Canvas.Top="186" Visibility="Collapsed" Foreground="Black"/>
                    <TextBlock x:Name="EnvelopeSizeHeader_textblock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="ENVELOPE SIZE:" VerticalAlignment="Top" Width="100" Height="16" FontSize="14" Canvas.Left="0" Canvas.Top="396" RenderTransformOrigin="0.62,0.25"/>
                    <TextBlock x:Name="EnvelopeSize_textblock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="No. 10  (4.12 in x 9.50 in)" VerticalAlignment="Top" Width="504" Height="16" FontSize="14" Canvas.Left="110" Canvas.Top="396" RenderTransformOrigin="0.62,0.25"/>
                    <TextBlock x:Name="PrintStatusHeader_textblock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="PRINT STATUS:" VerticalAlignment="Top" Width="94" Height="16" FontSize="14" Canvas.Left="1" Canvas.Top="420"/>
                    <TextBlock x:Name="PrintStatus_textblock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Ready to print" VerticalAlignment="Top" Width="467" Height="66" FontSize="14" Canvas.Left="110" Canvas.Top="420"/>

                    <Canvas Grid.Column="1" HorizontalAlignment="Left" Height="88" Grid.Row="1" VerticalAlignment="Top" Width="98" Canvas.Left="840" Canvas.Top="391">
                        <StackPanel Orientation="Vertical" Grid.Column="1" Width="98" Height="88">
                            <Button Style="{StaticResource AppBarButtonStyle}" x:Name="Envelope_Back_Button"  
                            FontFamily="Webdings" FontSize="18.667"                             
                            Margin="0,0,0,-25"
                            Content="7" TabIndex="17" />
                            <TextBlock HorizontalAlignment="Center" FontSize="12" Text="Back" />
                        </StackPanel>
                    </Canvas>
                    <Canvas Grid.Column="1" HorizontalAlignment="Left" Height="88" Grid.Row="1" VerticalAlignment="Top" Width="98" Canvas.Left="910" Canvas.Top="391">
                        <StackPanel Orientation="Vertical" Grid.Column="1" Width="98" Height="88">
                            <Button Style="{StaticResource AppBarButtonStyle}" x:Name="Envelope_Forward_Button"  
                            FontFamily="Webdings" FontSize="18.667" 
                            Margin="0,0,0,-25"
                            Content="8" TabIndex="18" />
                            <TextBlock HorizontalAlignment="Center" FontSize="12" Text="Forward" />
                        </StackPanel>
                    </Canvas>
                </Canvas>

Once again, I really appreciate your reply.

Answer 5

Vishal's fix b) works - disabling both directions of the TextBox's built-in scrollViewer allows the events to come through.  Unfortunately, Scrolling in both directions must be disabled.  That means a set of text-Wrapped, but max-height-limited TextBoxes in a ListBox can make use of their internal ScrollViewer to allow vertical only scrolling of contained text, but that will also prevent all manipulation events even all horizontal events that might be used for initiation of a swipe or drag action on the TextBox.  That's a problem for me.  Any solutions to that?  In other words, I want to have vertical scrolling in my TextBox, but allow horizontal manipulation events to fire and be handled.

Answer 6

You are trying to use same gesture to do two different operations, which should always be avoided.

Here are two possible solutions

(1) I will try to enable scrolling on focus event of text box and when it gets out of focus disable scrolling again. In markup keep scrolling disabled.

(2) In manipulation handlers, implement a logic to decide if it is TextBox scroll or Envelope change action that user wants. For this best place is to find elements at start point of gesture in manipulation started event. If it has TextBox over there then it is TextBox scroll or else it is Envelop Change action. It is little hard to implement but equally confusing to user.

---

-- Vishal Kaushik --

Please 'Mark as Answer' if my post answers your question and 'Vote as Helpful' if it helps you. Happy Coding!!!

My Samples

My Codeplex Project