模板 10 滚动汉堡菜单

Question

我有一个带有 PrimaryButtons 和 SecondaryButton 的 Template 10 汉堡菜单。 在 PrimaryButtons 中，我有三个带有 ButtonType="Literal" 的 HamburgerButtonInfo。第一个有一个包含用户信息的 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的Content区域里面有一个ScrollViewer：

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

要使ListView垂直滚动，它必须有一个有限的高度，在这种情况下，我建议你给你的Height一个固定的ListView。从我所见，你的第三个是TreeView，同样的，StackPanel 也有不定式大小，你可以给你的StackPanel 一个大小，命名为“UserFolderListView”，或者给它一个高度孩子TreeView.

如果您还想让布局适应不同尺寸的设备，您可以使用VisualStateManager 在不同设备上设置不同的高度。

Answer 2

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

第二部分是使用单个文字。使用单个文字，您可以用两行 Grid 填充剩余空间。第一行将有您的两个固定物品 - 您不负责管理（此类定制的成本，但也不是世界末日）。第二行可以容纳您的ListView，然后它将像您要求的那样适当滚动。

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

祝你好运！