Question

在编写XAML / UWP / C＃应用程序时，我具有MainPage.xaml，其中包含一个标题菜单（主|后退|前向导航和用户显示按钮），以及页面导航菜单（左侧）拆分面板，另一侧拆分中的一个是用于显示页面的框架。

以下是该代码的简化版本（请注意，此代码中没有任何地方是ScrollView）：

<Page
    x:Class="PowderTracks.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:PowderTracks"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Width="1200"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <GridView Height="Auto">
        <StackPanel
            Width="Auto">
            <StackPanel x:Name="headerMenu" 
                    Orientation="Horizontal" 
                    Background="#FF016B3B"
                    Width="Auto"
                    Padding="0,0,0,0" >
                <Button x:Name ="HomeButton" 
                    Foreground="#FFC0FFC0" 
                    Margin="10,0,0,0" 
                    Background="#33016B3B">
                    <Image Source="Assets\Home.png" Width="64" />
                </Button>
                <Button x:Name ="BackButton" 
                    Foreground="#FFC0FFC0" 
                    Padding="0,0,0,0" 
                    Background="#33016B3B">
                    <Image Source="Assets\Back.png" Width="64" />
                </Button>
                <Button x:Name ="ForwardButton" 
                    Foreground="#FFC0FFC0" 
                    Padding="0,0,0,0" 
                    Background="#33016B3B">
                    <Image Source="Assets\Forward.png" Width="64" />
                </Button>
                <Button x:Name="btnFace" Background="#33016B3B">
                    <Image x:Name="userPic" Width="32" Height="32"/>
                    <Button.Flyout>
                        <Flyout>
                            <StackPanel>
                                <Image x:Name="foPic" Width="96" Height="96"/>
                                <TextBlock Name="foDisplayName" />
                                <TextBlock Name="foEmail" />
                            </StackPanel>
                        </Flyout>
                    </Button.Flyout>
                </Button>
                <TextBlock Name="lblUsername" 
                       x:FieldModifier="public"
                       Text="" 
                       Margin="10,0,0,0" 
                       Height="25" 
                       FontSize="18"
                       VerticalAlignment="Center" 
                       Foreground="#FFC0FFC0"
                />
                <ToggleSwitch x:Name="btnDatabase" 
                              Margin="50,0,0,0"
                              OffContent="TestDB" 
                              OnContent="LiveDB"
                              HorizontalAlignment="Right"
                              Visibility="Visible"
                              />

            </StackPanel>
            <SplitView  x:Name="svFrame"
                IsPaneOpen="True"
                    DisplayMode="Inline"
                    OpenPaneLength="80" Height="Auto" Width="1024">
                <UIElement.RenderTransform>
                    <MatrixTransform/>
                </UIElement.RenderTransform>
                <SplitView.Pane>
                    <StackPanel>
                        <Button Name="btnTracker" 
                                    Width="80" 
                                    Height="65" 
                                    Padding="0,0,0,0">
                            <Image Source="Assets\trackers.png" 
                                        Width="64"/>
                        </Button>
                        <Button Name="btnTasks"  
                                    Width="80">
                            <Image Source="Assets\tasksIcon.png" 
                                        Width="64"/>
                        </Button>
                        <Button Name="btnRFP"  
                                    Width="80">
                            <Image Source="Assets\proposals.png" 
                            Width="64"/>

                        </Button>
                        <Button Name="btnFM" 
                                    Width="80">
                            <Image Source="Assets\folderMachine.png" Width="64"/>
                        </Button>
                        <Button Name="btnClients"  
                                    Width="80" >
                            <Image Source="Assets\clients.png" 
                            Width="64"/>
                        </Button>
                        <Button Name="btnMaint" 
                                    Width="80" 
                                    Padding="0,0,0,0">
                            <Image Source="Assets\maintenance.png" 
                                        Width="64" 
                                        Margin="0,0,0,0"/>
                        </Button>
                    </StackPanel>
                </SplitView.Pane>
                <Frame x:Name="content" 
                            Padding="10,10,10,15" 
                            HorizontalAlignment="Left" 
                            Width="Auto" 
                            Height="Auto" 
                            VerticalAlignment="Top"/>
            </SplitView>
        </StackPanel>
    </GridView>

</Page>

（删除了点击事件，使其仅可以复制/粘贴。）

无论如何，第一个打开的页面是“建议”页面（因为这是我一直在努力的页面），并且它是一个包含许多控件的长页面。我希望滚动视图移动“提案”（或之后的任何页面）页面而无需移动标题菜单或左侧导航菜单。现在，如果我滚动整个应用程序，那么滚动，因此标题和导航菜单随着页面滚动而向上滚动。

我尝试过的方法：将ScrollView放置在<Frame x:Name...>面板上-不起作用。将ScrollView放置在顶层StackPanel的“提案”页面上

<StackPanel Margin="0,0,10,27" 
            VerticalAlignment="Top" 
            ScrollViewer.VerticalScrollBarVisibility="Visible">

不起作用。

我尝试在这些网站上关注该示例：

https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.scrollviewer?view=winrt-18362 https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/scroll-controls

谢谢。

Answer 1

我的猜测是这样做：

<ScrollViewer Padding="10,10,10,15" 
                            HorizontalAlignment="Stretch" 
                            Width="Auto" 
                            Height="Auto" 
                            VerticalAlignment="Stretch">
    <Frame x:Name="content" />
</ScrollViewer>

要记住的重要一点是ScrollViewer的大小必须受到限制-ScrollViewer本身不能随着内容的增长而增长，因为那样便无法正确生成滚动条

Answer 2

GridView通常与ItemTemplate和ItemsSource一起使用。此控件用于根据数据集快速生成具有相同布局（例如Windows设置主页）的一批项目，而不是用作布局容器。这是相关的document

GridView是多个控件的组合。您的应用程序滚动的原因是GridView包含ScrollViewer。

根据您提供的代码，您可以尝试以下布局：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="1*" />
    </Grid.RowDefinitions>

    <StackPanel>
        <!-- Header Buttons -->
    </StackPanel>

    <SplitView Grid.Row="1">

        <SplitView.Pane>
            <!-- Pane List -->
        </SplitView.Pane>

        <SplitView.Content>
            <ScrollViewer>
                <Frame x:Name="content"/>
            </ScrollViewer>
        </SplitView.Content>

    </SplitView>
</Grid>

这可确保只有Frame内部的内容才能滚动。

谢谢。

如何使scrollview仅影响内部框架，而不影响整个应用程序

2 个答案: