将按钮分成两半

Question

我试图将一个按钮分成两半，以便可以在每一半中显示文本数据 - 当应用程序扩展时，文本数据的大小也可以增加。

这是我到目前为止得到的代码。

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

我尝试将每个 StackPanel 一半设置为拉伸，但它们都只是浮动在按钮的中心，因此我无法对齐任一半上的文本。

这是我尝试创建的按钮的图形表示...

更新：

这是我的内容正在使用上面的代码，遗憾的是我正在努力让文本对齐，或者让任何东西拉伸到每一半的整个宽度：

Answer 1

StackPanel 不会这样做；它只是堆叠元素。

相反，请使用具有两列的 。

Answer 2

StackPanel 不是适合此操作的容器。尝试使用这样的网格：

<Button>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Column="0">
            ...
        </StackPanel>
        <StackPanel Grid.Colunn="1">
            ...
        </StackPanel>
    </Grid>
</Button>

Answer 3

我喜欢使用 UniformGrids，尽管如果您需要单独定义行/列，网格也可以工作

，这是一个具有正确对齐方式的示例：

    <UniformGrid Columns="2">

        <StackPanel Background="LightBlue" >
            <StackPanel Orientation="Horizontal">
                <TextBlock Margin="0,0,5,0" Text="123" FontWeight="Bold" FontSize="14" />
                <TextBlock Margin="0,0,0,0" Text="Main Street" FontWeight="Bold" FontSize="14" />
            </StackPanel>
            <TextBlock Text="12345" />
            <TextBlock Margin="0,6,0,0" Text="Type" />
        </StackPanel>

        <StackPanel Background="Yellow">
            <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Margin="0,2,0,0" HorizontalAlignment="Right">
                <TextBlock Text="£" HorizontalAlignment="Right" Foreground="#FF9D1818" FontWeight="ExtraBold" FontSize="16" />
                <TextBlock Text="100.00" HorizontalAlignment="Right" Foreground="#FF9D1818" FontWeight="ExtraBold" FontSize="16" />
            </StackPanel>
            <TextBlock Margin="0,0,0,0" Text="200.00" HorizontalAlignment="Right" Foreground="#FF107910" FontWeight="ExtraBold" FontSize="14" />
        </StackPanel>

    </UniformGrid>

您可能还有兴趣查看 此链接，它可以让您快速直观地了解 WPF 的每种不同布局及其行为方式。