WPF 删除列表框底部的额外空间

Question

如果我添加一个包含多行文本的项目，我的自定义列表框下会出现大量空间。我该怎么做才能解决这个问题？

我的代码

<!-- List Item Hover -->
<LinearGradientBrush x:Key="MouseOverFocusStyle" StartPoint="0,0" EndPoint="0,1">
    <LinearGradientBrush.GradientStops>
        <GradientStop Color="#FF013B73" Offset="0.501"/>
        <GradientStop Color="#FF091F34"/>
        <GradientStop Color="#FF014A8F" Offset="0.5"/>
        <GradientStop Color="#FF003363" Offset="1"/>
    </LinearGradientBrush.GradientStops>
</LinearGradientBrush>

<!-- List Item Selected -->
<LinearGradientBrush x:Key="LostFocusStyle" EndPoint="0.5,1" StartPoint="0.5,0">
    <LinearGradientBrush.RelativeTransform>
        <TransformGroup>
            <ScaleTransform CenterX="0.5" CenterY="0.5"/>
            <SkewTransform CenterX="0.5" CenterY="0.5"/>
            <RotateTransform CenterX="0.5" CenterY="0.5"/>
            <TranslateTransform/>
        </TransformGroup>
    </LinearGradientBrush.RelativeTransform>
    <GradientStop Color="#FF091F34" Offset="1"/>
    <GradientStop Color="#FF002F5C" Offset="0.4"/>
</LinearGradientBrush>

<!-- List Item Highlight -->
<SolidColorBrush x:Key="ListItemHighlight" Color="#FFE38E27" />

<!-- List Item UnHighlight -->
<SolidColorBrush x:Key="ListItemUnHighlight" Color="#FF6FB8FD" />

<Style TargetType="ListBoxItem">
    <EventSetter Event="GotFocus" Handler="ListItem_GotFocus"></EventSetter>
    <EventSetter Event="LostFocus" Handler="ListItem_LostFocus"></EventSetter>
</Style>

<DataTemplate x:Key="CustomListData" DataType="{x:Type ListBoxItem}">
    <Border BorderBrush="Black" BorderThickness="1"  Margin="-2,0,0,-1">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}, Path=ActualWidth}" />
            </Grid.ColumnDefinitions>
            <Label 
                    VerticalContentAlignment="Center" BorderThickness="0" BorderBrush="Transparent"
                    Foreground="{StaticResource ListItemUnHighlight}"
                    FontSize="24"
                    Tag="{Binding .}"
                    Grid.Column="0"
                    MinHeight="55"
                    Cursor="Hand"
                    FontFamily="Arial"
                    FocusVisualStyle="{x:Null}"
                    KeyboardNavigation.TabNavigation="None"
                    Background="{StaticResource LostFocusStyle}"
                    MouseMove="ListItem_MouseOver"
                    >
                <Label.ContextMenu>
                    <ContextMenu Name="editMenu">
                        <MenuItem Header="Edit"/>
                    </ContextMenu>
                </Label.ContextMenu>
                <TextBlock Text="{Binding .}" Margin="15,0,40,0" TextWrapping="Wrap"></TextBlock>
            </Label>
            <Image 
                Tag="{Binding .}"
                Source="{Binding}"
                Margin="260,0,0,0"
                Grid.Column="1"
                Stretch="None"
                Width="16"
                Height="22" 
                HorizontalAlignment="Center"
                VerticalAlignment="Center" 
                />
        </Grid>
    </Border>
</DataTemplate>

</Window.Resources>

<Window.DataContext>
<ObjectDataProvider ObjectType="{x:Type local:ImageLoader}"  MethodName="LoadImages"  />
</Window.DataContext>


<ListBox ItemsSource="{Binding}" Width="320" Background="#FF021422" BorderBrush="#FF1C4B79" >

<ListBox.Resources>
    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}">Transparent</SolidColorBrush>

    <Style TargetType="{x:Type ListBox}">
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
        <Setter Property="ItemTemplate" Value="{StaticResource CustomListData }" />
    </Style>

</ListBox.Resources>

代码隐藏

public static class ImageLoader
{
    public static List<String> LoadImages()
    {
        List<String> images = new List<String>();
        for (int x = 0; x < 10; x++)
        {
            if (x == 5)
            {
                images.Add("Test Test Test Test Test Test Test Test Test TestTest Test Test  Test Test Test Test Test Test Test Test Test Test Test Test Test" + x);
            }
            else
            {
                images.Add("Test " + x);
            }
        }
        return images;
    }
}

Answer 1

目前您正在逐项滚动。

问题是因为列表框中的 Test 5 是下一个要显示的项目（它比您包含的图片中显示的空白区域大）。只有当该空间大到足以让测试 5 完全显示时，它才会真正显示出来。

但是，如果您想要平滑滚动而不是逐项滚动，只需将 ScrollViewer.CanContentScroll 属性设置为 false。

<ListBox ScrollViewer.CanContentScroll="False" ItemsSource="{Binding}" Width="320" Background="#FF021422" BorderBrush="#FF1C4B79" >

希望有帮助！

Answer 2

如果有人在 .Net 4.5 中解决此问题，作为快速回答

VirtualizingStackPanel.IsVirtualizing="True"
VirtualizingStackPanel.ScrollUnit="Pixel" 

会成功的。为了更好的解释看： http://www.jonathanantoine.com/2011/10/07/wpf-4-5-%E2%80%93-part-11-new-features-for-the-virtualizingpanel/