Изменение размера SplitView.Pane

Question

Основное меню гамбургера с использованием SplitView, которое можно найти во многих примерах, классно, но мне нравится, как Microsoft реализовала его в некоторых своих приложениях в Windows 10, таких как News and Sports. Способ, которым они были реализованы, - это когда SplitView.Pane открыт, его высота не совпадает с высотой корневого фрейма. Другими словами, высота панели и высота содержимого не совпадают. Преимущество этого стиля заключается в том, что отображается полное содержимое заголовка страницы SplitView.Content. Может кто-нибудь помочь мне в том, как добиться этого эффекта, поскольку я новичок в xaml. Надеюсь, мой вопрос достаточно ясен.

Спасибо, AB

Answer 1

На официальном «спорт»/«Новости» страницы, есть несколько элементов: переключение кнопки, SplitView и т.д. В SplitView, есть также несколько подпунктов, таких как панели и рамки. Существует множество подходов, которые помогут вам получить свой собственный желаемый эффект: вы можете использовать панель компоновки, такую ​​как StackPanel или Grid, чтобы упорядочить эти элементы пользовательского интерфейса на странице; вы можете изменить шаблон по умолчанию для splitview; и вы также можете просто настроить высоту кадра и панели, установив соответствующие свойства, такие как: высота или маржа. Для получения дополнительных инструкций по проектированию UWP перейдите по адресу here.

Ниже приведен простой пример с использованием компоновки сетки и настройки свойства «margin» фрейма splitview. В этом примере я помещаю кнопку перетаскивания и кнопку возврата в заголовок страницы (вы можете изменить кнопку «Назад» на панель навигации позже). Затем отрегулируйте свойство «margin» кадра, чтобы он не имел ту же высоту, что и панель. Вы можете получить полный образец SplitView here.

<!-- Put the whole page content in a grid of 2*2 --> 
<Grid> 
      <Grid.RowDefinitions > 
       <RowDefinition Height="Auto" /> 
       <RowDefinition Height="*" /> 
      </Grid.RowDefinitions> 
      <Grid.ColumnDefinitions > 
       <ColumnDefinition Width="Auto" /> 
       <ColumnDefinition Width="*" /> 
      </Grid.ColumnDefinitions> 
      <Button x:Name="BackButton" 
        Grid.Row="0" 
        Grid.Column="1" 
        HorizontalAlignment="Center" 
        TabIndex="2" 
        IsEnabled="{Binding AppFrame.CanGoBack, ElementName=Root}" 
        Width="{Binding ItemsPanelRoot.Width, ElementName=NavMenuList}" 
        Click="BackButton_Click"/> 

      <!-- Top-level navigation menu + app content 
      and put the SplitView in another row to leave space for page header --> 
      <SplitView x:Name="RootSplitView" 
         DisplayMode="Inline" 
         OpenPaneLength="256" 
         IsTabStop="False" Grid.Row="1" Grid.ColumnSpan="2"> 
       <SplitView.Pane > 
        <!-- A custom ListView to display the items in the pane. The automation Name is set in the ContainerContentChanging event. --> 
        <controls:NavMenuListView x:Name="NavMenuList" 
               TabIndex="3" 
               ContainerContentChanging="NavMenuItemContainerContentChanging" 
               ItemContainerStyle="{StaticResource NavMenuItemContainerStyle}" 
               ItemTemplate="{StaticResource NavMenuItemTemplate}" 
               ItemInvoked="NavMenuList_ItemInvoked"> 
        </controls:NavMenuListView> 
       </SplitView.Pane> 

     <!-- Set Frame's margin property to differ from panel --> 
     <!-- OnNavigatingToPage we synchronize the selected item in the nav menu with the current page. 
      OnNavigatedToPage we move keyboard focus to the first item on the page after it's loaded. --> 
       <Frame x:Name="frame" 
         Navigating="OnNavigatingToPage" 
         Navigated="OnNavigatedToPage" 
         Margin="0,100,0,0" > 
        <Frame.ContentTransitions> 
         <TransitionCollection> 
          <NavigationThemeTransition> 
           <NavigationThemeTransition.DefaultNavigationTransitionInfo> 
            <EntranceNavigationTransitionInfo/> 
           </NavigationThemeTransition.DefaultNavigationTransitionInfo> 
          </NavigationThemeTransition> 
         </TransitionCollection> 
        </Frame.ContentTransitions> 
       </Frame> 
      </SplitView> 

      <!-- Declared last to have it rendered above everything else, but it needs to be the first item in the tab sequence. --> 
      <ToggleButton x:Name="TogglePaneButton" 
          TabIndex="1" 
          Style="{StaticResource SplitViewTogglePaneButtonStyle}" 
          IsChecked="{Binding IsPaneOpen, ElementName=RootSplitView, Mode=TwoWay}" 
          Unchecked="TogglePaneButton_Checked" 
          AutomationProperties.Name="Menu" 
          ToolTipService.ToolTip="Menu" Grid.Row="0" Grid.Column="0" /> 
     </Grid>