Question

我在项目中使用拆分视图菜单。我已经实现了以下代码来设计我的页面的分割视图

<Grid Background="Gray">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="60"></RowDefinition>
                <RowDefinition Height="45"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
            </Grid.RowDefinitions>

            <Grid Grid.Row="0">
                <Image Source="Source of the image" HorizontalAlignment="Center" Margin="1 5 0 0"></Image>
            </Grid>

            <Grid Grid.Row="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Grid Grid.Column="0">
                    <Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;"
                            Width="60" Height="60" Background="Transparent" Margin="-10 -20 0 0" 
                            Click="HamburgerButton_Click"/>
                </Grid>
                <Grid Grid.Column="1">
                    <TextBlock Text="Heading" HorizontalAlignment="Center" FontSize="30" 
                           Margin="-35 0 0 0" Foreground="White"></TextBlock>
                </Grid>
            </Grid>

            <Grid Grid.Row="2" x:Name="ArticlesGrid" Visibility="Collapsed">
                <SplitView x:Name="MySplitView" DisplayMode="CompactOverlay" IsPaneOpen="False" 
               CompactPaneLength="0" OpenPaneLength="220">
                    <SplitView.Pane>
                        <ListView x:Name="menuBindList" Background="Gray">
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel>
                                        <StackPanel Orientation="Horizontal" Tag="{Binding SectionName}">
                                            <!--<Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content="&#xE825;"
                                  Width="50" Height="50" Background="Transparent" Margin="-10 0 0 0"/>-->
                                            <TextBlock Text="{Binding TitleofAccess}"
                                                   Tag="{Binding SectionName}" FontSize="18" 
                                                   VerticalAlignment="Center" Tapped="MenuTextBlock_Tapped" />
                                        </StackPanel>
                                    </StackPanel>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                    </SplitView.Pane>
                    <SplitView.Content>
                        <ScrollViewer Name="articlesScroll">
                            <Pivot DataContext="{StaticResource ViewModel}" x:Name="pivot" 
                                    HeaderTemplate="{StaticResource headerTemplate}" 
                                    ItemTemplate="{StaticResource pivotTemplate}" ItemsSource="{Binding Feeds}" Margin="0,-10,0,10">
                            </Pivot>
                        </ScrollViewer>
                    </SplitView.Content>
                </SplitView>
            </Grid>
        </Grid>        
    </Grid>

它提供了我想要的输出。但是，我在每个页面中使用此拆分视图。如何为每个页面全局使用拆分视图。请提供一些样本来实现这个目标

Answer 1

您可以将SplitView置于根框架样式中。

<Style x:Key="NewFrameStyle" TargetType="Frame">       
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Frame">
                         <Grid Background="Gray">
                             <SplitView>
                                 <SplitView.Pane>
                                  ...
                                 </SplitView.Pane>
                                 <SplitView.Content>
                                  ...
                                 </SplitView.Content>                                
                         </Grid>
                </Setter.Value>
             </Setter>
</Style>


 protected override void OnLaunched(LaunchActivatedEventArgs e)
 {
      ...
      Frame rootFrame = Window.Current.Content as Frame;
      ...
      rootFrame.Style = this.Resources["NewFrameStyle"] as Style;
 }

全局调用拆分视图

1 个答案: