Question

我有一个带有PrimaryButtons和SecondaryButton的Template 10汉堡包菜单。在PrimaryButtons中我有三个HamburgerButtonInfo，ButtonType =＆＃34; Literal＆＃34;。第一个具有用户信息的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垂直滚动，它必须具有有限的高度，在这种情况下，我建议您为Height提供固定的ListView。从我看到的情况来看，你的第三个是TreeView，它是相同的，StackPanel也有不定长度，你可以给你StackPanel命名的＆＃34; UserFolderListView＆＃34;，或为其子TreeView提供高度。

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

Answer 2

我没有看到一个简单的方法来做你要求的事情而没有一些重要的视觉树爬行。如果你不介意这样做，那么这就是想法。找到“主要”按钮自动使用的entry point，并将其ScrollViewer设置为verticalScrollMode。这让你到了一半。这会导致主按钮停止滚动。我们永远不会将此作为HamMenu的共同属性添加，因为这是非常有优势的。但至少你可以做到。

第二部分是使用单个文字。使用单个文字，您可以使用带有两行的Disabled填充剩余空间。第一行将包含您的两个固定项目 - 您不负责管理（此类定制的成本，但也不是世界末日）。第二行可以保存您的Grid，然后按照您的要求进行适当滚动。

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

祝你好运！

模板10滚动汉堡菜单

2 个答案: