CODEWITHSUNDEEP
c#xmlwpf
Luke Isitt
Luke Isitt

Reputation: 113

WPF: Why Does Grid's TextBlock Hide with Margin Value Edit?

I've been working with application dev in C# for about a year - I've made the switch from C++-CLI winForm, to C# winForm, and now to C#/XML WPF. I am creating a template to test my knowledge of UI/UX effects (animation). Essentially what occurs is that when the user selects the "Get Started" Button, the right half of the form (white)'s width extends from 390 to 600, resulting in the left half (orange), shrinking and displaying new info.

Everything is well and good, however recently I've been finding that grid elements will misbehave on occasion when using Margin values. The following shows the difference between TextBlock [...] Margin="0, 97" versus TextBlock [...] Margin="210,97". I would like the TextBlock to be to the right of the ellipse, though it is not visible.

margin ex 1

margin ex 2

 <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>

There are no overlapping elements, and the TextBlock is at the top of the Grid Hierarchy (though that doesn't seem to matter). Could anyone provide insight on why this might occur?

Upvotes: 1

Views: 543

Answers (1)

Jeff R.
Jeff R.

Reputation: 1521

The Margin property is of type Thickness which actually contains 4 values: Left, Top, Right, Bottom. Margin can be set by specifying all 4 values individually, i.e. "210,97,5,30", or abbreviated using a single value, i.e. "210" which would set Left/Top/Right/Bottom all to 210 each, or using 2 values, "210,97" which would set both Left & Right to 210 and Top & Bottom to 97.

In your case, setting the TextBlock's Margin to "210,97" is equivalent to setting it to "210,97,210,97" so both Left AND Right are 210. Together that means you have a horizontal margin space of 420 and since the width of the parent Grid is only 390, the resulting TextBlock will get a width of -30 making it not visible.

To solve, based on your set alignment of Left/Top, set the TextBlock's Margin to "210,97,0,0" and it will be visible.

Upvotes: 1

Related Questions