VirtualizingStackPanel中ListBoxItem的高度

本文关键字:高度 ListBoxItem VirtualizingStackPanel | 更新日期: 2023-09-27 18:23:47

我正在开发一个应用程序,其中整个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本身。

VirtualizingStackPanel中ListBoxItem的高度

使用UniformGrid作为ListBox的项目面板将均匀地分隔所有项目:

<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)。本页介绍UniformGrid的工作原理。