wpfdockpanelmaterial-design-in-xaml

Material design wpf icon button doesn't dock to right


So, I'm trying to create a list with 'delete' button on the right side
I have this code:

<ListBox.ItemTemplate>
    <DataTemplate>
        <DockPanel LastChildFill="False">
            <TextBlock DockPanel.Dock="Left" Text="{Binding Name}" FontSize="14"/>
            <Button DockPanel.Dock="Right" Style="{StaticResource MaterialDesignIconForegroundButton}">
                <md:PackIcon Kind="Close" Height="16" Width="16"/>
            </Button>
        </DockPanel>
     </DataTemplate>
</ListBox.ItemTemplate>

Result

So, how can I dock the button to the right?


Solution

  • This is because your data template lies inside the ListBoxItem, whose template has its alignment property set to be bound to the ListBox's ContentAlignment.

    So you need to set HorizontalContentAlignment="Stretch" on the list box itself. Or, as more general solution, override the whole template of the ListBoxItem.