23

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

3 Answers 3

35

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>
1
  • Super fast and worked. I commend you for taking the time to share this. I hope you find $5 on the ground.
    – Chris
    May 10, 2018 at 15:22
4

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

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>
4
  • 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%"
    – bugfixr
    Oct 17, 2009 at 18:40
  • 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. Oct 17, 2009 at 18:53
  • 1
    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.
    – itowlson
    Oct 17, 2009 at 18:57
  • 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...
    – bugfixr
    Oct 20, 2009 at 22:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.