打开 SplitView 窗格时处理其他页面的位置

Handle position of other pages when SplitView pane is open

当我设置 IsPaneOpen = true 时,我正在尝试在 app.But 中实现拆分视图; 我的枢轴没有移动到该拆分视图的右侧 pane.Insted SplitView 窗格在 pivotItems 上打开。 有人请帮我解决这个问题。 提前致谢。

我的主页:

        <Page
            x:Class="SplitView.MainPage"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:local="using:SplitView"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            mc:Ignorable="d">

            <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
                <RelativePanel x:Name="myrelativepanel">
                    <Pivot x:Name="mypivot" RelativePanel.AlignRightWith="spv">
                        <PivotItem x:Name="header1" Header="Header1">
                            <ListBox x:Name="listView"
                                    HorizontalAlignment="Left" 
                                    Height="Auto" 
                                    VerticalAlignment="Top" 
                                    Width="172"
                                    ItemsSource="{x:Bind itemsList}"
                                    />

                        </PivotItem>
                        <PivotItem x:Name="header2" Header="Header2">
                            <ListBox x:Name="listView1"
                                    HorizontalAlignment="Left" 
                                    Height="Auto" 
                                    VerticalAlignment="Top" 
                                    Width="172"
                                    ItemsSource="{x:Bind itemsList}"
                                    />
                        </PivotItem>
                    </Pivot>

                    <local:SplitViewPage x:Name="spv"></local:SplitViewPage>
                </RelativePanel>

            </Grid>
        </Page>

我的 SplivView 页面:

    <Page
        x:Class="SplitView.SplitViewPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:SplitView"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">

        <SplitView x:Name="MySplitView" DisplayMode="CompactOverlay"  IsPaneOpen="False" 
                   CompactPaneLength="50" OpenPaneLength="150">
            <SplitView.Pane>
                <StackPanel Background="Gray">
                    <Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;"
                        Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click"/>
                    <StackPanel Orientation="Horizontal">
                        <Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content="&#xE825;"
                        Width="50" Height="50" Background="Transparent"/>
                        <TextBlock Text="Button 1" FontSize="18" VerticalAlignment="Center" />
                    </StackPanel>
                    <StackPanel Orientation="Horizontal">
                        <Button x:Name="MenuButton2" FontFamily="Segoe MDL2 Assets" Content="&#xE10F;"
                            Width="50" Height="50" Background="Transparent"/>
                        <TextBlock Text="Button 2" FontSize="18" VerticalAlignment="Center" />
                    </StackPanel>
                    <StackPanel Orientation="Horizontal">
                        <Button x:Name="MenuButton3" FontFamily="Segoe MDL2 Assets" Content="&#xE1D6;"
                            Width="50" Height="50" Background="Transparent"/>
                        <TextBlock Text="Button 3" FontSize="18" VerticalAlignment="Center" />
                    </StackPanel>
                </StackPanel>
            </SplitView.Pane>
            <SplitView.Content>
                <Grid>
                    <TextBlock Text="SplitView Basic" FontSize="54" Foreground="White"
                               HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Grid>
            </SplitView.Content>
        </SplitView>

    </Page>

在您的拆分视图上使用显示模式 CompactInline,而不是 CompactOverlay。

DisplayMode="CompactInline"