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

StackOverflow https://stackoverflow.com/questions/838828

  •  22-07-2019
  •  | 
  •  

Вопрос

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

В настоящее время они имеют ширину, равную имени и фамилии.

Я установил каждый элемент, который мог:ГоризонтальноеВыравнивание="Растянуть".

Я хочу, чтобы фон 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>
Это было полезно?

Решение

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

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

Другие советы

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

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

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

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

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

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

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

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

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

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

Для меня исправлением было задать свойство HorizontalAlignment = " Растянуть " в ItemsPresenter внутри ScrollViewe r ..

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

<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>

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top