Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Align Grid column to right

Tags:

I have a Windows Phone / XAML Grid composed by 3 columns. In particular, I want the third column to be aligned to the very right side of the screen.

<Grid Background="Transparent" Margin="0,3">         <Grid.ColumnDefinitions>             <ColumnDefinition Width="Auto"/>             <ColumnDefinition Width="*"/>             <ColumnDefinition Width="Auto"/>         </Grid.ColumnDefinitions>      <Image Grid.Column="0" x:Name="Marker" Width="60" Height="60" VerticalAlignment="Center" Stretch="Uniform" HorizontalAlignment="Center"/>     <TextBlock Grid.Column="1" x:Name="Name" TextAlignment="Left" VerticalAlignment="Center" Margin="20,0" />     <Image Grid.Column="2" x:Name="Selected" Width="48" Height="48"  VerticalAlignment="Center" Stretch="Uniform" HorizontalAlignment="Center"/>  </Grid> 

The result, instead, is this:

enter image description here

When it should be like this:

enter image description here

like image 786
TheUnexpected Avatar asked Jan 05 '14 13:01

TheUnexpected


People also ask

How do I align grid items to the right?

Instead set column width:100px inside the grid, because grid is the container also use justify-content:end; to align the content to the right side.

How do I align columns to the right?

Use width:100% on the table and the middle column. You could also set width:100% on the last column's style and td align="right" on the last column. Then you can insert more columns in the middle while the spacing still works.

How do I make my grid centered?

To center the <div> element horizontally using grid. Use the property of display set to grid i.e. display: grid; Then use property place-items: center; Example: The following example demonstrates to set the <div> to the center using grid property.


1 Answers

As you mentioned its an ItemTemplate of ListBox, what you can do is set HorizontalContentAlignment to Stretch.

    <ListBox>         <ListBox.ItemContainerStyle>             <Style TargetType="ListBoxItem">                 <Setter Property="HorizontalContentAlignment" Value="Stretch"/>             </Style>         </ListBox.ItemContainerStyle>     </ListBox> 
like image 158
Rohit Vats Avatar answered Sep 19 '22 15:09

Rohit Vats