Horizontal ListBox with HorizontalContentAlignment=Stretch

Question

I have a horizontal listbox with 3 bindable items. How can I stretch them to all width of listbox? for example 1st element is at the left, 2nd element is at the middle and 3rd element on the right. Now I align them with margins, but I'm interested, is it possible without margins? I tried to set ListBox property HorizontalContentAlignment to Stretch, but not got what i want.

Thanks.

I tried your advice, but didn't get desirable result unfortunately. My XAML here:

        <ListBox>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemContainerStyle>
                <Style TargetType="ListBoxItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                </Style>
            </ListBox.ItemContainerStyle>
            <ListBoxItem Content="1"/>
            <ListBoxItem Content="2"/>
            <ListBoxItem Content="3"/>
        </ListBox>

Here what I get:

enter image description here

and what I want is below:

enter image description here

score 2 · Answer 1 · answered Feb 27 '13 at 13:09

Try with following approach:

    <ListBox Grid.Row="1">
            <ListBox.ItemContainerStyle>
                <Style TargetType="ListBoxItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
                </Style>
            </ListBox.ItemContainerStyle>
            <ListBoxItem  HorizontalAlignment="Stretch">
            <Grid>
                <TextBlock  Text="1"   HorizontalAlignment="Left"/>
                <TextBlock  Text="2"   HorizontalAlignment="Center"/>
                <TextBlock  Text="3"   HorizontalAlignment="Right"/>
            </Grid>
        </ListBoxItem>
    </ListBox>

score 0 · Answer 2 · edited May 23 '17 at 12:07

0

That's a tricky one :) To do that, you need to change ListBox.ItemContainerStyle, check out the answer on MSDN forum. Also, check out the following links on this site:

edited May 23 '17 at 12:07

Community

1
1

answered Feb 26 '13 at 10:03

Toni Petrina

7,014
1
25
34

score 0 · Answer 3 · edited May 23 '17 at 11:53

I'm not sure if you found a solution yet or not but this worked for me to get the items evenly spaced:

<ListBox>               
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Rows="1"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>

    <ListBoxItem Content="Item1"/>
    <ListBoxItem Content="Item2"/>
    <ListBoxItem Content="Item3"/>
</ListBox>

Found at: https://stackoverflow.com/a/1270813/124721

Then mixing in the ItemContainerStyle I could get the content centered:

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

However I still wasn't able to get one item to aligned to the left, then another to the center, and the last one to the right. Applying the alignment to the item directly was shrinking the panel size. But maybe if it was wrapped in another container like a stack panel that would work.

Its not going to work in WIndowsPhone (which is the target platform as per OP). — Adarsha, Jan 17 '15 at 09:38

Horizontal ListBox with HorizontalContentAlignment=Stretch

3 Answers3