Need to create a context menu having header and scroll bar support

Question

I need a global context menu style/template having a header and then various menu items; as the number of menu items in my context menu can be large it needs to support the scrolling.

The problem with current style I have is that it does not support the scrolling; even when the number of menu items grows past the screen size no scroll bar is displayed.

Here is the current style I am using -

<Style
    TargetType="{x:Type ContextMenu}"
    x:Key="ContextMenuStyle">
    <Setter
        Property="ContextMenu.Template">
        <Setter.Value>
            <ControlTemplate>
                <Border
                    BorderBrush="#868686"
                    BorderThickness="1"
                    Background="#FAFAFA">
                    <StackPanel
                        Orientation="Vertical">
                        <Label
                            Foreground="White"
                            Background="Blue">
                            <Binding
                                RelativeSource=
                                              "{RelativeSource AncestorType=
                                                {x:Type ContextMenu}}"
                                Path="PlacementTarget.Tag" />
                        </Label>
                        <Grid>
                            <Rectangle
                                Margin="1,1,1,1"
                                Width="25"
                                HorizontalAlignment="Left"
                                Fill="#E9EEEE" />
                            <Rectangle
                                Margin="26,1,0,1"
                                Width="1"
                                HorizontalAlignment="Left"
                                Fill="#C5C5C5" />
                            <Rectangle
                                Margin="27,1,0,1"
                                Width="1"
                                HorizontalAlignment="Left"
                                Fill="#FAFAFA" />
                            <ScrollViewer
                                Margin="1,0,1,0"
                                Style="{DynamicResource 
                                         {ComponentResourceKey                
                                         ResourceId=MenuScrollViewer,  
                                         TypeInTargetAssembly=
                                         {x:Type FrameworkElement}}}"
                                CanContentScroll="True"
                                Grid.ColumnSpan="2">
                                <ItemsPresenter
                                    KeyboardNavigation.DirectionalNavigation=
                                    "Cycle" />
                            </ScrollViewer>
                        </Grid>
                    </StackPanel>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Placing hte scroll viewer above header works but then header is also scrolled.

What is the best way to achieve this?

Answer 1

Try it like this instead. Changed the Vertical StackPanel (which doesn't restrict the Height) to a Grid with two RowDefinitions (Auto, *)

<Style TargetType="{x:Type ContextMenu}">
    <Setter Property="ContextMenu.Template">
        <Setter.Value>
            <ControlTemplate>
                <Border BorderBrush="#868686"
                        BorderThickness="1"
                        Background="#FAFAFA">
                    <Grid VerticalAlignment="Stretch">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Label Grid.Row="0" Foreground="White" Background="Blue">
                            <Binding RelativeSource= "{RelativeSource AncestorType= {x:Type ContextMenu}}" Path="PlacementTarget.Tag" />
                        </Label>
                        <Grid Grid.Row="1">
                            <Rectangle Margin="1,1,1,1"
                                        Width="25"
                                        HorizontalAlignment="Left"
                                        Fill="#E9EEEE" />
                            <Rectangle Margin="26,1,0,1"
                                        Width="1"
                                        HorizontalAlignment="Left"
                                        Fill="#C5C5C5" />
                            <Rectangle Margin="27,1,0,1"
                                        Width="1"
                                        HorizontalAlignment="Left"
                                        Fill="#FAFAFA" />
                            <ScrollViewer Margin="1,0,1,0"
                                            Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}"
                                            CanContentScroll="True"
                                            Grid.ColumnSpan="2">
                                <ItemsPresenter KeyboardNavigation.DirectionalNavigation="Cycle" />
                            </ScrollViewer>
                        </Grid>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>