Como obter um ItemTemplate do ListBox para esticar horizontalmente toda a largura do ListBox?


356

Eu quero ter os ListItems para estender com seu plano de fundo laranja toda a largura da caixa de listagem.

Atualmente, eles são apenas tão largos quanto o Nome + Sobrenome.

Eu configurei todos os elementos possíveis para: HorizontalAlignment = "Stretch".

Quero que o plano de fundo dos ListboxItems se expanda à medida que o usuário estende a Listbox, para que eu não queira colocar valores absolutos.

O que tenho que fazer para que a cor de fundo dos ListBoxItems preencha a largura do 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>

Respostas:


468

Tenho certeza de que é uma duplicata, mas não consigo encontrar uma pergunta com a mesma resposta.

Adicione HorizontalContentAlignment="Stretch"à sua ListBox. Isso deve fazer o truque. Apenas tenha cuidado com o preenchimento automático, pois é muito fácil obter HorizontalAlignmentpor engano.


11
@ Agile Jedi, você conhece uma solução quando possui itens de caixa de listagem personalizados? Me deparando com esse problema.
eoldre

11
Na verdade, essa solução não funciona no Silverlight por algum motivo. A solução de Gabriel, por outro lado faz
TimothyP

6
Isso não funciona nos controles do WinRT ListView. Eu já tentei.
uSeRnAmEhAhAhAhAhA

3
Isso funciona bem em listas personalizadas (Windows, não Silverlight), apenas tenha cuidado com a conclusão automática ao escrever o xaml. Se você escrever "Horiz ..", receberá "HorizontalAlignment" e não "HorizontalContentAlignment". É muito fácil selecionar a primeira sugestão, pois ambas estão usando "Stretch".
Jarle Bjørnbeth

11
Os itens personalizados funcionam para mim se eu definir a largura do item personalizado como automático.
Lensflare

646

Encontrei outra solução aqui , já que encontrei os dois posts ...

Isto é da resposta de Myles:

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

Isso funcionou para mim.


@CameronMacFarland O motivo do silverlight, pelo menos no meu caso, é porque a equipe de administradores de TI não conseguiu descobrir como implantar aplicativos WPF / Winform usando o Active Directory e queríamos um cenário de implantação limpo que não dependesse de nós as atualizações.
21712 Richard B

@ RichardhardB lol Meu comentário foi mais direcionado ao silverlight, como por que o silverlight deve ser diferente e ter um modelo quebrado em comparação ao WPF.
Cameron MacFarland

@CameronMacFarland ah ... não se preocupe. Depois de criar um aplicativo Silverlight e de lutar com o arquivo ServiceReferences.ClientConfig, estou certo de que evitarei (como a praga) o desenvolvimento de outro aplicativo Silverlight novamente. Foi uma ideia legal, mas não impressionante.
Richard B

11
Para que isso funcione para um modelo de dados em um listView: <ListView.ItemContainerStyle> <Style TargetType = "ListViewItem"> <Setter Property = "HorizontalContentAlignment" Value = "Stretch"> </Setter> </Style> </ ListView .ItemContainerStyle>
Christopher Cook

Erro: Erro no caminho BindingExpression: propriedade 'Width' não encontrada no Project.CustomElement, Project.WindowsPhone, Versão = 1.0.0.0, Culture = neutral, PublicKeyToken = null '. BindingExpression: Path = 'Width' DataItem = Project.CustomElement, Project.WindowsPhone, Versão = 1.0.0.0, Culture = neutral, PublicKeyToken = null '; o elemento de destino é 'Windows.UI.Xaml.Controls.Grid' (Nome = 'nulo'); a propriedade target é 'Width' (tipo 'Double')
Cid preto

72

Se seus itens forem mais largos que o ListBox, as outras respostas aqui não ajudarão: os itens no ItemTemplatepermanecerão mais largos que o ListBox.

A correção que funcionou para mim foi desabilitar a barra de rolagem horizontal, que, aparentemente, também informa ao contêiner de todos esses itens que permaneçam apenas tão largos quanto a caixa de listagem.

Portanto, a correção combinada para obter itens do ListBox tão amplos quanto o da caixa de listagem, sejam menores e precisem de alongamento, ou mais amplos e precisem de agrupamento, é a seguinte:

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

( créditos para a ideia da barra de rolagem )


0

Como a borda é usada apenas para aparência visual, você pode colocá-la no ControlTemplate do ListBoxItem e modificar as propriedades. No ItemTemplate, você pode colocar apenas o StackPanel e o TextBlock. Dessa maneira, o código também permanece limpo, pois na aparência do controle será controlado via ControlTemplate e os dados a serem mostrados serão controlados através do DataTemplate.


0

A correção para mim foi a propriedade conjunto HorizontalAlignment="Stretch"no ItemsPresenterinterior ScrollViewer ..

Espero que isso ajude alguém ...

<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

Eu também tive o mesmo problema, como solução rápida, usei a mistura para determinar a quantidade de preenchimento que estava sendo adicionada. No meu caso, eram 12, então usei uma margem negativa para me livrar dela. Agora tudo agora pode ser centralizado corretamente

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.