WPF - How to right align a textblock inside a horizontally oriented stackpanel?

Question

This should be so simple - I've been hitting my head against my desk for so long trying to make a seemlingly simple task work (makes me feel like WPF is un-intuitive or buggy)...

In any case, I've got a Stackpanel which is set to horizontal orientation. Inside it I've got two TextBlocks. I want the 2nd one to display it's text to the right.

How do I accomplish it?

Doing all this reminds me why I walked away from Silverlight. :p

Clavus

Answer 1

You need to use a DockPanel if you don't want all elements to be stacked like the StackPanel do. To cause the second TextBlock to right-align, you can add an extra dummy TextBlock to fill the area between them:

    <DockPanel>
        <TextBlock>Left text</TextBlock>
        <TextBlock DockPanel.Dock="Right">Right text</TextBlock>
        <TextBlock />
    </DockPanel>

Or you can use the TextAlignment attribute:

    <DockPanel>
        <TextBlock>Left text</TextBlock>
        <TextBlock TextAlignment="Right">Right text</TextBlock>
    </DockPanel>

Fob

Super fast and worked. I commend you for taking the time to share this. I hope you find $5 on the ground. – Overflight

Answer 2

It can be archived very easily by using grid as I've got the same problem :)

<Grid>
    <TextBlock>Left text</TextBlock>
    <TextBlock TextAlignment="Right">Right text</TextBlock>
</Grid>

Tilda

Answer 3

In light of your comments, here is another example showing a couple of ways of accomplishing what you want, Grid layout and DockPanel layout. From the sounds of it, the DockPanel layout is probably what you're looking for. If this doesn't work, you may need to provide a clearer description of your desired layout and properties.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="0.45*" />   
    <RowDefinition Height="0.05*" />
    <RowDefinition Height="0.45*" />
  </Grid.RowDefinitions>
   <Grid Grid.Row="0">
      <Grid.ColumnDefinitions>
        <!-- note: you don't need to declare ColumnDefintion
         widths here; added for clarity. -->
         <ColumnDefinition Width="0.5*" />
         <ColumnDefinition Width="0.5*" />
      </Grid.ColumnDefinitions>
      <TextBlock 
          Grid.Column="0" 
          Background="Tomato" 
          TextWrapping="Wrap">I'm on the left</TextBlock>
      <TextBlock
          Grid.Column="1"
          Background="Yellow"
          TextAlignment="Right"
          TextWrapping="Wrap">I'm on the right</TextBlock>
   </Grid>

   <Grid Grid.Row="1" Background="Gray" />

   <DockPanel Grid.Row="2">
      <TextBlock
          DockPanel.Dock="Left"
          Background="Tomato" 
          TextWrapping="Wrap">I'm on the left</TextBlock>
      <TextBlock
          DockPanel.Dock="Right"
          Background="Yellow"
          TextAlignment="Right"
          TextWrapping="Wrap">I'm on the right</TextBlock>
   </DockPanel>
</Grid>
</Page>

Hassett

Is there anyway to do it without explicitly defining the width? I'd like the form to be able to stretch to fill any area. That's part of the problem I've been having - there's no way that I've found to say "Width=100%" – Clavus

Since your StackPanel has an Horizontal orientation, the TextBlocks with just keep stacking, well, horizontally. Without a width, the TextBlock will size to its contents. A couple of thoughts: Remove the TextBlock Width and set the StackPanel to an Orientation="Vertical" and each TextBlock will now take up 100% of the available width of the StackPanel. Or, you may try experimenting with a Grid layout. Without knowing exactly what you want for your layout, it's a bit of guessing game. – Hassett

I agree that he probably wants something other than a StackPanel (for the reason you give), but for the simple layout he talks about, I would suggest a DockPanel rather than a Grid. – Al

Even with DockPanel this didn't exactly work as I am hoping for. In HTML, the effect would be achieved by making a table at 100%, adding two columns, and seeing the 2nd to align=right. Such a simple thing, doesn't seem easily doable with WPF... – Clavus

@Clavus #83573 – Osteotomy