VirtualizingStackPanel 中 ListBoxItem 的高度

Question

我正在开发一个应用程序，其中整个 UI 按百分比调整大小。因此，我的 ListBoxItems 的高度也需要由它来控制。但我在让它工作时遇到了一些问题。

列表框样式：

<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>

我有一个 PercentageConverter，我可以在其他地方使用它，它就像一个魅力。但在这种情况下，它看起来从未被调用或没有效果。项目的高度大于 ListBox 本身。

Answer 1

使用 UniformGrid 作为 ListBox 的 ItemsPanel 将均匀地间隔所有项目：

<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>

现在 8 个项目将分别具有 12.5% 的高度 (1/8) 和 100% 的宽度 (1/1)。 This page 解释了 UniformGrid 的工作原理。