Question

I’m trying to split a button in half so that I can show text data in each half – which can also be increased in size when the application is expanded.

This is the code I’ve got soo far.

<Button Margin="16,0,16,6" Background="#daf0fc" BorderThickness="0" Height="Auto" HorizontalAlignment="Stretch" BorderBrush="White" Click="edit_house" Padding="0" Focusable="False">           

<Grid>

<Grid.RowDefinitions>
    <RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
    <ColumnDefinition />
    <ColumnDefinition />
</Grid.ColumnDefinitions>


                    <StackPanel Grid.Column="0" Orientation="Vertical" VerticalAlignment="Top" HorizontalAlignment="Left" Background="Black">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Margin="0,0,5,0" Text="{Binding house_number}" FontWeight="Bold" FontSize="14" />
                            <TextBlock Margin="0,0,0,0" Text="{Binding street}" FontWeight="Bold" FontSize="14" />
                        </StackPanel>
                        <TextBlock Text="{Binding postcode}" />
                        <TextBlock Margin="0,6,0,0" Text="{Binding house_type_text}" />
                    </StackPanel>

                    <StackPanel Grid.Column="1" Orientation="Vertical" VerticalAlignment="Top">
                        <StackPanel Orientation="Horizontal" VerticalAlignment="Top"  HorizontalAlignment="Left" Margin="0,2,0,0">
                            <TextBlock Text="£" HorizontalAlignment="Right" Foreground="#FF9D1818" FontWeight="ExtraBold" FontSize="16" />
                            <TextBlock Text="{Binding house_price}" HorizontalAlignment="Right" Foreground="#FF9D1818" FontWeight="ExtraBold" FontSize="16" />
                        </StackPanel>
                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Margin="0,0,0,0">
                            <TextBlock Margin="0,0,0,0" Text="{Binding sold_text}" HorizontalAlignment="Right" Foreground="#FF107910" FontWeight="ExtraBold" FontSize="14" />
                        </StackPanel>
                    </StackPanel>

I’ve tried setting each StackPanel half to stretch, but they both just Float in the centre of the button, so I can’t align the text on either half.

Here’s a graphical representation of the button I’m trying to create…

Update:

Here is what I’m getting with the code above, sadly I’m struggling to get the text to align, or to get anything to stretch to the full width of each half:

Answer 1

StackPanel won’t do that; it just stacks elements.

Instead, use a <Grid> with two columns.