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本身。
使用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
的工作原理。