Как получить ListBox ItemTemplate, чтобы растянуть горизонтально на всю ширину ListBox?

356

Я хочу, чтобы ListItems расширяли своим оранжевым фоном всю ширину списка.

В настоящее время они имеют такую ​​же ширину, как FirstName + LastName.

Я установил каждый элемент, который могу: HorizontalAlignment = "Stretch".

Я хочу, чтобы фон ListboxItems расширялся, когда пользователь растягивал Listbox, поэтому я не хочу вводить абсолютные значения.

Что мне нужно сделать, чтобы цвет фона ListBoxItems заполнил ширину ListBox?

<Window x:Class="TestListBoxSelectedItemStyle.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:TestListBoxSelectedItemStyle"
    Title="Window1" Height="300" Width="300">

    <Window.Resources>
        <local:CustomerViewModel x:Key="TheDataProvider"/>

        <DataTemplate x:Key="CustomerItemTemplate">
            <Border CornerRadius="5" Background="Orange" HorizontalAlignment="Stretch" Padding="5" Margin="3">
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" Width="Auto">
                    <TextBlock HorizontalAlignment="Stretch">
                    <TextBlock.Text>
                        <MultiBinding StringFormat="{}{0} {1}">
                            <Binding Path="FirstName"/>
                            <Binding Path="LastName"/>
                        </MultiBinding>
                    </TextBlock.Text>
                    </TextBlock>
                </StackPanel>
            </Border>
        </DataTemplate>

    </Window.Resources>

    <Grid>
        <ListBox ItemsSource="{Binding Path=GetAllCustomers, Source={StaticResource TheDataProvider}}"
                 ItemTemplate="{StaticResource CustomerItemTemplate}"/>
    </Grid>
</Window>
Эдвард Тангей
источник

Ответы:

468

Я уверен, что это дубликат, но я не могу найти вопрос с тем же ответом.

Добавьте HorizontalContentAlignment="Stretch"в свой список. Это должно делать свое дело. Просто будьте осторожны с автозаполнением, потому что так легко получить HorizontalAlignmentпо ошибке.

Мэтт Гамильтон
источник
1
@ Agile Jedi, знаете ли вы решение, когда у вас есть элементы ListBox? Сам столкнулся с этим вопросом.
eoldre
11
На самом деле это решение по какой-то причине не работает в Silverlight. Решение Габриэля, с другой стороны, делает
TimothyP
6
Это не работает на элементах управления WinRT ListView. Я уже попробовал это.
УсернаМахахахахахах
3
Это хорошо работает в пользовательских списках (Windows, а не Silverlight), просто будьте осторожны с автозаполнением при написании xaml. Если вы напишите «Horiz ..», вы получите «HorizontalAlignment», а не «HorizontalContentAlignment». Довольно просто выбрать первое предложение, так как оба используют «Stretch».
Ярл Бьёрнбет
1
Пользовательские элементы работают для меня, если я установил ширину пользовательского элемента на auto.
Lensflare
646

Я нашел другое решение здесь , так как наткнулся на оба поста ...

Это из ответа Майлза:

<ListBox.ItemContainerStyle> 
    <Style TargetType="ListBoxItem"> 
        <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter> 
    </Style> 
</ListBox.ItemContainerStyle> 

Это сработало для меня.

Габриэль Монгеон
источник
@CameronMacFarland Причина использования Silverlight, по крайней мере, в моем случае, заключается в том, что сотрудники ИТ-администратора не могли понять, как развертывать приложения WPF / Winform с использованием Active Directory, и нам нужен сценарий чистого развертывания, не зависящий от нас. Sneakernetting обновления.
Ричард Б
@RichardB lol Мой комментарий был больше направлен на silverlight, потому что почему silverlight должен быть другим и иметь сломанный шаблон по сравнению с WPF.
Кэмерон МакФарланд
@CameronMacFarland ах ... не беспокойся. После создания приложения Silverlight и борьбы с файлом ServiceReferences.ClientConfig, я настроен на то, что я избегу (как чума) когда-либо снова разрабатывать другое приложение Silverlight. Это была классная идея, но просто не впечатляющая.
Ричард Б.
1
Чтобы заставить это работать для шаблона данных в пределах listView: <ListView.ItemContainerStyle> <Style TargetType = "ListViewItem"> <Setter Property = "HorizontalContentAlignment" Value = "Stretch"> </ Setter> </ Style> </ ListView .ItemContainerStyle>
Кристофер Кук
Ошибка: ошибка пути BindingExpression: свойство «Ширина» не найдено в Project.CustomElement, Project.WindowsPhone, Версия = 1.0.0.0, Culture = нейтральный, PublicKeyToken = null '. BindingExpression: Path = 'Width' DataItem = Project.CustomElement, Project.WindowsPhone, Version = 1.0.0.0, Culture = нейтральный, PublicKeyToken = null '; целевым элементом является «Windows.UI.Xaml.Controls.Grid» (Name = 'null'); Целевое свойство - «Ширина» (тип «Двойной»)
Black Cid
72

Если ваши элементы шире, чем ListBoxдругие, другие ответы здесь не помогут: элементы в ItemTemplateсписке остаются шире, чем ListBox.

Исправление, которое работало для меня, состояло в том, чтобы отключить горизонтальную полосу прокрутки, которая, по-видимому, также сообщает контейнеру всех этих элементов, чтобы они оставались такими же широкими, как и список.

Следовательно, комбинированное исправление для получения элементов ListBox, которые равны ширине списка, независимо от того, являются ли они меньше и нуждаются в растяжении или шире и нуждаются в переносе, заключаются в следующем:

<ListBox HorizontalContentAlignment="Stretch" 
         ScrollViewer.HorizontalScrollBarVisibility="Disabled">

( кредиты за идею полосы прокрутки )

Роман Старков
источник
0

Поскольку граница используется только для визуального отображения, вы можете поместить ее в ControlTemplate объекта ListBoxItem и изменить там свойства. В ItemTemplate вы можете разместить только StackPanel и TextBlock. Таким образом, код также остается чистым, так как внешний вид элемента управления будет контролироваться через ControlTemplate, а отображаемые данные будут контролироваться через DataTemplate.

Sangeetha
источник
0

Исправление для меня было установить свойство HorizontalAlignment="Stretch"на ItemsPresenterвнутреннем ScrollVieweг ..

Надеюсь, это поможет кому-то ...

<Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBox">
                    <ScrollViewer x:Name="ScrollViewer" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" Padding="{TemplateBinding Padding}" HorizontalAlignment="Stretch">
                        <ItemsPresenter  Height="252" HorizontalAlignment="Stretch"/>
                    </ScrollViewer>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
Ивица Маринчич
источник
0

У меня также была та же проблема, поскольку в качестве быстрого обходного пути я использовал blend, чтобы определить, сколько отступов было добавлено. В моем случае это было 12, поэтому я использовал отрицательный запас, чтобы избавиться от него. Теперь все теперь может быть правильно отцентрировано

Майкл Ато Хатчфул
источник