Bagaimana cara mendapatkan ItemTemplate ListBox untuk meregangkan lebar penuh dari ListBox secara horizontal?


356

Saya ingin ListItems untuk memperluas dengan latar belakang oranye mereka lebar penuh dari Listbox.

Saat ini mereka hanya selebar FirstName + LastName.

Saya telah mengatur setiap elemen yang saya bisa ke: HorizontalAlignment = "Stretch".

Saya ingin latar belakang ListboxItems meluas saat pengguna merentangkan Listbox jadi saya tidak ingin memasukkan nilai absolut.

Apa yang harus saya lakukan agar warna latar belakang ListBoxItems mengisi lebar 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>

Jawaban:


468

Saya yakin ini adalah duplikat, tetapi saya tidak dapat menemukan pertanyaan dengan jawaban yang sama.

Tambahkan HorizontalContentAlignment="Stretch"ke ListBox Anda. Itu harus melakukan trik. Berhati-hatilah dengan pelengkapan otomatis karena sangat mudah didapat HorizontalAlignmentsecara tidak sengaja.


1
@ Agile Jedi, apakah Anda tahu solusi saat Anda DO memiliki Item ListBox khusus? Saya sendiri mengalami masalah itu.
eoldre

11
Sebenarnya solusi ini tidak berfungsi di Silverlight karena alasan tertentu. Solusi Gabriel di sisi lain tidak
TimothyP

6
Ini tidak berfungsi pada kontrol WinRT ListView. Saya sudah mencobanya.
uSeRnAmEhAhAhAhAhA

3
Ini berfungsi dengan baik pada daftar kustom (Windows, bukan Silverlight), hanya berhati-hati dengan otomatis lengkap saat menulis xaml. Jika Anda menulis "Horiz .." Anda akan mendapatkan "HorizontalAlignment" bukan "HorizontalContentAlignment". Cukup mudah untuk memilih saran pertama, karena keduanya menggunakan "Peregangan".
Jarle Bjørnbeth

1
Item khusus berfungsi untuk saya jika saya mengatur lebar item kustom ke otomatis.
Lensflare

646

Saya menemukan solusi lain di sini , karena saya berlari ke kedua pos ...

Ini dari jawaban Myles:

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

Ini berhasil untuk saya.


@CameronMacFarland Alasan silverlight, setidaknya dalam kasus saya, adalah karena staf Admin TI tidak dapat menemukan cara untuk menyebarkan aplikasi WPF / Winform menggunakan Direktori Aktif, dan kami menginginkan skenario penempatan bersih yang tidak bergantung pada kami Sneakernetting pembaruan.
Richard B

@RichardB lol Komentar saya lebih diarahkan pada silverlight, seperti mengapa silverlight harus berbeda, dan memiliki template yang rusak dibandingkan dengan WPF.
Cameron MacFarland

@CameronMacFarland ah ... jangan khawatir. Setelah melakukan aplikasi Silverlight, dan berjuang dengan file ServiceReferences.ClientConfig, saya menetapkan bahwa saya akan menghindari (seperti wabah) pernah mengembangkan aplikasi Silverlight lain lagi. Itu ide yang keren, tapi tidak mengesankan.
Richard B

1
Agar ini berfungsi untuk templat data dalam listView: <ListView.ItemContainerStyle> <Style TargetType = "ListViewItem"> <Properti Setter = "HorizontalContentAlignment" Value = "Stretch"> </Setter> </Style> </ ListView .ItemContainerStyle>
Christopher Cook

Kesalahan: Kesalahan jalur BindingExpression: Properti 'Lebar' tidak ditemukan di Project.CustomElement, Project.WindowsPhone, Versi = 1.0.0.0, Budaya = netral, PublicKeyToken = null '. BindingExpression: Path = 'Lebar' DataItem = Project.CustomElement, Project.WindowsPhone, Versi = 1.0.0.0, Budaya = netral, PublicKeyToken = null '; elemen target adalah 'Windows.UI.Xaml.Controls.Grid' (Name = 'null'); properti target adalah 'Lebar' (ketik 'Ganda')
Black Cid

72

Jika item Anda lebih luas daripada ListBox, jawaban lain di sini tidak akan membantu: item di ItemTemplatetetap lebih luas daripada ListBox.

Perbaikan yang berhasil bagi saya adalah untuk menonaktifkan scrollbar horizontal, yang, tampaknya, juga memberitahu wadah semua item untuk tetap hanya selebar kotak daftar.

Karenanya perbaikan gabungan untuk mendapatkan item ListBox yang selebar kotak daftar, apakah mereka lebih kecil dan perlu peregangan, atau lebih luas dan perlu pembungkus, adalah sebagai berikut:

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

( kredit untuk gagasan bilah gulir )


0

Karena perbatasan digunakan hanya untuk tampilan visual, Anda bisa memasukkannya ke ControlTemplate ListBoxItem dan memodifikasi properti di sana. Di ItemTemplate, Anda hanya bisa menempatkan StackPanel dan TextBlock. Dengan cara ini, kode juga tetap bersih, karena dalam tampilan kontrol akan dikontrol melalui ControlTemplate dan data yang ditampilkan akan dikontrol melalui DataTemplate.


0

Perbaikan untuk saya adalah untuk mengatur properti HorizontalAlignment="Stretch"di ItemsPresenterdalam ScrollViewe..

Semoga ini bisa membantu seseorang ...

<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

Saya juga memiliki masalah yang sama, sebagai solusi cepat, saya menggunakan campuran untuk menentukan berapa banyak bantalan yang ditambahkan. Dalam kasus saya itu 12, jadi saya menggunakan margin negatif untuk menghilangkannya. Sekarang semuanya sekarang dapat dipusatkan dengan benar

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.