分割一半的按鈕

我試圖將按鈕分成兩半，這樣我就可以在每一半中顯示文本數據 - 在應用程序展開時也可以增加大小。分割一半的按鈕

這是我得到的代碼。

<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

分割一半的按鈕

回答

相關問題