CODEWITHSUNDEEP
c#xamlwindows-phone-8
Ciprian Jijie
Ciprian Jijie

Reputation: 477

How to set items on left and right with grid column in windows phone 8.0

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: enter image description here

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

enter image description here

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

Upvotes: 1

Views: 171

Answers (2)

CodeNoob
CodeNoob

Reputation: 757

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.

Upvotes: 1

ChrisF
ChrisF

Reputation: 137108

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.

Upvotes: 1

Related Questions