Using a ScrollViewer in a ContextMenu.MenuItem DataTemplate

Question

I've spent a lot of time trying to understand and to implement something that looks easy.

In my WP7 application, I have a button that displays a context menu after a long tap. As this context menu is bound to a list, the number of items can be huge. Until now, I haven't been able to add a scroll viewer around my data template. But I have tested that if the data template was not there, it should work fine.

Here is my XAML:

<toolkit:ContextMenuService.ContextMenu>
    <toolkit:ContextMenu ItemsSource="{Binding}">
       <toolkit:ContextMenu.ItemTemplate>
          <DataTemplate >
             <toolkit:MenuItem Header="{Binding Path=Name}" Click="MenuItem_Click"/>
           </DataTemplate>
        </toolkit:ContextMenu.ItemTemplate>
    </toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>

I tried to add a ScrollViewer almost everywhere (before the tag: <toolkit:ContextMenuService.ContextMenu>, before the tag <toolkit:ContextMenu ItemsSource="{Binding}">,...) but nothing works

I also tried to use an attached property in my tag:

<toolkit:ContextMenu ItemsSource="{Binding}" ScrollViewer.VerticalScrollBarVisibility="Visible">

but it doesn't work either.

But if I don't use a data template like:

<toolkit:ContextMenuService.ContextMenu>
    <toolkit:ContextMenu>
        <ScrollViewer>
            <stackPanel>
                <toolkit:MenuItem Header="Item1"/>
                <toolkit:MenuItem Header="Item2"/>
                <toolkit:MenuItem Header="Item3"/>
                <toolkit:MenuItem Header="Item4"/>
            </stackPanel>
        </ScrollViewer>
    </toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>

it works fine.

Did I miss something?

Answer 1

You will want to put your ScrollViewer in the Template and a StackPanel in your ItemsPanelTemplate, so something like this:

<toolkit:ContextMenuService.ContextMenu>
    <toolkit:ContextMenu ItemsSource="{Binding}">
        <toolkit:ContextMenu.Template>
            <ControlTemplate TargetType="toolkit:ContextMenu">
                <Border>
                    <ScrollViewer>
                        <ItemsPresenter/>
                    </ScrollViewer>
                </Border>
            </ControlTemplate>
        </toolkit:ContextMenu.Template>
        <toolkit:ContextMenu.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel />
            </ItemsPanelTemplate>
        </toolkit:ContextMenu.ItemsPanel>
        <toolkit:ContextMenu.ItemTemplate>
          <DataTemplate >
             <toolkit:MenuItem Header="{Binding Path=Name}" Click="MenuItem_Click"/>
           </DataTemplate>
        </toolkit:ContextMenu.ItemTemplate>
    </toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>