Alex Rivera | Logout

How to right-align content in a DataTemplate?

Asked 2012-05-26T11:00:07.427
9

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.

wpf list alignment datatemplate
Edit
Report

1 Answer

8

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>
answered 2012-05-26T12:28:49.650

Your Answer