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

Question

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

一切都很好，但是最近我发现在使用Margin值时，网格元素会偶尔出现错误。以下显示了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位于网格层次结构的顶部（尽管这似乎并不重要）。任何人都可以提供有关为什么会发生这种情况

Answer 1

Margin属性的厚度类型实际上包含4个值：Left，Top，Right，Bottom。可以通过单独指定所有4个值来设置保证金，即“210,97,5,30”，或者使用单个值缩写，即“210”将左/上/右/下全部设置为210，或者使用2个值，“210,97”，它将左和右设置为210，将上下设置为97。

在您的情况下，将TextBlock的边距设置为“210,97”相当于将其设置为“210,97,210,97”，因此左和右都是210.这意味着您的水平边距空间为420，因为宽度父网格只有390，生成的TextBlock将获得-30的宽度，使其不可见。

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