템플릿 10 스크롤링 햄버거 메뉴

Question

템플릿 1 햄버거 메뉴에 PrimaryButtons 및 SecondaryButton이 있습니다. PrimaryButtons에는 ButtonType = "Literal"인 세 개의 HamburgerButtonInfo가 있습니다. 첫 번째는 사용자 정보가있는 Stackpanel이고 두 번째 항목은 5 개의 항목이있는 ListView이고 세 번째 항목은 많은 항목이있는 ListView입니다. 마지막 ListView가 오래 있기 때문에 내 전체 PrimaryBox를 스크롤 할 수 있습니다. 제 목표는 처음 두 개의 HamburgerButtonInfos를 항상 보이게하고 (sticky) 마지막으로 스크롤 할 수있게 만드는 것입니다. 아이디어가 있으십니까?

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

당신이 HamburgerMenu의 레이아웃을 확인 Live Visual Tree를 사용하는 경우, 당신은 PrimaryButtons의 컨텐츠 영역에있는 것을 볼 수 있습니다, 그것은 내부 ScrollViewer이 :

즉,이 영역의 내용은 크기가 무한대이므로 스크롤 할 때 실제로 스크롤합니다 ScrollViewer이 아니고 ListView이 아니라면 스크롤하면 처음 두 요소가 사라집니다.

가로 스크롤 가능 ListView을 만들려면이 높이가 유한 한 높이 여야합니다.이 시나리오에서는 ListView에 고정 Height을 제안합니다. 그리고 내가 본 것으로부터, 세 번째는 TreeView입니다. 즉, 동일합니다. StackPanel도 부정 크기를 가지고 있습니다. StackPanel에 "UserFolderListView"라는 이름을 지정하거나 자식 TreeView에 높이를 부여 할 수 있습니다.

레이아웃을 다른 크기의 장치에 적용하려는 경우 VisualStateManager을 사용하여 다른 장치에서 대상을 지정할 때 다른 높이를 줄 수 있습니다.

Answer 2

중요한 시각적 트리가 크롤링되지 않으면 묻는 것을 쉽게 할 수있는 방법이 없습니다. 그렇게하지 않으시면 여기에 아이디어가 있습니다. 기본 버튼에서 자동으로 사용하는 ScrollViewer을 찾아 verticalScrollMode에서 Disabled으로 설정하십시오. 이것은 당신이 거기 절반 방법을 가져옵니다. 그러면 주 단추가 스크롤을 중지합니다. 우리는 이것을 HamMenu에 공통 속성으로 추가하지 않을 것입니다. 왜냐하면 이것은 매우 까다로운 케이스이기 때문입니다. 그러나 적어도 당신은 그것을 할 수 있습니다.

두 번째 부분은 단일 리터럴을 사용하는 것입니다. 단일 리터럴을 사용하면 남은 공간을 2 행의 Grid으로 채울 수 있습니다. 첫 번째 행에는 두 가지 정지 된 항목이 있습니다.이 항목은 관리 할 책임이 없습니다 (이 유형의 사용자 지정 비용이지만 세계의 끝이 아닙니다). 두 번째 행은 귀하의 ListView을 수용 할 수 있으며, 그러면 귀하가 묻는 것처럼 스크롤됩니다.

이 컨트롤이 상자에서 지원되지 않을 수있는 가장자리 경우임을 다시 한 번 강조하고자합니다. 그것이 말하게되면, 나는 이것이 당신을 위해 완벽하게 작동한다고 생각합니다. 제발, 당신이 원한다면 일단이 접근법을 설정하면, 미래의 개발자들이 당신의 노력으로부터 이익을 얻을 수 있도록이 질문에 다시 게시하십시오.

행운을 빈다.