Grid宽度调整时控件重叠问题求助（附XAML代码）

调整Grid宽度时页面控件出现重叠，以下是问题成因和解决方案：

问题成因 #

• 固定宽度控件溢出：多个控件设置了固定Width（如Din lottorad:文本框的Width="150"、AmountOfRounds输入框的Width="350"），当Grid宽度缩小，所在列的可用空间小于控件固定宽度时，控件会超出列边界，和相邻控件重叠。
• 不当跨列（ColumnSpan）使用：部分控件通过ColumnSpan跨多列显示（如FiveCorrect输入框ColumnSpan="2"），但相邻列仍有其他控件，列宽压缩时会挤占对方空间。
• 硬编码Margin错位：部分控件使用固定值Margin（如Antal dragningar:文本框的Margin="110,0,0,5"），宽度变化时固定偏移无法自适应，导致控件位置错误。

解决方案 #

1. 移除固定Width，改用弹性布局：将固定Width替换为HorizontalAlignment="Stretch"，让控件自适应列宽；必要时用MinWidth保证控件最小显示尺寸。
2. 合理规划列布局与跨列：调整跨列控件的范围，或为列设置MinWidth避免过度压缩；对需要集中排列的控件，用StackPanel等容器替代硬编码位置。
3. 替换固定Margin为相对间距：用布局容器的Padding或控件间的相对Margin代替固定偏移，确保布局自适应。

修改后的XAML代码 #

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

    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- 第一行：彩票号码输入 -->
        <Grid Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" MinWidth="150"/>
                <ColumnDefinition Width="*" MinWidth="80"/>
                <ColumnDefinition Width="*" MinWidth="80"/>
                <ColumnDefinition Width="*" MinWidth="80"/>
                <ColumnDefinition Width="*" MinWidth="80"/>
                <ColumnDefinition Width="*" MinWidth="80"/>
                <ColumnDefinition Width="*" MinWidth="80"/>
                <ColumnDefinition Width="*" MinWidth="80"/>
            </Grid.ColumnDefinitions>

            <TextBlock FontWeight="Bold" Margin="5" VerticalAlignment="Top" 
                       Text="Din lottorad:" FontSize="22" TextAlignment="Center"/>
            <TextBox Name="inputTal1" TextChanged="inputTal1_TextChanged" 
                     VerticalAlignment="Top" Grid.Column="1" Margin="5" HorizontalAlignment="Stretch"/>
            <TextBox Name="inputTal2" TextChanged="inputTal2_TextChanged" 
                     VerticalAlignment="Top" Grid.Column="2" Margin="5" HorizontalAlignment="Stretch"/>
            <TextBox Name="inputTal3" TextChanged="inputTal3_TextChanged" 
                     VerticalAlignment="Top" Grid.Column="3" Margin="5" HorizontalAlignment="Stretch"/>
            <TextBox Name="inputTal4" TextChanged="inputTal4_TextChanged" 
                     VerticalAlignment="Top" Grid.Column="4" Margin="5" HorizontalAlignment="Stretch"/>
            <TextBox Name="inputTal5" TextChanged="inputTal5_TextChanged" 
                     VerticalAlignment="Top" Grid.Column="5" Margin="5" HorizontalAlignment="Stretch"/>
            <TextBox Name="inputTal6" TextChanged="inputTal6_TextChanged" 
                     VerticalAlignment="Top" Grid.Column="6" Margin="5" HorizontalAlignment="Stretch"/>
            <TextBox Name="inputTal7" TextChanged="inputTal7_TextChanged"  
                     VerticalAlignment="Top" Grid.Column="7" Margin="5" HorizontalAlignment="Stretch"/>
        </Grid>

        <!-- 第二行：错误提示与操作区 -->
        <Grid Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto" MinWidth="200"/>
                <ColumnDefinition Width="*" MinWidth="100"/>
                <ColumnDefinition Width="Auto" MinWidth="120"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <TextBlock Grid.ColumnSpan="5" Foreground="Red" Name="errorText" 
                       HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22"/>
            <TextBlock FontWeight="Bold" VerticalAlignment="Center" 
                       Grid.Column="1" Grid.Row="1" Margin="5" FontSize="22" Text="Antal dragningar:"/>
            <TextBox MinWidth="100" Grid.Column="2" Grid.Row="1" 
                     Name="AmountOfRounds" VerticalAlignment="Center" HorizontalAlignment="Stretch" Margin="5"/>
            <Button Background="LightBlue" VerticalAlignment="Center" 
                    Grid.Column="3" Grid.Row="1" Margin="5" Click="Button_Click">
                <Button.ContentTemplate>
                    <DataTemplate>
                        <Viewbox>
                            <TextBlock>StartaLotto</TextBlock>
                        </Viewbox>
                    </DataTemplate>
                </Button.ContentTemplate>
            </Button>
        </Grid>

        <!-- 第三行：结果统计 -->
        <Grid Grid.Row="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto" MinWidth="80"/>
                <ColumnDefinition Width="*" MinWidth="80"/>
                <ColumnDefinition Width="Auto" MinWidth="80"/>
                <ColumnDefinition Width="*" MinWidth="80"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <StackPanel Grid.Column="3" Grid.ColumnSpan="2" Orientation="Horizontal" 
                        VerticalAlignment="Bottom" Margin="5">
                <TextBlock FontWeight="Bold" Text="5 rätt:" FontSize="22" VerticalAlignment="Center"/>
                <TextBox Name="FiveCorrect" Margin="10,0,0,0" MinWidth="80" HorizontalAlignment="Stretch"/>
            </StackPanel>
            <StackPanel Grid.Column="5" Orientation="Horizontal" 
                        VerticalAlignment="Bottom" Margin="5">
                <TextBlock FontWeight="Bold" Text="6 rätt:" FontSize="22" VerticalAlignment="Center"/>
                <TextBox Name="SixCorrect" Margin="10,0,0,0" MinWidth="80" HorizontalAlignment="Stretch"/>
            </StackPanel>
            <StackPanel Grid.Column="6" Grid.ColumnSpan="2" Orientation="Horizontal" 
                        VerticalAlignment="Bottom" Margin="5">
                <TextBlock FontWeight="Bold" Text="7 rätt:" FontSize="22" VerticalAlignment="Center"/>
                <TextBox Name="SevenCorrect" Margin="10,0,0,0" MinWidth="80" HorizontalAlignment="Stretch"/>
            </StackPanel>
        </Grid>
    </Grid>
</Page>

代码修改说明 #

• 第一行标题列改用Width="Auto"确保文本完整显示，输入列设置MinWidth防止过度压缩，输入框设HorizontalAlignment="Stretch"自适应列宽。
• 第二行重新规划列布局，用Auto和*结合分配空间，移除固定Width和硬编码Margin，避免位置冲突。
• 第三行用StackPanel将标签与输入框绑定，确保两者始终相邻，不会因列宽变化错位，同时移除固定Width和不合理的跨列设置。

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