Question

I was making some good progress on my App, but ran into a problem that’s stumped me. I was hoping someone could offer their expertise?

My app is intended to be a “scoresheet”… one of the PivotItems features a ScrollViewer (Horizontal scrolling, vertical disabled), with a Horizontal-orientation StackPanel inside. This StackPanel contains a “ScoreSheet” UserControl, which is basically a Grid with various text-boxes on it. So… kind of like this (except the ScoreSheet items are added to the StackPanel programmatically):

<controls:PivotItem>
   <controls:PivotItem.Header>
      <TextBlock Text="score sheet" FontSize="45" Height="80" />
   </controls:PivotItem.Header>

   <ScrollViewer Width="470" Height="560" VerticalAlignment="Top" x:Name="sv_scoresheets" MaxHeight="560" MinHeight="560" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled" IsHitTestVisible="False">
      <StackPanel Name="sp_scoresheets" Orientation="Horizontal">
         <local:ScoreSheet></local:ScoreSheet>
         <local:ScoreSheet></local:ScoreSheet>
         <local:ScoreSheet></local:ScoreSheet>
      </StackPanel>
   </ScrollViewer>

</controls:PivotItem>

The concept was that “Previous” and “Next” buttons are in the ApplicationBar at the bottom of the page, and they trigger an Animation of the ScrollViewer left or right (ie. Current Round * Width of ScoreSheet). By having “IsHitTestVisible” set to “False” on the ScrollViewer, a user can’t manually move the displayed ScoreSheet to a weird position, and swiping left/right between PivotItems still works as expected.

That all worked nicely. 🙂

However… the problem is on the ScoreSheet control, I want a few Buttons and TextBoxes so the user can enter in a score into the grid. By having “IsHitTestVisible” on the ScrollViewer, the taps/etc. just get ignored.

I tried setting “IsHitTestVisible” to “True” and instead running a function on the ScrollViewer’s ManipulationStarted event (calling “e.Complete()”)… but although that lets me access controls inside the ScoreSheet, I can’t swipe left/right between PivotItems anymore.

So… can anyone help? I was thinking maybe I could refine the ManipulationStarted behavior somehow, maybe “passing along” the action to the Pivot control instead of having the ScrollViewer move? Or some other way I can make the ScrollViewer “inactive” but allow the controls within to be interactive?

I’d really appreciate any help.
Thanks for your time!

Answer 1

Many thanks to Paul for his input and advice. A Pivot offered some extra flexibility, but still had similar issues to the ScrollViewer control when IsHitTestVisible=”False” (in that buttons and other controls on the contained elements would become unusable). Also, aesthetically for this app, I found I preferred the multiple ScoreSheets being right next to each other when the Previous/Next buttons were pressed and they were animated to show the new sheet (as PivotItems, one would scroll out of view before the next scrolled into place).

After some more thought and experimentation, I achieved the desired effect like this:

<Canvas Width="470" Height="560" VerticalAlignment="Top" MaxHeight="560" MinHeight="560" MinWidth="470" MaxWidth="470">
   <Canvas.Clip>
      <RectangleGeometry Rect="0,0,470,560" />
   </Canvas.Clip>
   <StackPanel Name="sp_scoresheets" Orientation="Horizontal" CacheMode="BitmapCache">
      <local:ScoreSheet /></local:ScoreSheet>
      <local:ScoreSheet /></local:ScoreSheet>
      <local:ScoreSheet /></local:ScoreSheet>
   </StackPanel>
</Canvas>

The “Canvas.Clip” let me hide the ScoreSheets on either side of the currently visible one, and I could animate the Canvas.Left position of the StackPanel when the Previous/Next buttons were pressed.

By avoiding the ScrollViewer or Pivot, there were no events to handle/override, and the controls in the StackPanel could then be accessed as I intended.

‘hopefully that might be of help to others. 🙂