Height of ListBoxItem in VirtualizingStackPanel

Question

I'm developing an app where the entire UI is sized by percentage. Therefore the height of my ListBoxItems needs to be controlled by that too. But i'm having some problems getting it to work.

ListBoxStyle:

<Style x:Key="ListBoxStyle" TargetType="{x:Type ListBox}">
        <Setter Property="Stylus.IsPressAndHoldEnabled" Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBox}">
                    <Border BorderBrush="{StaticResource ControlBorderBrush}" 
                            Background="{StaticResource ControlBackgroundBrush}">
                        <ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
                            <VirtualizingStackPanel IsItemsHost="True" VirtualizingStackPanel.VirtualizationMode="Recycling">

                            </VirtualizingStackPanel>
                        </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

ListBoxItemStyle:

<Style TargetType="{x:Type ListBoxItem}">
        <Setter Property="Stylus.IsPressAndHoldEnabled" Value="False" />
        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
        <Setter Property="Foreground" Value="{StaticResource ControlTextNormalBrush}"/>
        <Setter Property="BorderThickness" Value="1,0,1,1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Border Name="Border"
                            Height="Height="{Binding Converter={StaticResource PercentageConverter}, Path=ActualHeight, ConverterParameter=10}""
                            SnapsToDevicePixels="true" 
                            BorderThickness="{TemplateBinding BorderThickness}" 
                            BorderBrush="{StaticResource ControlItemBorderBrush}" 
                            Background="{StaticResource ControlItemNormalBackgroundBrush}">

                        <ContentPresenter/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="Border" Property="Background" Value="{StaticResource ControlItemHoverBackgroundBrush}"/>
                        </Trigger>
                        <Trigger Property="IsSelected" Value="true">
                            <Setter TargetName="Border" Property="Background" Value="{StaticResource ControlItemSelectedBackgroundBrush}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="true">
                <Setter Property="Foreground" Value="{StaticResource ControlTextSelectedBrush}"/>
            </Trigger>

            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Converter= {StaticResource FirstItemConverter}}" Value="True">
                <Setter Property="BorderThickness" Value="1,1,1,1" />
            </DataTrigger>
        </Style.Triggers>
    </Style>

I have a PercentageConverter that i use other places to, it works like a charm. But it looks like in this scenario, that it is never called or does not have an effect. The height of the items is larger than the ListBox itself.

What exactly are you trying to do? Evenly space all ListBoxItems ? — Bas, Jul 18 '13 at 07:34
Well, that would be great. The problem i have now is that it is controlled by pixel size. So if the user has a high resolution, the items are very small and vice versa. So i would like to control it by percentage. So that each item has a hight of like 10% of the ListBox, so it is always sized correctly. — Lasse O, Jul 18 '13 at 07:45

score 0 · Answer 1 · answered Jul 18 '13 at 08:36

Using a UniformGrid as ItemsPanel for the ListBox will evenly space all items:

<ListBox>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <!-- Change to Rows="1" if you want a horizontal layout -->
            <UniformGrid Columns="1" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.Items>
        <ListBoxItem>Item 1</ListBoxItem>
        <ListBoxItem>Item 2</ListBoxItem>
        <ListBoxItem>Item 3</ListBoxItem>
        <ListBoxItem>Item 4</ListBoxItem>
        <ListBoxItem>Item 5</ListBoxItem>
        <ListBoxItem>Item 6</ListBoxItem>
        <ListBoxItem>Item 7</ListBoxItem>
        <ListBoxItem>Item 8</ListBoxItem>
    </ListBox.Items>
</ListBox>

Now 8 items will each have 12.5% height (1/8) and 100% width (1/1). This page explains the workings of a UniformGrid.

But what if the ListBox has 10.000 items? i would still like to have the items to be of like 10% of the visible part of the ListBox, in a VirtualizingStackPanel for performance :) — Lasse O, Jul 18 '13 at 09:08

Height of ListBoxItem in VirtualizingStackPanel

1 Answers1