Andrey
Andrey

Reputation: 60095

Put buttons inside ListBox that will stretch to it's width

I want to create list of buttons, and i want buttons to spread across the list item space. Here is what i have:

    <ListBox Margin="44,54,134,0" Name="listView1" Height="64" >
        <Button Height="20"></Button>
        <Button Height="20"></Button>            
    </ListBox>

Result is:

alt text http://img251.imageshack.us/img251/4050/samplec.png

First pic

I want something like second picture, but right side of button to stick to right side of list. I tried to bind in ItemTemplate to ListBox width, but this doesn't work for all cases (if width is Auto)

Thanks, Andrey

Upvotes: 1

Views: 2014

Answers (2)

Andrey
Andrey

Reputation: 60095

here is how i managed to solve this. this is more flexible, but it is really overhead for such a simple task

    <ListBox ItemsSource="{Binding}">
        <ListBox.ItemContainerStyle>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListBoxItem}">
                            <Grid>
                                <Button Height="20">
                                    <ContentPresenter></ContentPresenter>
                                </Button>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListBox.ItemContainerStyle>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding}"></TextBlock>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

Upvotes: 0

Dan Bryant
Dan Bryant

Reputation: 27515

<ListBox Margin="44,54,134,0" Name="listView1" Height="64" HorizontalContentAlignment="Stretch">
    <Button Height="20"></Button>
    <Button Height="20"></Button>
</ListBox>

Edit from Andrey

If you want this solution to be perfect add these lines:

        <ListBox.ItemContainerStyle>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="Padding" Value="0"></Setter>
            </Style>
        </ListBox.ItemContainerStyle>

they will remove nasty gap at the left, that make list assymetrical

Upvotes: 3

Related Questions