CODEWITHSUNDEEP
wpfxamlalignment
user3345626
user3345626

Reputation: 243

align a button to the right in a listItem wpf

I am trying to create a listview item with a delete button on the far right side of the box. The button is always just to the right of the text, but I would prefer it be "stuck" to the right side of the control. I have tried the following:

DockPanel:

DockPanel.Dock="Right"

HorizontalAlignment="Right"

HorizontalContentAlignment="Right"

HorizontalConteltAlignment="Stretch"

(Not the last two at the same time)

and adding an extra area to the dock panel without specifying where to dock it

Grid:

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

and

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

and

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

etc. The only thing that changes the button's position in either case is changing the button's left Margin. But the container is resizable so I'd really like the button to stay on the right side of the control. Does anyone know why neither horizontal alignment, horizontal content alignment, extra columns, nor different width sizes seem to affect the position of the button? What can I do?

P.S.: While I know that several other posts have been made by people with the same problem, none of the answers they have accepted have helped my situation at all so far.

Upvotes: 3

Views: 2592

Answers (1)

Ignatius
Ignatius

Reputation: 1177

Set the ListView's HorizontalContentAlignment property to Stretch. This stretches the child element to fill the allocated space of the ListView:

<ListView HorizontalContentAlignment="Stretch" ... >

Then use your 1st Grid method, but swap the ColumnDefinition. The column width for the button is set to Auto so that it will size the column to its content (the button). And the one for the text is set to * so that it will take as much space as possible. Therefore, after allocating a fixed space for the button in 2nd column, the 1st column will get all the remaining space.

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/> <!-- for the text -->
    <ColumnDefinition Width="Auto"/> <!-- for the delete button -->
</Grid.ColumnDefinitions>

Upvotes: 3

Related Questions