How to right-align content in a DataTemplate?

Question

I have a List with a DataTemplate that shows the text and a "x" button next to it. I want the "X" btn to be shown at the extreme right, so they all appear in same place. The XML I use is :

<ListBox Name="seiveListBox" ItemsSource="{Binding}" MinWidth="80" Height="120" ScrollViewer.VerticalScrollBarVisibility="Visible" >
                                <ListBox.ItemTemplate>
                                    <DataTemplate>
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Text="{Binding}" />
                                            <Button Name="delSeiveFromListBtn" Content="X" ToolTip="Delete" Margin="8, 0, 0, 0" Click="delSeiveFromListBtn_Click"></Button>
                                        </StackPanel>
                                    </DataTemplate>
                                </ListBox.ItemTemplate>
                            </ListBox>

I tried adding Grid inpalce of StackPanel, but wasn't successful.

How do I design it or align the "x" in the List to be at extreme right on each item.

Compass

The Grid was right idea. Grid with 2 columns. First should have Width="*" and second - Width="Auto". Also set HorizontalContentAlignment="Stretch" for ListBox – Totalizer

Answer 1

Here's my take on it, use a Grid the following way:

<ListBox ItemsSource="{Binding Items}"
          Width="200" HorizontalContentAlignment="Stretch">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0" Text="{Binding Data}"></TextBlock>
                <Button Grid.Column="1" Content="x"></Button>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Penult

On changing the TEmpalte from sTackPanel to Grid, I see the contets properly, but can't see the scrollveiwer any more. If I replace back to StackPanel then I can see the scrollbar. How to handle this ? – Compass

I'm confused, which ScrollViewer, and where is it placed? – Penult

I had to increase the size of the list and that did the work. Now can see the scrollviewer also. Thanks alot, Magnus Johhansson. – Compass

Answer 2

If your item are supposed to be buttons then you have to specifiy HorizontalContentAlignment="Stretch". Here is the template I use for buttons with a cross on the right side:

    <DataTemplate x:Key="DeletableButtonCommandTemplate">
    <Button Command="{Binding}" Margin="0,1" HorizontalContentAlignment="Stretch">
        <Grid HorizontalAlignment="Stretch">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="18"/>
            </Grid.ColumnDefinitions>
            <TextBlock Text="{Binding Caption}" HorizontalAlignment="Center" Grid.Column="0"></TextBlock>
            <shared:CrossButton Width="12" Height="12" Grid.Column="1"
                                cal:Message.Attach="[Event Click]=[DeleteCommandSource($Datacontext)]"
                                Visibility="{Binding Path=AssociatedObject.Owner, Converter={sharedConv:NotNullToVisibleConverter} }"  />
        </Grid>
    </Button>
</DataTemplate>

Roof