Silverlight 3: ListBox DataTemplate HorizontalAlignment

Question

У меня есть ListBox с привязанным ItemTemplate к DataTemplate. Моя проблема в том, что я не могу растянуть элементы шаблона на всю ширину ListBox.

<ListBox x:Name="listPeople" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" 
    Margin="0,0,0,0" Background="{x:Null}" SelectionMode="Extended" Grid.Row="1" 
    ItemTemplate="{StaticResource PersonViewModel.BrowserDataTemplate}" 
    ItemsSource="{Binding Mode=OneWay, Path=SearchResults}" >
</ListBox>

<DataTemplate x:Key="PersonViewModel.BrowserDataTemplate">
   <ListBoxItem HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
     <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="5,5,5,5">
       <Border Opacity=".1" x:Name="itemBorder"  Background="#FF000000"   
         HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
         CornerRadius="5,5,5,5" MinWidth="100" Height="50"/>
      </Grid>
   </ListBoxItem>
</DataTemplate>

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

Answer 1

Я потратил час, пытаясь решить эту проблему. Очень очень расстраивает. Вы не должны переопределить весь стиль по умолчанию для ListBoxItem. Я не мог заставить это работать. В конце концов я решил проблему, просто переопределив только свойство HorizontalContentAlignment в моем ListBox.ItemContainerStyle разделе, например:

            <ListBox x:Name="ClassList" ItemsSource="{Binding LineClasses}"
                     ScrollViewer.VerticalScrollBarVisibility="Visible"
                     SelectionMode="Extended"
                     ScrollViewer.HorizontalScrollBarVisibility="Hidden" HorizontalContentAlignment="Stretch"
                     HorizontalAlignment="Stretch" Loaded="ClassList_Loaded"
                     VerticalAlignment="Stretch" Grid.Row="0">
                <ListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
                    </Style>
                </ListBox.ItemContainerStyle>
                    <ListBox.ItemTemplate>

                    <DataTemplate>
                        <Border BorderBrush="Black" CornerRadius="3" Background="#FFE88D34"
                            BorderThickness="1" HorizontalAlignment="Stretch" >
                            <Grid Background="Transparent" HorizontalAlignment="Stretch" >
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <TextBlock 
                                    Grid.Column="0" HorizontalAlignment="Stretch"
                                    Margin="2"                                   
                                    FontSize="10"
                                    Text="{Binding DisplayClassNm}"/>
                            </Grid>

                        </Border>
                    </DataTemplate>
                </ListBox.ItemTemplate>

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

Myles

Answer 2

При создании шаблонов данных для ListBox не следует включать <ListBoxItem>. Содержимое DataTemplate будет размещено внутри сгенерированного контейнера. Вы можете контролировать конструкцию этого контейнера, используя ItemContainerStyle.

Стиль элемента управления по умолчанию для ListBoxItem используется для определения ItemContainerStyle по умолчанию. Этот стиль устанавливает для свойства ListBoxItem.Hor HorizontalContentAlignment значение «Left». Обратите внимание, как ContentPresenter связывает свой объект HorizontalAlignment с этим свойством.

Вам необходимо переопределить стиль контейнера ListBoxItem, который генерируется при привязке к вашему ListBox. Это можно сделать, установив ItemContainerStyle. Установите для свойства HorizontalContentAlignment значение «Растянуть».

Ниже приведен стиль ListBoxItem по умолчанию. Включено для справки.

<Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
            <Setter Property="Padding" Value="3"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Top"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="TabNavigation" Value="Local"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Grid Background="{TemplateBinding Background}">
                            <!-- VSM excluded for readability -->
                            <Rectangle x:Name="fillColor" Fill="#FFBADDE9" RadiusX="1" RadiusY="1" IsHitTestVisible="False" Opacity="0"/>
                            <Rectangle x:Name="fillColor2" Fill="#FFBADDE9" RadiusX="1" RadiusY="1" IsHitTestVisible="False" Opacity="0"/>
                            <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                            <Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1" StrokeThickness="1" RadiusX="1" RadiusY="1" Visibility="Collapsed"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Answer 3

Здесь - это пример использования шаблонов элементов управления и шаблонов данных для элемента управления списка. Обратитесь к разметке XAML, которая расширяет границу для элементов списка.

Answer 4

Я работаю с Silverlight 5 с VS 2012. У меня та же проблема. У меня есть горизонтальный список с моими собственными объектами как ItemsSource. Я хочу, чтобы элементы списка расширялись. Но они не расширяются. Я не хочу давать жестко заданную ширину для каждого элемента списка. Я попробовал все ответы здесь, но ничего не работает. Я просто дал ItemsSource = {Binding Persons} DisplayMemberPath = "Имя". Вот и все

Answer 5

Мой ListBoxItem содержал CheckBox, и вышеупомянутые решения не работали для меня (скорее всего, из-за природы CheckBox, а не этих решений). Мне удалось принудительно использовать эту функцию, не привязывая свойство «Content» флажок, но явно определяющий встроенный XAML:

<CheckBox HorizontalAlignment="Stretch" IsChecked="{Binding Path=IsSelected, Mode=TwoWay}">
    <TextBlock
        MinWidth="130"
        Margin="0,-2,0,0"
        HorizontalAlignment="Stretch"
        Text="{Binding Path=DisplayText}" />
</CheckBox>

Поле необходимо, потому что текст TextBox не выровнялся с галочкой CheckBox. MinWidth также был необходим.

Answer 6

Здесь я заметил две вещи, потому что у меня была та же проблема, и я не смог ее решить так, как вы пытаетесь.

Во-первых, вам не нужно явно помещать ListBoxItem в ваш DataTemplate. Он создается для вас автоматически, поэтому у вас есть элемент ListBoxItem внутри того, который был создан для вас. Я проверил это в Snoop для подтверждения.

Во-вторых, и я не знаю точно, почему, но я не смог получить поведение растяжения из атрибутов выравнивания. Я изменил его, чтобы использовать привязку RelativeSource для атрибута Width к свойству ActualWidth содержащего ListBoxItem. Это сработало для меня.

Width="{Binding RelativeSource={RelativeSource 
   AncestorType={x:Type ListBoxItem}}, Path=ActualWidth}"

Если вам нужно установить свойства стиля в ListBoxItem, который неявно создан для вас, используйте элемент Style внутри элемента ListBox.ItemContainerStyle.

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