模板10滚动汉堡包菜单

Question

我有一个带有PrimaryButtons和SecondaryButton的模版10汉堡包菜单。在PrimaryButtons中，我有三个带有ButtonType=“HamburgerButtonInfo”的ButtonType=。第一个包含用户信息的Stackpanel，第二个包含5个条目的ListView，第三个包含多个条目的ListView。现在我的整个PrimaryButtons都是可滚动的，因为最后一个ListView太长了。我的目标是让前两个HamburgerButtonInfos始终可见(粘滞)，最后一个是可滚动的。有什么想法吗？

更新: XamlCode

<Controls:HamburgerMenu x:Name="MyHamburgerMenu">
    <Controls:HamburgerMenu.PrimaryButtons>
        <!-- account data -->
        <Controls:HamburgerButtonInfo ButtonType="Literal" ScrollViewer.VerticalScrollMode="Disabled">
            <StackPanel Orientation="Vertical">
                <StackPanel Orientation="Horizontal">
                    <Image Width="38" Height="38" Margin="5" Source="../Assets/ProfilePlaceholder.png" />
                    <StackPanel Orientation="Vertical" VerticalAlignment="Center">
                        <TextBlock Text="{x:Bind Path=ViewModel.Account.UserName, Mode=OneWay}" FontSize="18" />
                        <TextBlock Text="{x:Bind Path=ViewModel.Account.PrimaryAddress, Mode=OneWay}" TextTrimming="CharacterEllipsis" FontSize="16" />
                    </StackPanel>
                </StackPanel>
                <Line StrokeThickness="2" Stroke="#cacaca" X2="300" Margin="10,5" />
            </StackPanel>
        </Controls:HamburgerButtonInfo>

        <!-- standard folder -->
        <Controls:HamburgerButtonInfo ButtonType="Literal">
            <ListView ItemsSource="{x:Bind Path=ViewModel.StandardFolderList, Mode=OneWay}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image Source="{Binding Path=Type, Converter={StaticResource FolderTypeToImageSourceConverter}}" Width="19" Height="19" Margin="0,0,20,0" />
                            <TextBlock Text="{Binding Path=Name}" FontSize="14" VerticalAlignment="Center"/>
                        </StackPanel>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </Controls:HamburgerButtonInfo>

        <!-- user folder -->
        <Controls:HamburgerButtonInfo ButtonType="Literal">
            <StackPanel x:Name="UserFolderListView">
                <TextBlock Text="Folders" FontSize="14" Foreground="#8f8f8f" Margin="5" Visibility="{x:Bind Path=ViewModel.UserFolderList, Mode=OneWay, Converter={StaticResource ValueNotNullToVisibilityConverter}}"/>
                <toolkit:TreeView ItemsSource="{x:Bind Path=ViewModel.UserFolderList, Mode=OneWay}" Background="#fafafa">
                    <toolkit:TreeView.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="{Binding Path=Name}"/>
                                <TextBlock Text="{Binding Path=Counter}" />
                            </StackPanel>
                            <data:DataTemplateExtensions.Hierarchy>
                                <data:HierarchicalDataTemplate ItemsSource="{Binding ChildFolder}" />
                            </data:DataTemplateExtensions.Hierarchy>
                        </DataTemplate>
                    </toolkit:TreeView.ItemTemplate>
                </toolkit:TreeView>
            </StackPanel>
        </Controls:HamburgerButtonInfo>
    </Controls:HamburgerMenu.PrimaryButtons>

    <Controls:HamburgerMenu.SecondaryButtons>
        <!--  settingspage button  -->
        <Controls:HamburgerButtonInfo x:Name="SettingsButton" PageParameter="0"
                                      PageType="views:SettingsPage">
            <Controls:HamburgerButtonInfo.NavigationTransitionInfo>
                <SuppressNavigationTransitionInfo />
            </Controls:HamburgerButtonInfo.NavigationTransitionInfo>
            <StackPanel Orientation="Horizontal">
                <SymbolIcon Width="48" Height="48"
                            Symbol="Setting" />
                <TextBlock Margin="12,0,0,0" VerticalAlignment="Center"
                           Text="Settings" />
            </StackPanel>
        </Controls:HamburgerButtonInfo>
    </Controls:HamburgerMenu.SecondaryButtons>

</Controls:HamburgerMenu>

谢谢

Answer 1

如果您使用Live Visual Tree检查HamburgerMenu的布局，您可以看到在PrimaryButtons的内容区域中，有一个ScrollViewer：

​

这意味着，这个区域内的内容将有无限大小，所以当你滚动它时，实际上是滚动这个ScrollViewer，而不是你的ListView，这就是为什么当你滚动它时，前两个元素会消失。

为了让ListView可以垂直滚动，它必须有一个有限的高度，在这种情况下，我建议你给你的ListView一个固定的Height。在我看来，你的第三个是一个TreeView，也就是说，StackPanel也有无限大小，你可以给你的StackPanel命名为"UserFolderListView"，或者给它的子TreeView一个高度。

如果你还想让布局适应不同大小的设备，你可以使用VisualStateManager在不同设备上定位时给出不同的高度。

Answer 2

如果没有一些重要的可视化树爬行，我看不到一种简单的方法来做你所要求的事情。如果你不介意这样做，那么这个想法是这样的。找到主要按钮自动使用的ScrollViewer，并将其verticalScrollMode设置为Disabled。这让你走了一半的路。这会导致主按钮停止滚动。我们永远不会将其作为公共属性添加到HamMenu中，因为这是非常边缘的情况。但至少你能做到。

第二部分是使用单个文本。只需一个文字，就可以用一个包含两行的Grid填充剩余的空间。第一行将有您的两个固定项目-您不负责管理(这类定制的成本，但也不是世界末日)。第二行可以保存您的ListView，然后会像您要求的那样相应地滚动。

我想重申，这是一个边缘情况，控件永远不会支持开箱即用的情况。话虽如此，我认为这对你来说应该是完美的。如果你愿意，一旦你建立了这个方法，请在这个问题中回帖一些代码，这样未来的开发人员就可以从你的努力中受益。

祝你好运！