Align Grid column to right

Question

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

Is this Grid a part of `ItemTemplate` of `ListBox` because i can't see other items in Grid. — Rohit Vats, Jan 05 '14 at 13:53
Yes, it's a user control created to customize each item on a ListBox — TheUnexpected, Jan 05 '14 at 13:56
Set `HorizontalContentAlignment` to `Stretch` on `ListBoxItem`. Check my answer. — Rohit Vats, Jan 05 '14 at 14:05

score 31 · Accepted Answer · answered Jan 05 '14 at 13:59

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>

har07 · Answer 2 · 2014-01-05T13:57:49.513

Try with this :

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

score 0 · Answer 3 · answered Jan 05 '14 at 13:58

0

Try HorizontalAlignment="Stretch" in Grid.

answered Jan 05 '14 at 13:58

mrzli

16,799
4
38
45

Using a ListView instead of a ListBox may make life earier for multi column lists. – RudolfJan Mar 09 '18 at 12:49
This is standard stuff. Look up a tutorial on ListViews, e.g. http://www.blackwasp.co.uk/WPFListView.aspx gives you a nice example. I always use ListView or DataGrid for tables. – RudolfJan Feb 15 '19 at 16:58

score 0 · Answer 4 · answered Dec 20 '16 at 05:29

0

I had same problem and it was fixed after removing the stackpanel

answered Dec 20 '16 at 05:29

Swapnil Karmalkar

21
1

Align Grid column to right

4 Answers4