如何在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的垂直对齐方式。 届时内容可能会出现在页面中心。