如何确保 ListView 显示完整的项目

Question

我一直在遵循指南和other SO posts 关于如何完全显示 ListView 项目，但它无法按预期工作。为了演示，我创建了这个非常简单的示例：

XAML：

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

    <Window.Resources>
        <ResourceDictionary>
            <Style TargetType="ListView">
                <Setter Property="Height" Value="150"/>
                <Setter Property="Width" Value="50"/>
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/>
                <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
                <Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
            </Style>
            <Style TargetType="ListViewItem">
                <Setter Property="Height" Value="30"/>
                <Setter Property="Width" Value="50"/>
                <Setter Property="BorderThickness" Value="0"/>
                <Setter Property="VerticalAlignment" Value="Center"/>
                <Setter Property="HorizontalAlignment" Value="Center"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
            </Style>
            <Style TargetType="TextBox">
                <Setter Property="Height" Value="30"/>
                <Setter Property="Width" Value="50"/>
                <Setter Property="VerticalAlignment" Value="Center"/>
                <Setter Property="HorizontalAlignment" Value="Center"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
            </Style>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <TextBox PreviewMouseDown="textBox_PreviewMouseDown"  Text="5" />

        <Popup x:Name="popup"
               AllowsTransparency="True"
               PlacementTarget="{Binding ElementName=textBox}"
               Placement="Center"
               StaysOpen="False"
               >
            <ListView>
                <ListViewItem Content="5"/>
                <ListViewItem Content="5"/>
                <ListViewItem Content="5"/>
                <ListViewItem Content="5"/>
                <ListViewItem Content="5"/>
                <ListViewItem Content="5"/>
                <ListViewItem Content="5"/>
                <ListViewItem Content="5"/>
                <ListViewItem Content="5"/>
                <ListViewItem Content="5"/>
            </ListView>
        </Popup>
    </Grid>
</Window>

代码隐藏：

using System.Windows;
using System.Windows.Input;

namespace WpfApp
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void textBox_PreviewMouseDown(object sender, MouseButtonEventArgs e)
        {
            popup.IsOpen = true;
        }
    }
}

此应用程序在启动时显示如下文本框：

当我单击 TextBox 时，弹出窗口会打开并显示带有 5 个可见项的 ListView：

现在您可以看到，中间的项目并没有准确地覆盖 TextBox 中的“5”，这正是我想要的。另请注意，列表中最后一个“5”下方的空间没有应有的那么多。

ListView 的高度是 ListViewItem 和 TextBox 高度 (5 * 30 = 150) 的倍数，据我了解，这应该是正确的高度。

谁能告诉我我做错了什么/遗漏了什么 - ListView 的中间“5”正好覆盖了 TextBox 中的“5”？

Answer 1

wpf 文本框有一些填充来为像“g”这样的字母提供空间（抱歉，不知道基线以下这些额外像素的正确术语:-)）

因此，您可以尝试调整文本框的填充，如下所示：TextBox Padding

条目是否需要编辑？如果没有，请使用 TextBlock 而不是 VerticalAlignment="Center"。这应该渲染得更好......

你也可以在你的Style中定义你的ListViewItem的datatemplate，我认为默认是“ContentPresenter”，转成TextBox应该直接在上面渲染。

当显示 ListView 时，我会关闭 TextBox 的可见性。因为“中间”项可能是“6”...如果我是对的，您正在为值构建一些滚动选择器..

编辑：

经过一些测试，ListView/ListBox 控件实现了一些内部填充。除非你完全想重新设计它们，否则你最好的方法就是设置

HorizontalOffset=" -2"
VerticalOffset="-2"

弹出控件的...或根据需要。骇客？绝对:)

我猜你也会为你的生产代码使用一些数据绑定，现在这只是一个设计测试:)