Полоса прокрутки в WPF

Question

Я пытаюсь создать страницу в WPF, для которой требуется полоса прокрутки, поскольку на этой странице много контекста. Поскольку есть разные типы информации, которые необходимо ввести, я поместил разные части в разные таблицы. Затем я установил ScrollViewer и поместил в него все сетки, но когда я его запускаю, он не работает. Вот мой код:

<Page x:Class="uniFirstGo.AddStudent"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:mosque"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="800"
      Title="AddStudent">
    <ScrollViewer HorizontalScrollBarVisibility="Auto">
        <Grid Margin="0,0,0,-751">
                <Grid.RowDefinitions>
                    <RowDefinition Height="593*"/>
                    <RowDefinition Height="154*"/>
                    <RowDefinition Height="46*"/>
                    <RowDefinition Height="44*"/>
                </Grid.RowDefinitions>
                <Label Name="ChildsDetails" Content="Childs Details" HorizontalAlignment="Left" Height="24" Margin="350,10,0,0" VerticalAlignment="Top" Width="91"/>
                <Grid HorizontalAlignment="Left" Height="178" Margin="20,54,0,0" VerticalAlignment="Top" Width="770">

                    <Label x:Name="ChildsSurname" Content="Childs Surname" HorizontalAlignment="Left" Height="24" Margin="10,14,0,0" VerticalAlignment="Top" Width="97"/>
                    <TextBox x:Name="childsSurname" HorizontalAlignment="Left" Height="24" Margin="107,14,0,0" VerticalAlignment="Top" Width="145" SpellCheck.IsEnabled="True"/>
                    <Label x:Name="ChildsFirstName" Content="Childs First Name" HorizontalAlignment="Left" Height="24" Margin="276,14,0,0" VerticalAlignment="Top" Width="105"/>
                    <TextBox x:Name="childsFirstName" HorizontalAlignment="Left" Height="24" Margin="386,14,0,0" VerticalAlignment="Top" Width="155"/>
                    <Label Content="Address" HorizontalAlignment="Left" Margin="10,54,0,0" VerticalAlignment="Top" RenderTransformOrigin="-0.605,0.288" Width="97"/>
                    <TextBox HorizontalAlignment="Left" Height="23" Margin="107,54,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="468" Grid.ColumnSpan="2"/>
                    <Label Content="Date of Birth&#xD;&#xA;" HorizontalAlignment="Left" Margin="10,92,0,0" VerticalAlignment="Top" Height="25" Width="83"/>
                    <DatePicker HorizontalAlignment="Left" Margin="107,93,0,0" VerticalAlignment="Top" Width="130"/>
                    <Label Content="Postcode" HorizontalAlignment="Left" Margin="600,54,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.368,-0.154"/>
                    <TextBox x:Name="childsGender_Copy" HorizontalAlignment="Left" Height="24" Margin="663,54,0,0" VerticalAlignment="Top" Width="97"/>
                    <Label Content="Age" HorizontalAlignment="Left" Margin="10,132,0,0" VerticalAlignment="Top"/>
                    <TextBox HorizontalAlignment="Left" Height="23" Margin="107,132,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="130"/>
                    <Label Content="Gender&#xD;&#xA;" HorizontalAlignment="Left" Margin="578,10,0,0" VerticalAlignment="Top" Height="26"/>
                    <CheckBox Content="Male&#xD;&#xA;" HorizontalAlignment="Left" Margin="651,16,0,0" VerticalAlignment="Top"/>
                    <CheckBox Content="Female" HorizontalAlignment="Left" Margin="702,16,0,0" VerticalAlignment="Top"/>
                </Grid>
                <Label Content="Parents Details" HorizontalAlignment="Left" Margin="350,249,0,0" VerticalAlignment="Top"/>
                <Grid HorizontalAlignment="Left" Height="201" Margin="10,280,0,0" VerticalAlignment="Top" Width="780">
                    <Label Content="Fathers Full Name&#xD;&#xA;" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="134" Height="28" RenderTransformOrigin="0.5,0.5"></Label>
                    <Label Content="Mothers Full Name" HorizontalAlignment="Left" Margin="10,46,0,0" VerticalAlignment="Top" Width="120" Height="29"/>
                    <TextBox HorizontalAlignment="Left" Height="23" Margin="130,15,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="138"/>
                    <TextBox HorizontalAlignment="Left" Height="23" Margin="130,52,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="138"/>
                    <Label Content="Fathers Address&#xD;&#xA;" HorizontalAlignment="Left" Margin="10,80,0,0" VerticalAlignment="Top" Width="107" Height="28"/>
                    <Label Content="Mothers Address&#xD;&#xA;" HorizontalAlignment="Left" Margin="10,113,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.132,-0.154" Width="107" Height="28"/>
                    <TextBox HorizontalAlignment="Left" Height="23" Margin="130,85,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="640"/>
                    <TextBox HorizontalAlignment="Left" Height="23" Margin="130,118,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="640"/>
                    <Label Content="Fathers Phone Number&#xD;&#xA;" HorizontalAlignment="Left" Margin="283,12,0,0" VerticalAlignment="Top" Height="26"/>
                    <Label Content="Mothers Phone Number&#xA;" HorizontalAlignment="Left" Margin="283,46,0,0" VerticalAlignment="Top" Height="26"/>
                    <TextBox HorizontalAlignment="Left" Height="23" Margin="426,16,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120"/>
                    <TextBox HorizontalAlignment="Left" Height="23" Margin="426,49,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120"/>
                    <Label Content="Mothers Date of Birth" HorizontalAlignment="Left" Margin="554,48,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.48,0.077"/>
                    <DatePicker HorizontalAlignment="Left" Margin="679,15,0,0" VerticalAlignment="Top" Width="101"/>
                    <DatePicker HorizontalAlignment="Left" Margin="679,48,0,0" VerticalAlignment="Top" Width="101"/>
                    <Label Content="Father Date of Birth&#xD;&#xA;" HorizontalAlignment="Left" Margin="554,16,0,0" VerticalAlignment="Top" Height="25"/>
                    <TextBox HorizontalAlignment="Left" Height="23" Margin="130,153,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="253"/>
                    <Label Content="Fathers Email" HorizontalAlignment="Left" Margin="10,150,0,0" VerticalAlignment="Top" Width="107"/>
                    <Label Content="Mothers Email" HorizontalAlignment="Left" Margin="405,150,0,0" VerticalAlignment="Top" Width="107"/>
                    <TextBox HorizontalAlignment="Left" Height="23" Margin="517,153,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="253"/>
                </Grid>
                <Label Content="Emergency Contact Details&#xD;&#xA;" HorizontalAlignment="Left" Margin="328,486,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.895,-2.308" Height="29"/>
                <Grid HorizontalAlignment="Left" Height="82" Margin="10,520,0,0" VerticalAlignment="Top" Width="780" Grid.RowSpan="2">
                    <Label Content="Surname&#xD;&#xA;" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="88" Height="29"/>
                    <Label Content="Surname&#xA;" HorizontalAlignment="Left" Margin="10,44,0,0" VerticalAlignment="Top" Width="88" Height="29"/>
                    <Label Content="First Name&#xA;" HorizontalAlignment="Left" Margin="258,44,0,0" VerticalAlignment="Top" Width="88" Height="29" RenderTransformOrigin="0.114,0.448"/>
                    <Label Content="First Name&#xA;" HorizontalAlignment="Left" Margin="258,10,0,0" VerticalAlignment="Top" Width="88" Height="29"/>
                    <Label Content="Contact Number&#xD;&#xA;&#xA;" HorizontalAlignment="Left" Margin="513,44,0,0" VerticalAlignment="Top" Width="98" Height="29"/>
                    <Label Content="Contact Number&#xA;" HorizontalAlignment="Left" Margin="513,10,0,0" VerticalAlignment="Top" Width="98" Height="29"/>
                    <TextBox HorizontalAlignment="Left" Height="23" Margin="618,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="152"/>
                    <TextBox HorizontalAlignment="Left" Height="23" Margin="74,50,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="152"/>
                    <TextBox HorizontalAlignment="Left" Height="23" Margin="336,14,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="152"/>
                    <TextBox HorizontalAlignment="Left" Height="23" Margin="74,16,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="152"/>
                    <TextBox HorizontalAlignment="Left" Height="23" Margin="618,44,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="152"/>
                    <TextBox HorizontalAlignment="Left" Height="23" Margin="336,50,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="152"/>
                </Grid>
                <Label Content="Medical, Disability and Special Needs&#xD;&#xA;" HorizontalAlignment="Left" Margin="298,617,0,0" VerticalAlignment="Top" Height="26"/>
                <Grid HorizontalAlignment="Left" Height="145" Margin="10,648,0,0" VerticalAlignment="Top" Width="780">
                    <Label Content="Name of Surgery&#xD;&#xA;&#xD;&#xA;" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Height="34"/>
                    <TextBox HorizontalAlignment="Left" Height="23" Margin="116,12,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="175"/>
                    <Label Content="Surgery Telephone Number&#xD;&#xA;&#xD;&#xA;" HorizontalAlignment="Left" Margin="337,10,0,0" VerticalAlignment="Top" Height="34"/>
                    <TextBox HorizontalAlignment="Left" Height="23" Margin="512,12,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="258"/>
                    <Label Content="Surgery Address" HorizontalAlignment="Left" Margin="10,44,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.289,-0.038" Width="100" Height="31"/>
                <TextBox HorizontalAlignment="Left" Height="23" Margin="116,49,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="654"/>
            </Grid>
        </Grid>
    </ScrollViewer>
