C# – XAML Textblocks and text alignment within the textblock

cxaml

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.

enter image description here
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>

Best Answer

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:

enter image description here

This is the style that Microsoft tends to use in their examples.

It appears that the guidance in this area may have changed, as StyleCop now enforces the use of the C# specific aliases.

C# – the difference between const and readonly in C#

Apart from the apparent difference of

having to declare the value at the time of a definition for a const VS readonly values can be computed dynamically but need to be assigned before the constructor exits.. after that it is frozen.
const's are implicitly static. You use a ClassName.ConstantName notation to access them.

There is a subtle difference. Consider a class defined in AssemblyA.

public class Const_V_Readonly
{
  public const int I_CONST_VALUE = 2;
  public readonly int I_RO_VALUE;
  public Const_V_Readonly()
  {
     I_RO_VALUE = 3;
  }
}

AssemblyB references AssemblyA and uses these values in code. When this is compiled:

in the case of the const value, it is like a find-replace. The value 2 is 'baked into' the AssemblyB's IL. This means that if tomorrow I update I_CONST_VALUE to 20, AssemblyB would still have 2 till I recompile it.
in the case of the readonly value, it is like a ref to a memory location. The value is not baked into AssemblyB's IL. This means that if the memory location is updated, AssemblyB gets the new value without recompilation. So if I_RO_VALUE is updated to 30, you only need to build AssemblyA and all clients do not need to be recompiled.

So if you are confident that the value of the constant won't change, use a const.

public const int CM_IN_A_METER = 100;

But if you have a constant that may change (e.g. w.r.t. precision).. or when in doubt, use a readonly.

public readonly float PI = 3.14;

Update: Aku needs to get a mention because he pointed this out first. Also I need to plug where I learned this: Effective C# - Bill Wagner

Best Answer

Related Solutions

C# – the difference between String and string in C#

This is the style that Microsoft tends to use in their examples.

C# – the difference between const and readonly in C#

Related Topic