WPF：为什么 Grid 的 TextBlock 隐藏边距值编辑？答案

【问题标题】：WPF: Why Does Grid's TextBlock Hide with Margin Value Edit?WPF：为什么 Grid 的 TextBlock 隐藏边距值编辑？
【发布时间】：2018-04-25 19:05:20
【问题描述】：

我已经在 C# 中使用应用程序开发人员工作了大约一年 - 我已经从 C++-CLI winForm 切换到 C# winForm，现在切换到 C#/XML WPF。我正在创建一个模板来测试我对 UI/UX 效果（动画）的了解。本质上发生的情况是，当用户选择“开始”按钮时，表单的右半部分（白色）的宽度从 390 扩展到 600，导致左半部分（橙色）缩小并显示新信息。

一切都很好，但是最近我发现网格元素在使用边距值时有时会出现异常。下面显示了 TextBlock [...] Margin="0, 97" 与 TextBlock [...] Margin="210,97" 之间的区别。我希望 TextBlock 位于椭圆的右侧，尽管它不可见。

 <Grid x:Name="RightContent2" Opacity="1" Width="390" Height="410" Background="White">
                <TextBlock x:Name="author2" Foreground="LightGray" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="210, 97" FontSize="8" Text="By Luke Isitt" Cursor="Hand"/>
                <Ellipse Height=" 25" Width="25" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="170, 90" Cursor="Hand">
                    <Ellipse.Fill>
                        <ImageBrush ImageSource="./resources/images/Drake-smiling.jpg"/>
                    </Ellipse.Fill>
                </Ellipse>
                <TextBlock Text="Lesson 3 of 32" FontFamily="Georgia" FontStyle="Italic" FontSize="9" Margin="50, 100, 30, 0" HorizontalAlignment="Left" VerticalAlignment="Top"></TextBlock>
                <Line Margin="150, 90, 0, 0" Y1="0" Y2="140" Stroke="#FFF1F1F1" StrokeThickness="1.75" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                <TextBlock FontFamily="Times New Roman" FontSize="32" Margin="160, 140, 0, 0" FontWeight="SemiBold"  HorizontalAlignment="Left" VerticalAlignment="Top">
                    Nike Email Best <LineBreak/> Practices <LineBreak/>
                <Line Margin="0, 13" X1="0" X2="80" Stroke="#FF642F" StrokeThickness="2.5"/>
                </TextBlock>

                <Line Margin="160, 300" X1="0" X2="150" Stroke="#FF642F" StrokeThickness="1" HorizontalAlignment="Left" VerticalAlignment="Top"/>
            </Grid>

没有重叠的元素，TextBlock 位于 Grid Hierarchy 的顶部（尽管这似乎无关紧要）。谁能提供关于为什么会发生这种情况的见解？

【问题讨论】：

设计师很糟糕。我从不将它用于布局，只是偶尔大致了解我在 XAML 编辑器中所做的工作会是什么样子。
@EdPlunkett 我刚刚尝试拖放到相同的坐标并且它有效。我喜欢这个设计器，但我不知道为什么当 xml 代码相同时这才有效。
@LukeIsitt 您是否尝试过 210、97 以外的其他坐标？如果您将其向下、向上、向右、向左等移动一点，您可以看到效果是否被复制。
@thesystem 是的，它保持可见性直到 175、97。x 轴上的任何内容都会导致修剪。
@LukeIsitt 这很奇怪，尤其是在拖放到相同坐标时。好吧，很高兴你解决了它:-)

标签： c# xml wpf

【解决方案1】：

Margin 属性是厚度类型，实际上包含 4 个值：Left、Top、Right、Bottom。可以通过单独指定所有 4 个值来设置边距，即“210,97,5,30”，或使用单个值的缩写，即“210”，这会将 Left/Top/Right/Bottom 全部设置为 210，或者使用2 个值，“210,97”，将 Left & Right 设置为 210，Top & Bottom 设置为 97。

在您的情况下，将 TextBlock 的边距设置为“210,97”相当于将其设置为“210,97,210,97”，因此左右均为 210。这意味着您的水平边距空间为 420，并且由于父 Grid 的宽度仅为 390，因此生成的 TextBlock 的宽度将为 -30，使其不可见。

要解决，根据您设置的左/上对齐方式，将 TextBlock 的边距设置为“210,97,0,0”，它将可见。

【讨论】：