Bagikan melalui

Cara: Mengubah Perataan Horizontal Kolom dalam Tampilan Daftar

  • Artikel

Secara default, konten setiap kolom dalam ListViewItem rata kiri. Anda dapat mengubah perataan setiap kolom dengan menyediakan DataTemplate dan mengatur HorizontalAlignment properti pada elemen dalam DataTemplate. Topik ini memperlihatkan bagaimana menyelaraskan ListView kontennya secara default dan cara mengubah perataan satu kolom dalam ListView.

Contoh

Dalam contoh berikut, data di Title kolom dan ISBN rata kiri.

<!--XmlDataProvider is defined in a ResourceDictionary, 
    such as Window.Resources-->
<XmlDataProvider x:Key="InventoryData" XPath="Books">
    <x:XData>
        <Books xmlns="">
            <Book ISBN="0-7356-0562-9" Stock="in" Number="9">
                <Title>XML in Action</Title>
                <Summary>XML Web Technology</Summary>
            </Book>
            <Book ISBN="0-7356-1370-2" Stock="in" Number="8">
                <Title>Programming Microsoft Windows With C#</Title>
                <Summary>C# Programming using the .NET Framework</Summary>
            </Book>
            <Book ISBN="0-7356-1288-9" Stock="out" Number="7">
                <Title>Inside C#</Title>
                <Summary>C# Language Programming</Summary>
            </Book>
            <Book ISBN="0-7356-1377-X" Stock="in" Number="5">
                <Title>Introducing Microsoft .NET</Title>
                <Summary>Overview of .NET Technology</Summary>
            </Book>
            <Book ISBN="0-7356-1448-2" Stock="out" Number="4">
                <Title>Microsoft C# Language Specifications</Title>
                <Summary>The C# language definition</Summary>
            </Book>
        </Books>
    </x:XData>
</XmlDataProvider>

<ListView ItemsSource="{Binding Source={StaticResource InventoryData}, XPath=Book}">
    <ListView.View>
        <GridView>
            <GridViewColumn Width="300" Header="Title" 
                            DisplayMemberBinding="{Binding XPath=Title}"/>
            <GridViewColumn Width="150" Header="ISBN" 
                            DisplayMemberBinding="{Binding XPath=@ISBN}"/>
        </GridView>
    </ListView.View>
</ListView>

Untuk mengubah perataan ISBN kolom, Anda perlu menentukan bahwa HorizontalContentAlignment properti masing-masing ListViewItem adalah Stretch, sehingga elemen di masing-masing ListViewItem dapat mencakup atau diposisikan di sepanjang seluruh lebar setiap kolom. ListView Karena terikat ke sumber data, Anda perlu membuat gaya yang mengatur HorizontalContentAlignment. Selanjutnya, Anda perlu menggunakan DataTemplate untuk menampilkan konten alih-alih menggunakan DisplayMemberBinding properti . Untuk menampilkan ISBN setiap templat, DataTemplate dapat berisi TextBlock yang propertinya HorizontalAlignment diatur ke Right.

Contoh berikut menentukan gaya dan DataTemplate diperlukan untuk membuat ISBN kolom rata kanan, dan mengubah GridViewColumn untuk mereferensikan DataTemplate.

<!--The Style and DataTemplate are defined in a ResourceDictionary, 
    such as Window.Resources-->
<Style TargetType="ListViewItem">
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>

<DataTemplate x:Key="ISBNTemplate">
    <TextBlock HorizontalAlignment="Right" 
               Text="{Binding XPath=@ISBN}"/>
</DataTemplate>

<ListView ItemsSource="{Binding Source={StaticResource InventoryData}, XPath=Book}">
    <ListView.View>
        <GridView>
            <GridViewColumn Width="300" Header="Title" 
                            DisplayMemberBinding="{Binding XPath=Title}"/>
            <GridViewColumn Width="150" Header="ISBN" 
                            CellTemplate="{StaticResource ISBNTemplate}"/>
        </GridView>
    </ListView.View>
</ListView>

Baca juga