CODEWITHSUNDEEP
wpfvb.netxamllistbox
Daniel Moss
Daniel Moss

Reputation: 75

ListBox item align button on right side

I have a listbox with a custom item style. This includes a text box and a settings button. I want the button to always be aligned on the far right of the item. I can't seem to get it to function this way. 

<ListBox.ItemTemplate>
    <DataTemplate>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" MinWidth="200"/>
                <ColumnDefinition  Width="25" MinWidth="25" />
            </Grid.ColumnDefinitions>
            <TextBox Grid.Column="0" IsReadOnly="true" Text="{Binding name}"/>
            <Button Grid.Column="2" Height="25" Click="bntConfig_Clicked" ToolTip="Edit config entry for this device" 
                    HorizontalAlignment="Right" 
                    VerticalAlignment="Stretch" 
                    HorizontalContentAlignment="Right">
                <Viewbox>
                    <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="appbar_settings" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
                        <Path Width="38.9239" Height="38.9239" Canvas.Left="18.538" Canvas.Top="18.5381" Stretch="Fill" Fill="#FF383838" Data="F1 M 38,23.5C 38.8643,23.5 39.7109,23.5756 40.5337,23.7206L 42.6275,18.5381L 48.1901,20.787L 46.0964,25.9692C 47.6473,27.0149 48.9851,28.3527 50.0308,29.9036L 55.213,27.8099L 57.4619,33.3725L 52.2794,35.4664C 52.4244,36.2891 52.5,37.1357 52.5,38C 52.5,38.8643 52.4244,39.7109 52.2794,40.5337L 57.4619,42.6275L 55.213,48.1901L 50.0308,46.0964C 49.0795,47.5073 47.8865,48.7418 46.5112,49.7405L 48.7844,54.8462L 43.3041,57.2891L 41.0307,52.1828C 40.0533,52.3906 39.0394,52.5 38,52.5C 37.1357,52.5 36.2891,52.4244 35.4664,52.2794L 33.3725,57.462L 27.8099,55.213L 29.9036,50.0309C 28.3527,48.9851 27.0149,47.6473 25.9691,46.0964L 20.787,48.1901L 18.538,42.6275L 23.7206,40.5336C 23.5756,39.7109 23.5,38.8643 23.5,38C 23.5,37.1357 23.5756,36.2891 23.7206,35.4664L 18.538,33.3725L 20.787,27.8099L 25.9691,29.9036C 26.9205,28.4927 28.1135,27.2582 29.4889,26.2594L 27.2157,21.1537L 32.6959,18.7109L 34.9694,23.8172C 35.9468,23.6094 36.9606,23.5 38,23.5 Z M 38,28C 32.4771,28 28,32.4772 28,38C 28,43.5229 32.4771,48 38,48C 43.5228,48 48,43.5229 48,38C 48,32.4772 43.5228,28 38,28 Z "/>
                    </Canvas>
                </Viewbox>
            </Button>
        </Grid>
    </DataTemplate>
</ListBox.ItemTemplate>

It looks like: https://i.sstatic.net/2xWy3.jpg

The smaller image is unresized, the larger one is resized. In both I want a vertical bar of buttons on the right side of the listbox.

Thanks for any help.

Upvotes: 2

Views: 2250

Answers (3)

Joe
Joe

Reputation: 7004

As cicciorocca says, you need to change your grid with to "*". "Auto" makes it the minimum size for the content, * makes it maximum size (shared between all the "N*" widths in proportions of N).

So, you need to make your first column stretch the full width, and your last column be a fixed size:

<Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" MinWidth="200"/>
      <ColumnDefinition  Width="25" MinWidth="25" />
</Grid.ColumnDefinitions>

However, as Paparazzi says, the ListBox.ItemTemplate is not shared, and it defaults to left alignment. The actual grid you are sizing therefore takes the minimum amount of space it can, so the "*" width get's pretty much ignored.

The solution is to set HorizontalContentAlignment="Stretch" on your listbox. This will stretch each ItemTemplate to the maximum width, and each of those will then respect the "*" width and push the right column to the end.

(Edit, I see cicciorocca did something similar now, his solution should work too I think)

Also, as mentioned, set Grid.Column="2" to Grid.Column="1"

Upvotes: 0

paparazzo
paparazzo

Reputation: 45096

The problem is the ListBox.ItemTemplate is not shared. It is applied row by row.

Use a ListView / GridView and put the button in another column.

Upvotes: 0

Babbillumpa
Babbillumpa

Reputation: 1864

Have you tried dimensioning the columns of the grid in a different way?

<Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" MinWidth="200"/>
      <ColumnDefinition  Width="25" MinWidth="25" />
</Grid.ColumnDefinitions>

And also stretching the content:

<ListBox.ItemContainerStyle>
      <Style TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
       </Style>
</ListBox.ItemContainerStyle>

Note also that the Grid.Column for the button should be 1, not 2.

Upvotes: 2

Related Questions