分割一半的按钮

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

这是我得到的代码。

<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

来源

2011-10-31 Luke

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

取而代之，请使用带有两列的<Grid>。

来源

2011-10-31 18:20:18 SLaks

感谢您的回复，我已经发布了我已经得到的代码视图。由于某种原因，当我使用网格时，它不显示任何数据。 – Luke

这是因为你正在使用''。将'.50'更改为'*'，或者完全删除Width属性。另外，如果你只有一行，你不需要定义'Grid.RowDefintions'。 –

您指定了像素宽度（0.5像素）。要么没有指定任何宽度或指定比例宽度（'宽度=“1 *”'） – SLaks

StackPanel不是这个的正确容器。尝试使用网格是这样的：

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

来源

2011-10-31 18:24:18

感谢您的帮助。如果您可以检查修订版以在Stack Panels中对齐我的文本。谢谢:) – Luke

我不清楚你想要完成什么。你能用实际的对齐文本更新你正在寻找的图形表示吗？ –

我喜欢用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的各种不同布局以及它们的工作方式。

来源

2011-10-31 18:54:01 Rachel

分割一半的按钮

回答

相关问题