Xaml, middle column not taking up full width

Question

How do I make my middle column take up the full width available while allowing space for the comment section so that all those comment boxes are nicely aligned to the right:

    <DataTemplate x:Key="ActivityStreamItemTemplate">
        <StackPanel VerticalAlignment="Top" Margin="5,0,0,0">
            <Button Command="{Binding Path=DataContext.LoadSpacesCommand, ElementName=OrganisationList}" CommandParameter="{Binding}" Padding="-5,0,-5,-5" Margin="-7,-12,-7,-7" Height="auto" BorderThickness="0" HorizontalAlignment="Left" VerticalAlignment="Stretch" HorizontalContentAlignment="Left" UseLayoutRounding="True" FontSize="0.01">
                <Grid Height="auto">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="67" />
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="60" />
                    </Grid.ColumnDefinitions>
                    <StackPanel Height="auto" Grid.Column="0" Background="Transparent">
                        <Border Background="Transparent" BorderThickness="0" Width="62" Height="62" HorizontalAlignment="Left" Margin="0,0,0,5">
                            <Image Source="{Binding created_by.image.link}" Width="62" Height="62"></Image>
                        </Border>
                    </StackPanel>
                    <StackPanel Height="auto" Grid.Column="1">
                        <TextBlock Text="{Binding type}" HorizontalAlignment="Left" FontSize="30" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" />
                        <TextBlock Text="{Binding ttitle}" HorizontalAlignment="Left" FontSize="15" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" TextWrapping="Wrap"/>
                        <TextBlock Text="{Binding created_by.name}" HorizontalAlignment="Left" FontSize="11" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" />
                    </StackPanel>
                    <StackPanel Height="60" Grid.Column="2" Margin="10,0,0,0">
                        <StackPanel.Background>
                            <ImageBrush Stretch="Fill" ImageSource="/Assets/Icons/CommentsIcon.png"/>
                        </StackPanel.Background>
                        <TextBlock Text="{Binding comments.Count}" HorizontalAlignment="Center" FontSize="20" Foreground="Black" TextAlignment="Center" Padding="0,8,0,0"/>
                    </StackPanel>
                </Grid>
            </Button>
        </StackPanel>
    </DataTemplate>

I tried placing horizontal align on the third stackpanel but that actually didn't work.

EDIT: Thanks for the tries but no cigar:

Answer 1

You need to alter the style of the ListBoxItem itself to ensure that the content is stretched across the available width.

Define this style:

<Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="HorizontalAlignment" Value="Stretch" />
</Style>

Then the Right alignment of the "Comments" image will work and the central text box will stretch to fill the available space.

You might find that just using a StackPanel with an horizontal orientation works better than a Grid for the item template, especially if the data in columns 0 and 2 are a constant width.

Answer 2

Play around with the space given for the columns, for example:

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="67" />
                    <ColumnDefinition Width="3*"/>
                    <ColumnDefinition Width="1*" />
                </Grid.ColumnDefinitions>

This gives the center column 3 times more space than the right column

Answer 3

It's hard to tell exactly what you want because of how you've blurred your image. But I think the key is to make the container of the grid take up all available space, HorizontalAlignment="Stretch" .

<DataTemplate>
    <StackPanel HorizontalAlignment="Stretch">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="67" />
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="60" />
            </Grid.ColumnDefinitions>

            <!-- items here -->
        </Grid>
</StackPanel>

The item you set to have Grid.Column="0" will have width 67dip, the one with Grid.Column="2" will be width 60dip, and the one with Grid.Column="1" will fill up the rest of the space.

dip = device independent pixels - all Windows Phone apps are measured as if the screen is 480x800 and then rendered at the actual resolution of the screen.

Answer 4

Inside a StackPanel you can't do HorizontalAlignment to right while its orientation is LeftToRight, as far as I know. Avoid using it.

Answer 5

The problem stems from using a StackPanel as the top-most UIElement. Use a Grid instead and follow the rest of this advice: Right align content in ListBox

Which leads to this answer as well: C# windows phone -Alignment in xaml ListBox.ItemTemplate

Answer 6

Your problem is the Button, if it's not mandatory try deleting it and add a "Tap" Event to the StackPanel, i've tried it and it works.

<DataTemplate x:Key="ActivityStreamItemTemplate">

    <StackPanel Tap="...">
        // no <Button> here
            <Grid>
                ---
            </Grid>
        // no </Button> here
    </StackPanel>

</DataTemplate>

better option

<DataTemplate x:Key="ActivityStreamItemTemplate">

    <Grid Tap="...">
        ...
    </Grid>

</DataTemplate>