Come ottenere un ItemTemplate ListBox per allungare orizzontalmente l'intera larghezza di ListBox?

Question

Voglio che ListItems estenda con lo sfondo arancione l'intera larghezza della Listbox.

Attualmente sono larghi solo quanto il nome e il cognome.

Ho impostato ogni elemento possibile su: HorizontalAlignment = " Stretch " ;.

Voglio che lo sfondo di ListboxItems si espanda mentre l'utente allunga la Listbox in modo da non voler inserire valori assoluti.

Cosa devo fare in modo che il colore di sfondo di ListBoxItems riempia la larghezza di 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>

Answer 1

Sono sicuro che si tratta di un duplicato, ma non riesco a trovare una domanda con la stessa risposta.

Aggiungi HorizontalContentAlignment = " Stretch " al tuo ListBox. Questo dovrebbe fare il trucco. Fai solo attenzione al completamento automatico perché è così facile ottenere HorizontalAlignment per errore.

Answer 2

Ho trovato un'altra soluzione qui , dato che mi sono imbattuto in entrambi i post ...

Questo è dalla risposta di Myles:

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

Questo ha funzionato per me.

Answer 3

Se i tuoi articoli sono più larghi rispetto a ListBox , le altre risposte qui non saranno di aiuto: gli articoli in ItemTemplate rimangono più larghi di il ListBox .

La correzione che ha funzionato per me è stata la disabilitazione della barra di scorrimento orizzontale, che, a quanto pare, dice anche al contenitore di tutti quegli elementi di rimanere largo quanto la casella di riepilogo.

Quindi la correzione combinata per ottenere elementi ListBox larghi come la casella di riepilogo, sia che siano più piccoli e che debbano essere stirati, sia più ampi e che abbiano bisogno di essere avvolti, è la seguente:

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

( crediti per l'idea della barra di scorrimento )

Answer 4

Poiché il bordo viene utilizzato solo per l'aspetto visivo, è possibile inserirlo nel ControlTemplate di ListBoxItem e modificarne le proprietà. In ItemTemplate, è possibile posizionare solo StackPanel e TextBlock. In questo modo, anche il codice rimane pulito, poiché l'aspetto del controllo verrà controllato tramite ControlTemplate e i dati da mostrare verranno controllati tramite DataTemplate.

Answer 5

La correzione per me era impostare la proprietà HorizontalAlignment = " Stretch " su ItemsPresenter all'interno di ScrollViewe r ..

Spero che questo aiuti qualcuno ...

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

Answer 6

Ho anche avuto lo stesso problema, come soluzione rapida, ho usato il blend per determinare quanta imbottitura veniva aggiunta. Nel mio caso erano 12, quindi ho usato un margine negativo per liberarmene. Ora tutto può ora essere centrato correttamente