Как прокрутка влияет только на внутренний фрейм, а не на все приложение - PullRequest
Новая
       37

Как прокрутка влияет только на внутренний фрейм, а не на все приложение

0 голосов
/ 15 апреля 2020

При написании приложения 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

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 16 апреля 2020

GridView обычно используется вместе с ItemTemplate и ItemsSource. Этот элемент управления позволяет быстро создать пакет элементов с одинаковым макетом (например, домашней страницей Windows Settings) на основе набора данных, а не использовать его в качестве контейнера макета. Вот соответствующий документ

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 будет прокручиваться.

Спасибо.

0 голосов
/ 15 апреля 2020

Я думаю, что это будет сделано: 

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

Важно помнить, что ScrollViewer размер должен быть ограничен - ScrollViewer сам по себе не может расти при увеличении контента, потому что тогда он не будет возможность правильно генерировать полосы прокрутки

...