WPF：重叠网格控件答案

【问题标题】：WPF: overlapping grid controlsWPF：重叠网格控件
【发布时间】：2019-02-15 18:27:14
【问题描述】：

我正在尝试在 WPF 中构建它（这是在 winform 中完成的）：

但结果看起来像这样：

这是我的代码：

<DockPanel>
        <Menu DockPanel.Dock="Top">
            <MenuItem Header="_File">
                <MenuItem Header="_Exit" />
            </MenuItem>
            <MenuItem Header="_Test" />
        </Menu>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid Grid.Row="0" Grid.Column="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <GroupBox Grid.Row="0" Grid.Column="0" Header="Interfaces" HorizontalAlignment="Left" Margin="10,10,-155,0"
                  VerticalAlignment="Top" Height="236" Width="419">
                </GroupBox>

                <GroupBox Grid.Row="1" Grid.Column="0" Header="Messages" HorizontalAlignment="Left" Margin="10,10,-155,0"
                  VerticalAlignment="Top" Height="236" Width="419">
                </GroupBox>

                <GroupBox Grid.Row="2" Grid.Column="0" Header="Responses" HorizontalAlignment="Left" Margin="10,10,-155,0"
                  VerticalAlignment="Top" Height="236" Width="419">
                </GroupBox>
            </Grid>

            <Grid Grid.Row="0" Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <RichTextBox Name="txtLog" Grid.Row="0" Grid.Column="0">
                    <FlowDocument>
                        <Paragraph FontSize="12">Hello, world!</Paragraph>
                    </FlowDocument>
                </RichTextBox>
            </Grid>
        </Grid>
    </DockPanel>

我不明白为什么文本框与第 0 列的组框重叠。我希望它填充右侧的网格。

所以希望我添加更多文本：我可能想在中心添加一个 GridSplitter，因此也将不胜感激。

【问题讨论】：

去掉GroupBox上的负右边距“-155”。将其设为 0。您还可能需要为第二个网格中行和列的宽度和高度设置 * (<Grid Grid.Row="0" Grid.Column="1">)
您可能还想从 GroupBoxes 中删除宽度和高度。这样您的 UI 就可以适应任何窗口大小。
我没有注意到那里。当我在表单上拖动分组框时，它会自动添加。这将教会我下次不要偷懒。

标签： wpf xaml layout grid

【解决方案1】：

以下是简化DockPanel 的方法，使其能够适应任何屏幕尺寸。我删除了很多不需要的东西。

<DockPanel>
    <Menu DockPanel.Dock="Top">
        <MenuItem Header="_File">
            <MenuItem Header="_Exit" />
        </MenuItem>
        <MenuItem Header="_Test" />
    </Menu>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <GroupBox Grid.Row="0" Header="Interfaces" HorizontalAlignment="Stretch" Margin="5">
            </GroupBox>
            <GroupBox Grid.Row="1" Grid.Column="0" Header="Messages" HorizontalAlignment="Stretch" Margin="5">
            </GroupBox>
            <GroupBox Grid.Row="2" Grid.Column="0" Header="Responses" HorizontalAlignment="Stretch" Margin="5">
            </GroupBox>
        </Grid>
        <Grid Grid.Column="1">
            <RichTextBox Name="txtLog" Margin="5">
                <FlowDocument>
                    <Paragraph FontSize="12">Hello, world!</Paragraph>
                </FlowDocument>
            </RichTextBox>
        </Grid>
    </Grid>
</DockPanel>

然后输出

【讨论】：

【解决方案2】：

@ASh 是对的。负值-155 有点混乱，它使左侧面板上的GroupBoxes 占据比包含Grid 更宽的位置。

所以不是RichTextBox 与GropuBoxes 重叠； RichTextBox 是它应该在的位置，它是三个 GroupBoxes 拉伸 155 像素。

对于RichTextBox，由于您将其放在Grid 中，其Width 设置为Auto，因此RictTextBox 不会水平伸展以占用所有可用空间。

删除这些行将解决此问题。

<Grid Grid.Row="0" Grid.Column="1" >

    <!--Remove the RowDefinitions/ColumnDefinitions-->           

    <RichTextBox Name="txtLog">
        <FlowDocument>
            <Paragraph FontSize="12">Hello, world!</Paragraph>
        </FlowDocument>
    </RichTextBox>
</Grid>

【讨论】：