Шаблон 10 прокрутки меню гамбургера

Question

У меня есть меню гамбургеров шаблона 10 с PrimaryButtons и SecondaryButton. В PrimaryButtons у меня есть три HamburgerButtonInfo с ButtonType = "Literal". Первый имеет Stackpanel с информацией пользователя, второй - ListView с 5 записями, а третий имеет ListView со многими записями. Теперь все мои PrimaryButtons прокручиваются, потому что последний ListView длинный. Моя цель - сделать первые два HamburgerButtonInfos видимыми (липкими) все время, а последние прокручиваются. Любые идеи?

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> 

Thanx

Answer 1

Если вы используете Live Visual Tree проверить расположение HamburgerMenu, вы можете увидеть, что в контентной области PrimaryButtons, есть ScrollViewer внутри него:

Это означает, что содержимое внутри этой области будет иметь бесконечный размер, поэтому, когда вы прокручиваете его, вы на самом деле прокручиваете это ScrollViewer, а не ваш ListView, вот почему ваши первые два элемента исчезнут, когда вы прокрутите его.

Чтобы сделать вертикальную прокрутку ListView, она должна иметь конечную высоту, в этом случае я предлагаю вам указать фиксированный Height на ваш ListView. И из того, что я вижу, ваш третий - это TreeView, то есть то же самое, StackPanel также имеет бесконечный размер, вы можете либо дать размер вашему StackPanel с именем «UserFolderListView», либо дать высоту его дочернему объекту TreeView.

В случае, если вы также хотите, чтобы макет адаптировался к разному размеру устройства, вы можете использовать VisualStateManager, чтобы дать разные высоты при цели на разных устройствах.

Answer 2

Я не вижу простого способа сделать то, что вы просите, без какого-либо значительного визуального дерева. Если вы не возражаете против этого, тогда вот идея. Найдите ScrollViewer, автоматически используемый кнопками Primary, и установите его verticalScrollMode на Disabled. Это доставит вас на полпути. Это приводит к тому, что кнопки Primary перестают прокручиваться. Мы никогда не добавим это как общее свойство к HamMenu, потому что это очень красноватый случай. Но по крайней мере вы можете это сделать.

Вторая часть - использовать один литерал. С единственным литералом вы можете заполнить оставшееся пространство Grid двумя строками. В первой строке будут два ваших стационарных объекта, за которые вы не отвечаете за управление (стоимость этого типа настройки, но также и не конец света). Вторая строка может содержать ваш ListView, который затем прокручивается соответствующим образом, как вы спрашиваете.

Я хочу повторить, что это краевой кейс, который элемент управления никогда не будет поддерживать из коробки. Говоря это, я думаю, что это должно сработать отлично для вас. ПОЖАЛУЙСТА, если вы захотите, как только вы установите этот подход, разместите код в этом вопросе, чтобы будущие разработчики могли извлечь выгоду из ваших усилий.

Удачи!