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一半设置为拉伸，但它们都只是浮动在按钮的中心，所以我无法将文本对齐到任何一半。

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

Button split in half

更新

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

Update image

Answer 1

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

相反，请使用包含两列的<Grid>。

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>

您可能还有兴趣查看this link，它可让您快速直观地了解WPF的各种布局以及它们的行为方式。

分裂按钮一半

3 个答案: