如何在Windows Phone 8.0中使用网格列在左右两侧设置项目

Question

Can anyone say how to do like that:

In a pop-up I have two items one textblock and one image, in function of size of text I need to put all times text on left and icon right, like in the second picture.

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

First Image is like that when first column is set auto:

When set an static width:

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

After set

I want to set dynamic, not with a static value in width.

Answer 1

You can set the HorizontalAlignment of the element in the grid:

<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>

This should put the image on the right hand side of the column. You might find you have to tell the grid to stretch to fill it's container as well.

Alternatively, assuming that your icons are the same sizes, you could swap the column definitions:

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

so that the second column takes it width from its content (the icons) and the first stretches to fill the available space.

With this sort of problem you often have to try two or three things to get the exact behaviour you're looking for.

Answer 2

Try this

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

You might also need to set the vertical alignment for both TextBlock and Image if this is the only content on the page. As then the content might come in the center of the page.