简体   繁体   中英

How to adjust the size of ListBoxItems to fit the container?

I am trying to set the height of my ListBoxItems so they take the entire height of the Grid (for example if I have 5 items, the height of a single item would be total/5). To get the height of the Grid I am using the Loaded event (my first guess was SizeChanged, but this one will not fire). I am able to get the correct value in MVVM and calculate the proper height of one item. However, I cannot make the binding to ListBoxItem work. When I run my application items are not visible, but when I try to modify my binding when my program is running by adding FallbackValue, the height is set to the proper, calculated before, value.

Do you have an idea of how to make this approach work? If not what are the alternatives?

View.xaml

                <Grid x:Name="ListGrid" >
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="Loaded">
                            <i:InvokeCommandAction Command="{Binding IconListSizeChanged}" 
                             CommandParameter="{Binding ElementName=ListGrid, Path=ActualHeight}"/>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                    <ListBox VerticalAlignment="Center">
                        <ListBox.ItemContainerStyle>
                            <Style TargetType="{x:Type ListBoxItem}">
                                <Setter Property="Height" Value="{Binding DataContext.IconItemHeight}"/>
                            </Style>
                        </ListBox.ItemContainerStyle>
                        //items here
                    </ListBox>
                </Grid>

ViewModel.cs

 public ICommand IconListSizeChanged { get; private set; }
 private double iconListHeight;
 public double IconItemHeight => iconListHeight / 1234;

 public ViewModel()
 {
    IconListSizeChanged = new DelegateCommand(param => HandleListHeightChange(param));
    iconListHeight = 30.0 // initial
 }

 private void HandleListHeightChange(object param)
 {
    iconListHeight = (double)param;
 }

If you want each item to be the height of the grid, that's the same as the listbox in your markup. You can just bind to actualheight.

<Grid>
    <ListBox Name="lb">
        <ListBox.ItemContainerStyle>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="Height" Value="{Binding ActualHeight, ElementName=lb}"/>
                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            </Style>
        </ListBox.ItemContainerStyle>
        <Rectangle Fill="Blue"/>
        <Rectangle Fill="Yellow"/>
        <Rectangle Fill="Red"/>
    </ListBox>
</Grid>

I put that in as the content of a window and it responds to change of window size as the grid fills it

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM