WPF：按钮、文本框被截断

Question

我很困惑为什么我的一些文本框和按钮被截断了，能否有人帮我解决这个问题？谢谢！

XAML代码

<Grid>
        <TabControl>
            <TabItem Name="tabHome">
                <TabItem.Header>
                    <Label Content="Home" MouseLeftButtonDown="tabHome_Click"/>
                </TabItem.Header>
                <Grid>
                    <Button Content="Parse" Height="23" x:Name="btn_parse" Width="75" Click="buttonParse_Click" Margin="180,10,180,176"/>
                    <TextBox IsReadOnly="True"  x:Name="txtbox_filepath" Height="25" Width="135" Margin="151,52,150,132" />
                    <Button Content="Reset" Height="23" x:Name="btn_reset" Width="75" Margin="180,122,180,64" Click="buttonReset_Click"/>
                </Grid>
            </TabItem>
            <TabItem Name="tabConfig">
                <TabItem.Header>
                <Label Content="Configuration" MouseLeftButtonDown="tabConfig_Click"/>
                </TabItem.Header>
                <ScrollViewer>
                    <StackPanel Name="panelConfig">
                    </StackPanel>
                </ScrollViewer>
            </TabItem>
<Grid>

屏幕截图

从屏幕截图可以看出，按钮和文本框在角落处被切掉了一部分。
感谢您的帮助，我非常感激。

- AustinT

Answer 1

当您设置类似Margin="180,10,180,176"的Margin值时，这意味着控件必须相对于父控件左侧180 dip、顶部10 dip、右侧180 dip和底部176 dip的位置放置。由于Margin值过高，您的控件被剪切了。

注：dip代表设备独立像素。

建议创建Grid的RowDefinitions，并将控件以合理的Margin值放置在不同的行中，如下所示。

<Grid>
    <TabControl>
        <TabItem Name="tabHome">
            <TabItem.Header>
                <Label Content="Home"/>
            </TabItem.Header>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Button Grid.Row="0" Content="Parse" Height="23" x:Name="btn_parse" Width="75" Margin="10" />
                <TextBox Grid.Row="1" IsReadOnly="True"  x:Name="txtbox_filepath" Height="25" Width="135" Margin="10" />
                <Button Grid.Row="2" Content="Reset" Height="23" x:Name="btn_reset" Width="75" Margin="10"/>
            </Grid>
        </TabItem>
        <TabItem Name="tabConfig">
            <TabItem.Header>
                <Label Content="Configuration"/>
            </TabItem.Header>
            <ScrollViewer>
                <StackPanel Name="panelConfig">
                </StackPanel>
            </ScrollViewer>
        </TabItem>
    </TabControl>
</Grid>

- Anand Murali

---

谢谢，我采纳了你的建议，现在我该如何在我的按钮和文本框之间添加间距？ - AustinT

给出一个合理的边距值，如5或10。请检查我的更新答案。 - Anand Murali

Answer 2

您明确地为按钮设置了Height和Width，但您使用的值太小了。

如果您将它们去掉，按钮应该能正确显示：

<Button Content="Parse" x:Name="btn_parse" Click="buttonParse_Click" Margin="180,10,180,176"/>
<Button Content="Reset" x:Name="btn_reset" Margin="180,122,180,64" Click="buttonReset_Click"/>

请注意，如果您使用Grid或其他容器自己设计而不是使用Margin，则可以更好地布局内容。

- Reed Copsey

Answer 3

删除Height、Width和Margin属性。

不要使用Visual Studio设计器创建WPF UI界面。

请参考http://wpftutorial.net/LayoutProperties.html。

- Federico Berasategui

---

@ReedCopsey 这正是我所说的。 - Federico Berasategui

Answer 4

你在使用高度、宽度属性和边距属性。移除高度和宽度属性，它就能正常工作了。例如：

<Button Content="Parse" x:Name="btn_parse" Click="buttonParse_Click" Margin="180,10,180,176"/>

- Mahendra Upadhyay