We’re writing an application for Windows tablet PCs. I have created a custom control that uses a SurfaceScrollViewer to render a vertical and scrollable list to the right of the window. The control uses an Adorner to add itself to the adorner layer of the Window so that it can be rendered over the top of the window content.
It works really nicely, but the surface scroll viewer will only scroll through the mouse wheel or through the scroll bar. I’d like to be able to hide the scroll bar and rely on the user dragging the list by touch, but this refuses to work. We’ve used the SurfaceScrollViewer control elsewhere in this project and this has worked fine, so I’m guessing that this issue is down to either how the control has been built, or maybe because it’s in an AdornerLayer? Something to do with registering touch with Surface? The strange thing is that the SurfaceButton controls in the list work fine.
Any help or advice would be most appreciated. This is basically the custom control. I’ve removed a couple of binding bits and pieces to cut down the size, and I’ve added the surrounding Window/AdornerLayer/Adorner elements to put it in context.
EDIT – The adorner is actually added to the adorner layer of a Grid which is a child of the Window. I’ve updated the XAML below.
<Window x:Name="Main">
<Grid>
<AdornerDecorator>
<!-- Adorner layer added to Window in code-behind -->
<AdornerLayer>
<Adorner>
<!-- Custom Control Starts Here -->
<Grid x:Name="root" Visibility="Collapsed" Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=Window}}" Height="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType=Window}}">
<Controls:SurfaceButton x:Name="btnCloser" Opacity="0" Background="White"/>
<Grid x:Name="menu" Width="400" HorizontalAlignment="Right" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="20"/>
<RowDefinition />
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<Border Opacity="0.75" BorderThickness="0" Background="Black" Grid.RowSpan="5" />
<TextBlock Text="{TemplateBinding Title}" FontSize="24" Grid.Row="1" Foreground="White" HorizontalAlignment="Center" Margin="10"/>
<Controls:SurfaceScrollViewer Grid.Row="3" Margin="5" Elasticity="0.0, 0.5" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
<ItemsControl x:Name="items" Background="Transparent" ItemsSource="{TemplateBinding MenuItems}">
<ItemsControl.Style>
<Style>
<Setter Property="ItemsControl.ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemsControl.ItemTemplate">
<Setter.Value>
<DataTemplate>
<Controls:MyButton HorizontalContentAlignment="Center" Margin="3" Content="(Bound Stuff)" Background="(Bound Stuff)"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</ItemsControl.Style>
</ItemsControl>
</Controls:SurfaceScrollViewer>
</Grid>
</Grid>
</Adorner>
</AdornerLayer>
</AdornerDecorator>
</Grid>
</Window>
Okay – I got to the bottom of it. I realised that the answer is the same one that has come up several times during this project, yet I still lose sight of it every now and then. Maybe this time it’ll sink in for good!
The problem was the ItemsControl. It’s not a Surface control, and so it wasn’t playing nicely with the Surface controls. I think essentially what happens is that the Surface controls tend to gobble up events before anything else gets a chance – or maybe it’s the other way around.
Anyway, I replaced it with the following SurfaceListBox and this has worked a treat!