Question

我正在开发一个应用程序，其中整个用户界面的大小按百分比排列。因此我的ListBoxItems的高度也需要由它控制。但是我有一些问题让它发挥作用。

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>

我有一个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的工作原理。

VirtualizingStackPanel中ListBoxItem的高度

1 个答案: