TextBlock Alignment with TextBox Child Element

Question

I'm working on a pretty standard layout type where the TextBlock is right justified and the TextBox is left justified to form columns of input fields:

Screenshot: http://sdrv.ms/T1mz1s

I like that the TextBox is a child of the TextBlock because it makes them easy to re-arrange, but if that's not the right way to go about aligning them both on a kind of invisible central column it'd be nice if someone can explain how this is usually done.

Also, note that the TextBox seems to be mis-aligned vertically with the text.  I'd like to bump it down a few pixels with a top margin but adjusting this in the layout properties has no effect.

Finally, is there a sketchy date picker? :)

---

"We're all in it together, kid." - Harry Tuttle, Heating Engineer

Answer 1

Not sure how you have it laid out, but I would create a grid with 2 columns, like this:

<Grid Margin="57,142,267,162">
			<Grid.RowDefinitions>
				<RowDefinition Height="Auto"/>
				<RowDefinition Height="Auto"/>
				<RowDefinition Height="Auto"/>
				<RowDefinition/>
			</Grid.RowDefinitions>
			<Grid.ColumnDefinitions>
				<ColumnDefinition Width="Auto"/>
				<ColumnDefinition Width="Auto"/>
			</Grid.ColumnDefinitions>
			<TextBlock Margin="0,0,29,2" Style="{StaticResource BasicTextBlock-Sketch}" TextWrapping="Wrap" Text="Basic Text"/>
			<TextBlock HorizontalAlignment="Left" Margin="0,0,0,6" Style="{StaticResource BasicTextBlock-Sketch}" TextWrapping="Wrap" Text="Basic Text" d:LayoutOverrides="Height" Grid.Row="1"/>
			<TextBlock HorizontalAlignment="Left" Margin="0,0,0,6" Style="{StaticResource BasicTextBlock-Sketch}" TextWrapping="Wrap" Text="Basic Text" d:LayoutOverrides="Height" Grid.Row="2"/>
			<TextBox Margin="0,0,61,0" Style="{StaticResource BasicTextBox-Sketch}" TextWrapping="Wrap" Text="TextBox" d:LayoutOverrides="Width, Height" Grid.Column="1"/>
			<TextBox Margin="0,0,61,0" Style="{StaticResource BasicTextBox-Sketch}" TextWrapping="Wrap" Text="TextBox" Grid.Column="1" d:LayoutOverrides="Width, Height" Grid.Row="1"/>
			<TextBox Margin="0,0,61,0" Style="{StaticResource BasicTextBox-Sketch}" TextWrapping="Wrap" Text="TextBox" Grid.Column="1" d:LayoutOverrides="Width, Height" Grid.Row="2"/>
		</Grid>

Answer 2

For now I ended up using a stack panel.

Within that are horizontal stack panels.

Since there are three general columns of info in the sketch, I placed up to three horizontal stack panels in each of these, then added the elements.

Seems to flow well for now.

---

"We're all in it together, kid." - Harry Tuttle, Heating Engineer