将列表框项目的点击区域拉伸到列表框的整个宽度?ListBox 样式是通过主题隐式设置的 [英] Stretch ListBox Items hit area to full width of the ListBox? ListBox style is set implicity through a theme

问题描述

我已经四处寻找这个问题的答案，但潜在的重复更关心的是演示而不是交互.

I've looked around for an answer on this, but the potential duplicates are more concerned with presentation than interaction.

我有一个基本的列表框，每一项的内容都是一个简单的字符串.

I have a basic list box, and each item's content is a simple string.

ListBox 本身被拉伸以填充它的网格容器，但每个 ListBoxItem 的命中区域并不反映 ListBox 的宽度.看起来好像每个项目的 hitarea(指针接触区域)只是文本内容的宽度.无论文本大小如何，我如何让这个一直延伸.

The ListBox itself is stretched to fill it's grid container, but each ListBoxItem's hitarea does not mirror the ListBox width. It looks as if the hitarea (pointer contact area) for each item is only the width of the text content. How do I make this stretch all the way across, regardless of the text size.

我已将 Horizo​​ntalContentAlignment 设置为 Stretch，但这并不能解决我的问题.我唯一的另一个猜测是内容实际上正在拉伸，但背景是不可见的，因此没有捕获鼠标指针.

I've set HorizontalContentAlignment to Stretch, but this doesn't solve my problem. My only other guess is that the content is actually stretching, but the background is invisible and so not capturing the mouse pointer.

<ListBox 
    Grid.Row="1"
    x:Name="ProjectsListBox" 
    DisplayMemberPath="Name"
    ItemsSource="{Binding Path=Projects}" 
    SelectedItem="{Binding Path=SelectedProject}"
    HorizontalContentAlignment="Stretch"/>

XAML 在这方面非常直截了当.如果我将鼠标悬停在其中一个项目中的文本上，则项目的整个宽度都会变为活动状态.我想我只需要知道如何创建一个不可见的交互式背景.

The XAML is pretty straight forward on this. If I mouse over the text in one of the items, then the entire width of the item becomes active. I guess I just need to know how to create an interactive background that is invisible.

推荐答案

Horizo​​ntalContentAlignment="Stretch" 应该在 ItemContainerStyle 中设置才能正常工作.

HorizontalContentAlignment="Stretch" should be set in ItemContainerStyle for this to work.

Xaml 示例

<ListBox xmlns:sys="clr-namespace:System;assembly=mscorlib">
    <ListBox.ItemsSource>
        <x:Array Type="{x:Type sys:String}">
            <sys:String>String 1</sys:String>
            <sys:String>String 2</sys:String>
            <sys:String>String 3</sys:String>
            <sys:String>String 4</sys:String>
        </x:Array>
    </ListBox.ItemsSource>
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        </Style>
    </ListBox.ItemContainerStyle>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}" Background="Green"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

更新
试试这个

<ListBox ...>
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        </Style>
    </ListBox.ItemContainerStyle>

这篇关于将列表框项目的点击区域拉伸到列表框的整个宽度?ListBox 样式是通过主题隐式设置的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！