¿Cómo alinear correctamente el contenido en un DataTemplate?

Question

Tengo una lista con una plantilla de datos que muestra el texto y un botón "x" al lado. Quiero que la "X" btn se muestre en el extremo derecho, para que todos aparezcan en el mismo lugar. El XML que uso es:

<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> 

Intenté agregar Grid inpalce de StackPanel, pero no fue exitoso.

¿Cómo lo diseño o alineo la "x" en la lista para que esté en el extremo derecho de cada elemento.

Answer 1

Aquí está mi opinión sobre ella, utilizar una cuadrícula de la siguiente manera:

<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> 

Answer 2

Si el artículo se supone que son los botones entonces usted tiene que specifiy HorizontalContentAlignment = "estiramiento". Aquí es la plantilla que utilizo para los botones con una cruz en el lado derecho:

<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>