Search code examples
wpflistboxlistboxitem

Button alignment problem in listbox in WPF


I have a listbox containing itemtemplate like this

<ListBox Name="lstCompany" Grid.Column="0" MinWidth="200" Grid.Row="1" HorizontalAlignment="Stretch" Margin="2,2,2,2" VerticalAlignment="Stretch" HorizontalContentAlignment="Stretch" ItemsSource="{Binding}" SelectionChanged="lstCompany_SelectionChanged">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <DockPanel>
                <Grid Name="grid1" VerticalAlignment="Top" Margin="2" HorizontalAlignment="Stretch">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>

                    <StackPanel Orientation="Vertical" HorizontalAlignment="Stretch">
                        <TextBlock Text="{Binding [0]}" FontWeight="Bold" />
                        <TextBlock Text="{Binding [1]}"></TextBlock>
                        <StackPanel.ToolTip>
                            <ToolTip>asdf</ToolTip>
                        </StackPanel.ToolTip>
                    </StackPanel>

                </Grid>
                <StackPanel VerticalAlignment="Top" HorizontalAlignment="Right" DockPanel.Dock="Right">
                    <Button Content="X" Tag="{Binding [2]}" Width="20" Click="btnRemove_Click" Name="btnRemove1" HorizontalAlignment="Right"></Button>
                </StackPanel>
            </DockPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

This listbox is in first column of a grid which has a splitter. Now problem is that I am not able to align the button to right side of listbox item.


Solution

  • One Grid is enough here. You only need one star-sized column (for content) and one Auto-sized column (for the button):

    <ListBox Name="lstCompany" Grid.Column="0" MinWidth="200"    Grid.Row="1"  HorizontalAlignment="Stretch" Margin="2,2,2,2"  VerticalAlignment="Stretch" HorizontalContentAlignment="Stretch"  ItemsSource="{Binding}" SelectionChanged="lstCompany_SelectionChanged">
        <ListBox.ItemTemplate>
            <DataTemplate >
                <Grid   Name="grid1" VerticalAlignment="Top" Margin="2" HorizontalAlignment="Stretch">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
    
                    <StackPanel Orientation="Vertical"  HorizontalAlignment="Stretch">
                        <TextBlock  Text="{Binding [0]}" FontWeight="Bold"/>
                        <TextBlock  Text="{Binding [1]}" ></TextBlock>
                        <StackPanel.ToolTip>
                            <ToolTip>asdf</ToolTip>
                        </StackPanel.ToolTip>
                    </StackPanel>
    
                    <StackPanel Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Right">
                        <Button Content="X" Tag="{Binding [2]}"  Width="20" Click="btnRemove_Click"  Name="btnRemove1"></Button>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>