调整浏览器大小时保持正确的 XAML 布局

Question

我有一个 XAML 窗口，它的布局是使用主网格完成的。问题是当浏览器调整大小时，第二列和第三列中的控件向右移动，并且窗口的布局不再正确。我在下面粘贴了 XAML。我认为 WPF 窗口的布局应该是基于网格的，所有控件都位于窗口的主网格中。这是 WPF 的正确布局设计还是有不同的推荐布局模式？

<Window x:Class="MasterPage.Intake1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:v="clr-namespace:MasterPage.View"
    Title="Intake 1" Height="900" Width="1000" Background="#FFD9DDE8" >
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="35*"/>
                <RowDefinition Height="45*"/>
                <RowDefinition Height="190*"/>
                <RowDefinition Height="275*"/>
        </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="500*"/>
                <ColumnDefinition Width="300*"/>
                <ColumnDefinition Width="250*"/>
            </Grid.ColumnDefinitions>
            
       <StackPanel Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="0">
            <Image Source="Images\header.jpg" Height="47" Margin="0,0,0,0" />
      </StackPanel>
      <StackPanel HorizontalAlignment="Left" Grid.Column="0" Height="80"  Width="350" Grid.ColumnSpan="1" Grid.Row="1"  Margin="0,-23,0,0">
            <Image Source="Images\DSPASS_logo.png" Stretch="Fill" DockPanel.Dock="Top" Height="70" />
      </StackPanel>
        <StackPanel Grid.Column="4" Grid.Row="1" Grid.ColumnSpan="1" Margin="0,0,0,0">
        <TextBlock FontSize="15" Margin="0,0,0,0" Height="25" Width="300" TextWrapping="WrapWithOverflow">
            <Label FontSize="10" Name="Namelabel" Width="250" FontWeight="Bold" Foreground="#1664A1" Content="Welcome to DS PASS:"/>               
        </TextBlock>
      </StackPanel>
        <StackPanel Grid.Column="0" Grid.Row="2" HorizontalAlignment="Left" Margin="10,10,0,0" Height="290" Width="975" VerticalAlignment="Top" Grid.ColumnSpan="3" Grid.RowSpan="1">
            <Label Height="36" FontSize="16" Content="Post Identification" Background="#FF014E7E" FontWeight="Bold" Foreground="White" Margin="-5,0,-18,0"/>
            <StackPanel x:Name="_wordLength" Orientation="Horizontal" Margin="235,0,200,0">
                <TextBlock Height="20" x:Name="ApplicantType_TextBlock" Text="Applicant Type" Width="110" Margin="5" TextAlignment="Right"/>
                <ComboBox Height="25" x:Name="textBoxWordLength" Width="400" Margin="10,5"/>
            </StackPanel>
            <StackPanel x:Name="_integerWordLength" Orientation="Horizontal" Margin="235,0,200,0">
                <TextBlock Height="20" x:Name="textBlockIntegerWordLength" Text="Person Type" Width="110" Margin="5" TextAlignment="Right"/>
                <ComboBox Height="25" x:Name="textBoxIntegerWordLength" Width="400" Margin="10,5"/>
            </StackPanel>
            <StackPanel x:Name="_Post" Orientation="Horizontal" Margin="235,0,200,20">
                <TextBlock Height="20" x:Name="Post_TextBlock" Text="Post" Width="110" Margin="5" TextAlignment="Right"/>
                <ComboBox Height="25" x:Name="Post_TextBox" Width="400" Margin="10,5"/>
            </StackPanel>
        </StackPanel>
        <StackPanel Grid.Column="0" Grid.Row="3" HorizontalAlignment="Left" Height="130" Margin="15,-120,0,0" VerticalAlignment="Top" Grid.ColumnSpan="3" >
            <Label Height="36" FontSize="16" Content="Applicant Employment" Background="#FF004A78" FontWeight="Bold" Foreground="White" Margin="-5,0,-18,0"/>
                    <StackPanel x:Name="_max1" Orientation="Vertical" Margin="1,0,355,0">
                        <TextBlock Height="20" x:Name="maxTextBlock1" Text="Employee ID" Width="100" Foreground="Black" Margin="0,15,459,5" TextAlignment="Right"/>
                        <TextBox Height="25" x:Name="maxTextBox1" Width="400" Margin="0,-5,90,25"/>
                    </StackPanel>
        </StackPanel>
        <StackPanel Grid.Column="0" Grid.Row="4" Grid.ColumnSpan="3" Orientation="Vertical" HorizontalAlignment="Left" Height="330" Margin="0,10,0,0" VerticalAlignment="Top" Width="965" Grid.RowSpan="2">
                <Label Height="36" FontSize="16" Content="English Version of Name" Background="#FF005183" Grid.Row="4" FontWeight="Bold" Margin="10,10,0,0" Foreground="White" Padding="4,5,5,5"/>
                    <StackPanel x:Name="_LastName" Orientation="Vertical">
                    <TextBlock Height="20" x:Name="LastName_TextBlock" Text="Last Name/Surname" Margin="55,5,459,5" TextAlignment="Left"/>
                    <TextBox Height="25" x:Name="LastName_TextBox" Width="500" Margin="55,5,459,5"/>
                    </StackPanel>
                    <StackPanel x:Name="_FirstName" Orientation="Vertical">
                    <TextBlock Height="20" x:Name="FirstName_TextBlock" Text="First Name" Margin="55,0,459,0" TextAlignment="Left"/>
                    <TextBox Height="25" x:Name="FirstName_TextBox" Width="500" Margin="55,0,459,0"/>
                    </StackPanel>
                    <StackPanel x:Name="_MiddleName" Orientation="Vertical">
                        <TextBlock Height="20" x:Name="MiddleName_TextBlock" Text="Middle Name" Margin="55,5,459,5" TextAlignment="Left"/>
                    <TextBox Height="25" x:Name="MiddleName_TextBox" Width="500" Margin="55,5,459,5"/>
                    </StackPanel>
                    <StackPanel x:Name="_ExtendedName" Orientation="Vertical">
                        <TextBlock Height="20" x:Name="ExtendedName_TextBlock" Text="Extended name (Tribal, Jr., III, etc.)" Margin="55,5,372,5" TextAlignment="Left"/>
                    <TextBox Height="25" x:Name="Extended_TextBox" Width="500" Margin="55,5,459,5"/>
                    </StackPanel>
                </StackPanel>
                <StackPanel Grid.RowSpan="4" Grid.Column="4" HorizontalAlignment="Left" Height="230" Margin="-250,400,0,0" Width="480" Grid.ColumnSpan="1">
                    <StackPanel x:Name="_Aliases" Orientation="Vertical" Margin="-15,0,0,0" Height="144">
                        <TextBlock Height="20" x:Name="Aliases_TextBlock" Text="Aliases" Margin="40,-5,0,5" TextAlignment="Left"/>
                        <TextBox Height="25" x:Name="Aliases_TextBox" Width="500" Margin="43,5"/>
                        <TextBox Height="25" x:Name="Aliases_TextBox1" Width="500" Margin="43,5"/>
                        <TextBox Height="25" x:Name="Aliases_TextBox2" Width="500" Margin="43,5"/>
                    </StackPanel>
        </StackPanel>

        <!--<Label HorizontalAlignment="Left" Margin="4,132,0,0" Grid.Row="3" VerticalAlignment="Top" Background="#FF72C772" Grid.ColumnSpan="3" Width="1242" Height="36"/>
        <Button Content="Continue" Grid.Column="2" HorizontalAlignment="Left" Margin="16,139,0,0" Grid.Row="3" VerticalAlignment="Top" Width="125" Click="Page1_Continue_Click"/>
        <Button Content="Save Draft" Grid.Column="1" HorizontalAlignment="Left" Margin="336,139,0,0" Grid.Row="3" VerticalAlignment="Top" Width="125"/>-->
        <Label HorizontalAlignment="Left" Margin="4,400,0,0" Grid.Row="4" VerticalAlignment="Top" Background="#FF52BB52" Grid.ColumnSpan="3" Width="983" Height="36">
        </Label>
        <Button Content="Save Draft" Grid.Column="1" HorizontalAlignment="Left" Margin="150,408,0,0" Grid.Row="5" VerticalAlignment="Top" Width="125" />
        <Button x:Name="ContinueButton_Page2" Content="Continue" Grid.Column="1"  Width="125" Grid.Row="5" VerticalAlignment="Top"  Margin="200,408,0,0" Grid.ColumnSpan="2" Click="btnContinue_Click"/>
    </Grid>
</Window>

Answer 1

如果您想在调整大小期间控制对齐方式，请考虑 Grid。在更复杂的情况下，考虑网格内的网格。一张图更能说明问题

您的 MainGrid 只有行，没有列。蓝色标题有自己的行和 橙色容器本身就是网格（左右可能有边距）。

现在您不应该尝试用所有“...*”宽度值来划分可用空间。

在此示例中，您只能将其用于死区，例如带有 Width="*" 的黄色列。 蓝色列将是 Width="Auto"（或像素）。

使用与底部网格所需的宽度相对应的窗口的 MinWidth 来结束它。还可以考虑将 MainGrid 包装在 ScrollViewer 中。

Answer 2

我需要的是不允许调整网络浏览器的大小。为此，我删除了最小化/最大化按钮为此，我使用了以下属性：

ResizeMode="NoResize"