</Page>

Может кто-нибудь сказать мне, что здесь происходит неправильно и почему полоса прокрутки не работает, пожалуйста?

Спасибо.

Answer 1

Просто удалите Margin = "0,0,0, -751" в основной сетке.

<Page x:Class="uniFirstGo.AddStudent"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  xmlns:local="clr-namespace:mosque"
  mc:Ignorable="d" 
  d:DesignHeight="450" d:DesignWidth="800"
  Title="AddStudent">
<ScrollViewer HorizontalScrollBarVisibility="Auto">
    <Grid>
            <Grid.RowDefinitions>....

Answer 2

Я установил вашу страницу как Content моего WPF главного окна, которое имеет размеры 300x400. И вот что я получаю:

Как видите, горизонтальная полоса прокрутки видна и работает довольно хорошо, а вертикальная - нет.

Но учтите, что по какой-то причине вы установили Grid.Margin на необычный -751.

<Grid Margin="0,0,0,-751">

Четыре числа в Margin определены следующим образом:

<Grid Margin="left, top, right, bottom">

Итак, давайте возьмем более простой пример. У меня есть два следующих элемента управления Grid, один внутри другого, внутри моего главного окна.

<Window x:Class="StackOverflowWPF.MainWindow"
        ...
        Title="MainWindow" Height="300" Width="400">
    <Grid Margin="20" Background="LightSeaGreen">
        <Grid Margin="5, 10, 15, 20" Background="LightGoldenrodYellow"/>
    </Grid>
</Window>

А дизайнер как ниже:

Таким образом, внутренняя сетка слева составляет 5 пикселей от ее сетки контейнера, верхняя часть - 10 от ее контейнера и т. Д. Вы получаете отклонение. Но посмотрим, что произойдет, когда я установлю bottom на отрицательное число.

<Grid Margin="20" Background="LightSeaGreen">
    <Grid Margin="5, 10, 15, -20" Background="LightGoldenrodYellow"/>
</Grid>

Дизайнер:

По сути, вы говорите XAML, что внутренняя Grid может быть за пределами внешней сетки, что с самого начала побеждает цель маржи.

Теперь вернемся к вашей проблеме. Полоса прокрутки позволяет прокручивать содержимое в случае, если содержимое больше контейнера. Но, указав отрицательное поле, вы говорите, что ваша сетка может пойти на 751 пикселей ниже снизу, по существу делая полосу прокрутки бесполезной.

Вместо этого посмотрите, что происходит, вы устанавливаете разумное значение 0.

<Grid>
    <ScrollViewer HorizontalScrollBarVisibility="Auto">
        <Grid Margin="0,0,0,0">

Выход: