XAML文本块中的文本块和文本对齐方式

Question

Is there something that I am missing? We have a WPF project and using XAML for the layout. In our C# we are populating a string of values using a ForEach loop and plugging that into a the TextBlock's text property AND we are adding a "\\n" so that each of the strings that get pushed back to us gets a line break at the end of the line.

We have 2 TextBlocks next to each other. One TextBlock we are using as a Label and the next TextBlock we are using to get back the list of names. But when the list of names populates, the text seems to stack on top of each other going upward not downward. If the List of Names (right textblock) textblock has 3 lines in it then the Label textblock (the left textblock) aligns with the bottom of the right textblock. The container of the two textblocks is actually another textblock like below. I have attached an image as well. Our child list is dynamic, so we can not set the child list or label to be a specific height.

 <TextBlock x:Name="ChildNameText" VerticalAlignment="Top" TextWrapping="Wrap" HorizontalAlignment="Left" Padding="0" Margin="15,0,0,0">
                 <TextBlock x:Name="ChildLabelBold" FontWeight="Bold" Text="Child Label:" VerticalAlignment="Top" Margin="0,10" Padding="0,10,0,0"/>
                <TextBlock x:Name="ChildNameNormal" Text="Child Info" TextWrapping="Wrap" Width="Auto" Margin="0,10"/>
  </TextBlock>

Code Behind:

 if (dataSource.MyChildren != null && dataSource.MyChildren.Count > 0)
            {
                ChildLabelBold.Visibility = Visibility.Visible;
                ChildNameNormal.Visibility = Visibility.Visible;
                 ChildLabelBold.Text = "Child Name: ";

                //ChildNameText.Visibility = Visibility.Visible;
                string children = string.Empty;
                int childCount = dataSource.MyChildren.Count;
                int i = 1;
                foreach (var child in dataSource.MyChildren)
                {

                    children =  children + child.FirstName + " " + child.LastName + " - Date of Birth: " + child.DateOfBirth;

                    if (i < childCount)
                    {
                        children = children + "\n";
                    }
                    i++;
                }

                ChildNameNormal.Text = children;
                //ChildNameText.Text =  children;
             }
            else
            {
                ChildLabelBold.Visibility = Visibility.Collapsed;
                ChildNameNormal.Visibility = Visibility.Collapsed;
                //ChildNameText.Visibility = Visibility.Collapsed;
            }

What would be the solution to get these to align properly? The image below is basically what we are seeing. We want the left BOLD text in the Textblock text to be at the top of the block.

Here:

EDIT: Per AMR's request, here is the full XAML.

  <UserControl x:Class="MembershipApp.UserControls.ConfirmationWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  mc:Ignorable="d" 
  d:DesignHeight="768" d:DesignWidth="1280" x:Name="ConfirmWindow">
<UserControl.Resources>
    <SolidColorBrush x:Key="brushWatermarkBorder" Color="White" />

