A WPF RichTextBox + Button in a StackPanel => what a mess ?

Question

This code:

<StackPanel Orientation="Horizontal">
                <RichTextBox />
                <Button Content="Dialog" />  
            </StackPanel>

shows the button somewhere on the left side of the StackPanel ONTO the RichTextBox, WHY?

edit: Oh I just saw its a width problem. The RTB has nearly no width and the button is righthand of it.

edit: seems I run into this bug: http://stackoverflow.com/questions/350863/wpf-richtextbox-with-no-width-set

solution does not work for me!

Answer 1

Your code layout should be something like:

<StackPanel Margin="105,73,124,54" Orientation="Horizontal">
                <RichTextBox Width="312" />
                <Button Content="Dialog" VerticalAlignment="Bottom" Height="56" />  
            </StackPanel>

You have to size each element (control) individually, otherwise you get a layout similar to what you have originally (all jumbled up and crushed together.)

Answer 2

Sorry, I forgot to mention, if you look at the "Layout" panel (For the RichTextBox), at the bottom of it, there is a down arrow. click it to open the "advanced options". In there you want to set your "HorizontalContentAlignment and VertialContentAlignment" both to stretch. (The last 2 options for each).

I am sorry for leaving that out. my bad. :)

Answer 3

You'd be better off using a Grid and the HorizontalAlignment (and VerticalAlignment) properties of the RTB.

<Grid HorizontalAlignment="Stretch"
      VerticalAlignment="Stretch">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <RichTextBox HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
    <Button Grid.Column="1" 
            Content="Dialog" 
            HorizontalAlignment="Right" 
            VerticalAlignment="Bottom" />
</Grid>