WPF窗口内容适配：窗口尺寸变化时保持布局仅自适应调整

Got it, let's get your layout to properly adapt when resizing the window while keeping its original structure intact.

The Issue with Your Original Code #

Your current XAML uses fixed Margin values for each element. When you resize the window, these margins stay static—this breaks the original layout proportions, making elements stretch, shrink, or overlap in unintended ways.

The Solution: Use Grid Rows & Columns #

Instead of relying on fixed margins, we'll define a structured grid with proportional rows and columns. This ensures each section scales with the window while maintaining its relative size and position.

Here's the adjusted XAML:

<Window Height="500" Width="800">
    <Grid>
        <!-- Define two columns: left column matches original menu width, right takes remaining space -->
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="160"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        
        <!-- Define two rows: top row holds main content, bottom row holds the input box -->
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="150"/>
        </Grid.RowDefinitions>

        <!-- Left panel: split into top and bottom menu sections -->
        <Grid Grid.Column="0" Grid.Row="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="235*"/>
                <RowDefinition Height="245*"/>
            </Grid.RowDefinitions>
            
            <TextBlock Name="menuOutput" Grid.Row="0" Background="Gray" Margin="10"/>
            <TextBlock Name="menuOutput2" Grid.Row="1" Background="Green" Margin="10"/>
        </Grid>

        <!-- Right top section: spans the entire top row -->
        <TextBlock Name="consoleOutput" Grid.Column="1" Grid.Row="0" Background="Aqua" Margin="10"/>
        
        <!-- Right bottom section: input box -->
        <TextBox Name="consoleInput" Grid.Column="1" Grid.Row="1" Background="Red" AcceptsReturn="True" Margin="10"/>
    </Grid>
</Window>

How This Works #

• Columns: The left column is fixed at 160 (matching your original menu panel width), and the right column uses * to take up all remaining space. This preserves the 1:4 width ratio as the window resizes.
• Rows: The top row uses * to fill most of the window height, while the bottom row stays fixed at 150 (matching your original input box height).
• Nested Grid: The left panel uses a nested grid to split the top row into proportional sections (235:245, matching your original menu panel heights), so those sections scale together seamlessly.
• Margins: We kept small, consistent margins around each element to maintain padding without breaking the scaling behavior.

Now when you resize the window, every section will adjust proportionally, keeping your original layout structure exactly as intended.

内容的提问来源于stack exchange，提问作者Chloe