如何在Windows Phone 8.0中使用網格列在左右兩側設置項目

Question

任何人都可以這樣說：

在彈出窗口中，我有兩個項目，一個文本塊和一個圖像，根據文本大小，我需要將所有時間的文本一直放在左邊，將圖標放在右邊，就像第二張圖片一樣。

 <Grid>
    <Grid.ColumnDefinitions>
       <ColumnDefinition Width="Auto"/>
       <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
         <TextBlock Grid.Column="0" Text="TEXT"/>
         <Image Grid.Column="1" />
 </Grid>

當第一欄設為自動時，第一張圖片就像這樣：

設置靜態寬度時：

 <Grid>
        <Grid.ColumnDefinitions>
           <ColumnDefinition Width="400"/>
           <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
             <TextBlock Grid.Column="0" Text="TEXT"/>
             <Image Grid.Column="1" />
     </Grid>

設定后

我想設置動態的，而不是寬度的靜態值。

Answer 1

您可以在網格中設置元素的HorizontalAlignment ：

<Grid HorizontalAligment="Stretch">
    <Grid.ColumnDefinitions>
       <ColumnDefinition Width="Auto"/>
       <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
         <TextBlock Grid.Column="0" Text="TEXT"/>
         <Image Grid.Column="1" HorizontalAlignment="Right" />
</Grid>

這應該將圖像放在列的右側。 您可能會發現必須告訴網格拉伸以填充其容器。

或者，假設您的圖標大小相同，則可以交換列定義：

<Grid HorizontalAligment="Stretch">
    <Grid.ColumnDefinitions>
       <ColumnDefinition Width="*"/>
       <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
         <TextBlock Grid.Column="0" Text="TEXT"/>
         <Image Grid.Column="1" />
</Grid>

以便第二列從其內容（圖標）開始獲取寬度，第一列進行拉伸以填充可用空間。

遇到這種問題，您通常必須嘗試兩三件事才能獲得所需的確切行為。

Answer 2

嘗試這個

<Grid>
    <Grid.ColumnDefinitions>
       <ColumnDefinition Width="*"/>
       <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
         <TextBlock Grid.Column="0" Text="TEXT" HorizontalAlignment="Left"/>
         <Image Grid.Column="1" HorizontalAlignment="Right"/>
 </Grid>

如果這是頁面上的唯一內容，則可能還需要同時設置TextBlock和Image的垂直對齊方式。 屆時內容可能會出現在頁面中心。