代码之家 › 专栏 › 技术社区 › Werner

如何确保ListView显示完整项

scrollviewer listview wpf

Werner · 技术社区 · 6 年前

我一直遵循指导方针,并且 Other so posts about how to fully show listview items but i t just does not work as expected.为了演示,我创建了一个非常简单的示例:

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命名空间:wpfapp”
mc:ignorable=“d”
title=“主窗口”height=“450”width=“800”>

<window.resources>
<资源字典>
<style targetType=“listView”>
<setter property=“height”value=“150”/>
<setter property=“width”value=“50”/>
<setter property=“background”value=“transparent”/>
<setter property=“scrollviewer.verticalscrollbarvisibility”value=“disabled”/>gt;
<setter property=“scrollviewer.horizontalscrollbarvisibility”value=“disabled”/>gt;
<setter property=“scrollViewer.canContentScroll”value=“true”/>
&风格/风格;
<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 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”/>
&风格/风格;
</resourcedictionary>
</window.resources>
格栅& GT;
<textbox previewMouseDown=“textbox_previewMouseDown”text=“5”/>gt;

<popup x:name=“弹出”
allowsTransparency=“真”
placementTarget=“绑定元素名称=文本框”
placement=“中心”
statysopen=“假”
gt;
<列表视图>
<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>
和/弹出& GT;
和/格栅& GT;
&窗/窗;
< /代码> 

代码隐藏:

使用system.windows;
使用system.windows.input;

命名空间wpfapp
{
///<摘要>
///MainWindow.xaml的交互逻辑
///</summary>
公共分部类主窗口:窗口
{
公共主窗口()
{
初始化组件();
}

private void文本框_previewMouseDown(对象发送器,MouseButtonEventargs e)
{
popup.isopen=真;
}
}
}
< /代码> 

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



当我单击文本框时,弹出窗口将打开并显示带有5个可见项的列表视图:



现在,正如您所看到的,中间的项并没有精确地覆盖文本框中的“5”,这正是我想要的。还请注意,列表中最后一个“5”下的空格没有它应该的多。


ListView的高度是ListViewItem和文本框高度(5*30=150)的倍数,据我所知,这应该是正确的高度。

有人能告诉我我做错了/遗漏了什么吗?这样列表视图中间的“5”就正好覆盖了文本框中的“5”?< P / P关于如何完全显示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;
        }
    }
}


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



当我单击文本框时,弹出窗口将打开并显示带有5个可见项的列表视图:



现在,正如您所看到的,中间的项并没有精确地覆盖文本框中的“5”,这正是我想要的。还要注意,列表中最后一个“5”下的空格并没有它应该有的多。

ListView的高度是ListViewItem和文本框高度(5*30=150)的倍数,据我所知,这应该是正确的高度。

有人能告诉我我做错了/遗漏了什么吗?这样列表视图中间的“5”就正好覆盖了文本框中的“5”?

1 回复 | 直到 6 年前

dba 6 年前

wpf文本框有一些填充来为字母提供空间,例如“g”(抱歉,对于基线以下的这些额外像素,不知道正确的术语是-)。

因此,您可以尝试如下调整文本框的填充: TextBox Padding

条目需要编辑吗?如果没有,则使用文本块而不是VerticalAlignment=“Center”。这应该会更美好…

您也可以在样式中定义ListViewItem的数据模板,我认为默认情况下它是“ContentPresenter”,将其转换为文本框应该在正上方呈现。

当显示ListView时,我会关闭文本框的可见性。因为“中间”项可以是“6”…如果我是对的,您正在为值构建一些滚动选择器。

编辑:

经过一些测试,listview/listbox控件实现了一些内部填充。除非你完全想重新设计它们,否则你最好的拍摄方式是

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

弹出控件的…或者根据需要。Hackish?肯定:

我想您也将为生产代码使用一些数据绑定,现在这只是一个设计测试:)