需要创建一个带有标题和滚动条支持的上下文菜单。

Question

我需要一个全局上下文菜单的样式/模板，它有一个标题和各种菜单项；由于我的上下文菜单中菜单项的数量可能很大，因此它需要支持滚动。

我目前使用的样式的问题是它不支持滚动；即使菜单项的数量超过屏幕大小，也没有显示滚动条。

这是我目前正在使用的样式 -

<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>

将滚动查看器放在标题上方可以实现，但是标题也会被滚动。如何最好地实现这一点？

- akjoshi

Answer 1

尝试像这样改变。将垂直的StackPanel（不限制高度）更改为具有两个行定义（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>

- Fredrik Hedblad

---

谢谢Meleak，你说得对；我已经尝试过这个方法并且它有效，但这对我来说不是一个可行的解决方案；我正在寻找一种不需要固定高度的解决方案。 - akjoshi

@akjoshi：好的。那么滚动应该在什么时候激活？在屏幕外面吗？ - Fredrik Hedblad

是的，每当菜单项的数量无法适应屏幕时，需要明确的是，在某些地方的上下文菜单可能会包含大量的项目（在运行时生成）。 - akjoshi

谢谢Meleak，我想我之前已经尝试过了。再试一次后会告诉你的... - akjoshi

我认为VerticalAlignment="Stretch"在这里起了关键作用。不太确定是怎么回事，但它解决了问题。 - akjoshi

Answer 2

试试这个：

    <Border>
        <DockPanel>
            <Label DockPanel.Dock="Top">Label</Label>
            <ScrollViewer>
                ....    
            </ScrollViewer>
        </DockPanel>
    </Border>

只需将您的stackpanel替换为dockpanel即可。

- objectbox