</UserControl.Resources>
<Grid x:Name="MembershipConfirmationGrid" Background="#FF014A7F">

    <TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Top" Margin="-3,15,0,0" FontSize="42" Foreground="White" Text="Membership Confirmation" FontFamily="Segoe UI" TextAlignment="Center"/>
    <Grid x:Name="MembershipConfirmationInfoGrid" Margin="20,89,20,20" Width="Auto" Background="White">
        <StackPanel x:Name="PrimaryStack" HorizontalAlignment="Stretch" Width="Auto">
            <StackPanel.Resources>
                <Style TargetType="TextBlock">
                    <Setter Property="Foreground" Value="#424242"></Setter>
                    <Setter Property="Padding" Value="15,10,0,0"></Setter>
                    <Setter Property="FontSize" Value="18"></Setter>
                </Style>
            </StackPanel.Resources>

            <TextBlock x:Name="ConfirmationMessage" Text="Please confirm that the information below is correct and press 'Confirm'" FontWeight="Bold" Margin="15,15,15,20" Background="#FFD0F0FD" Padding="10" Foreground="#FF014A7F">
            </TextBlock>

            <!--TODO: Add Membership Type to the list in Code Behind-->
            <TextBlock x:Name="MembershipTypeText">
                <TextBlock x:Name="MembershipTypeLabelBold" FontWeight="Bold" Text="Membership Type Label:" Margin="0" Padding="0,10,0,0"></TextBlock>
                <TextBlock x:Name="MembershipTypeNormal" Text="Membership Type"></TextBlock>
            </TextBlock>


            <TextBlock x:Name="PrimaryNameText">
                <TextBlock x:Name="PrimaryLabelBold" FontWeight="Bold" Text="Primary Member Label:" Margin="0" Padding="0,10,0,0"></TextBlock>
                <TextBlock x:Name="PrimaryNameNormal" Text="Member Name"></TextBlock>
            </TextBlock>
            <TextBlock x:Name="SpouseNameText">
                <TextBlock x:Name="SpouseLabelBold" FontWeight="Bold" Text="Spouse Member Label:" Margin="0" Padding="0,10,0,0"></TextBlock>
                <TextBlock x:Name="SpouseNameNormal" Text="Member Name"></TextBlock>
            </TextBlock>

           <!-- <TextBlock x:Name="MembershipCategoryText" Text="Membership Category:">
            </TextBlock>-->

            <TextBlock x:Name="ChildNameText" VerticalAlignment="Top" TextWrapping="Wrap" HorizontalAlignment="Left" Padding="0" Margin="15,0,0,0">
                 <TextBlock x:Name="ChildLabelBold" FontWeight="Bold" Text="Child Label:" VerticalAlignment="Top" Margin="0,10" Padding="0,10,0,0"/>
                <TextBlock x:Name="ChildNameNormal" Text="Child Info" TextWrapping="Wrap" Width="Auto" Margin="0,10" VerticalAlignment="Top"/>
            </TextBlock>


            <TextBlock x:Name="AddressText" VerticalAlignment="Top">
                <TextBlock x:Name="AddressLabelBold" FontWeight="Bold" Text="Address Label:" VerticalAlignment="Top" Margin="0" Padding="0,10,0,0" HorizontalAlignment="Left"></TextBlock>
                <TextBlock x:Name="AddressNameNormal" Text="Address Info" VerticalAlignment="Top" TextWrapping="Wrap" HorizontalAlignment="Left"></TextBlock>

            </TextBlock>

            <TextBlock x:Name="Phone1Text">
                <TextBlock x:Name="Phone1LabelBold" FontWeight="Bold" Text="Home Phone Label:" VerticalAlignment="Top" Margin="0" Padding="0,10,0,0" HorizontalAlignment="Left"></TextBlock>
                <TextBlock x:Name="Phone1Normal" Text="Home Phone Info" VerticalAlignment="Top" TextWrapping="Wrap" HorizontalAlignment="Left"></TextBlock>
            </TextBlock>

            <TextBlock x:Name="Phone2Text" HorizontalAlignment="Left">
                <TextBlock x:Name="Phone2LabelBold" FontWeight="Bold" Text="Work Phone Label:" VerticalAlignment="Top" Margin="0" Padding="0,10,0,0" HorizontalAlignment="Left"></TextBlock>
                <TextBlock x:Name="Phone2Normal" Text="Work Phone Info" VerticalAlignment="Top" TextWrapping="Wrap" HorizontalAlignment="Left"></TextBlock>

            </TextBlock>

            <TextBlock x:Name="Phone3Text" HorizontalAlignment="Left">
                <TextBlock x:Name="Phone3LabelBold" FontWeight="Bold" Text="Cell Phone Label:" VerticalAlignment="Top" Margin="0" Padding="0,10,0,0" HorizontalAlignment="Left"></TextBlock>
                <TextBlock x:Name="Phone3Normal" Text="Cell Phone Info" VerticalAlignment="Top" TextWrapping="Wrap" HorizontalAlignment="Left"></TextBlock>
            </TextBlock>

            <TextBlock x:Name="EmailText" HorizontalAlignment="Left">
                <TextBlock x:Name="EmailLabelBold" FontWeight="Bold" Text="Email Label:" VerticalAlignment="Top" Margin="0" Padding="0,10,0,0" HorizontalAlignment="Left"></TextBlock>
                <TextBlock x:Name="EmailNormal" Text="Email Info" VerticalAlignment="Top" TextWrapping="Wrap" HorizontalAlignment="Left"></TextBlock>
            </TextBlock>
        </StackPanel>

    </Grid>
    <Grid x:Name="CofirmationButtons" Margin="0,89,20,30" HorizontalAlignment="Center" VerticalAlignment="Bottom" Width="600" Height="80">
        <StackPanel x:Name="ButtonGroup1" Margin="0,0,0,15" Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Center">
            <Button x:Name="BtnBack" Content="Back" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Bottom" Width="80" Height="47" Margin="10,0" Background="#FF5B5B5B"/>
            <Button x:Name="BtnApprove" Content="Confirm" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Bottom" Width="200" Height="47" Margin="10,0"/>
        </StackPanel>
    </Grid>
    <StackPanel x:Name="MembershipPickStackPanel" Margin="10,50,10,0" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Top"/>
    <TextBlock HorizontalAlignment="Left" Margin="15,58,0,0" TextWrapping="Wrap" Text="No. of Children:" VerticalAlignment="Top" Width="96" Visibility="Hidden"/>
    <ComboBox x:Name="NumberOfChildrenDDL" HorizontalAlignment="Left" Margin="111,51,0,0" VerticalAlignment="Top" Width="51" Visibility="Hidden"/>
</Grid>

Answer 1

Your code is completely wrong. Delete all that and start all over.

You must NOT manipulate UI elements in code in WPF.

<Window x:Class="MiscSamples.LabelledList"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="LabelledList" Height="300" Width="300">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <TextBlock Text="Child Names:" VerticalAlignment="Top" Margin="2"
                   FontWeight="Bold" />

        <ItemsControl ItemsSource="{Binding}" Margin="2" DisplayMemberPath="DisplayName"
                      Grid.Column="1"/>
    </Grid>
</Window>

Code Behind:

public partial class LabelledList : Window
{
    public LabelledList()
    {
        InitializeComponent();

        DataContext = Enumerable.Range(0, 10)
                                .Select(x => new SomeClass() { DisplayName = "Child" + x.ToString()})
                                .ToList();
    }
}

Data Item:

public class SomeClass
{
    public string DisplayName { get; set; }
}

Result:

Answer 2

You need to set the vertical alignment to top in the childNameNormal textblock its not set in child normal

In this one

    <TextBlock x:Name="ChildNameNormal" Text="Child Info" TextWrapping="Wrap" Width="Auto" Margin="0,10"/>
  </TextBlock>