方法: ListView の列の水平方向の配置を変更する

  • [アーティクル]

既定では、ListViewItem の各列のコンテンツは左揃えになっています。 各列の配置を変更するには、DataTemplate を指定して、DataTemplate 内の要素の HorizontalAlignment プロパティを設定します。 このトピックでは、ListView が既定でどのようにコンテンツを配置するのかについてと、ListView 内の 1 つの列の配置を変更する方法について説明します。

例

次の例では、Title 列と ISBN 列のデータが左揃えになっています。

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

ISBN 列の配置を変更するには、各 ListViewItem の HorizontalContentAlignment プロパティが Stretch となるように指定する必要があります。これにより、各 ListViewItem 内の要素は、各列の幅全体にわたって、または幅全体に沿って配置されます。 ListView はデータ ソースにバインドされるため、HorizontalContentAlignment を設定するスタイルを作成する必要があります。 次に、DisplayMemberBinding プロパティを使用する代わりに、DataTemplate を使用してコンテンツを表示する必要があります。 各テンプレートの ISBN を表示するには、HorizontalAlignment プロパティが Right に設定されている TextBlock のみを DataTemplate に含めることができます。

次の例では、ISBN 列を右揃えにするために必要なスタイルと DataTemplate を定義し、DataTemplate を参照するように GridViewColumn を変更します。

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

関連項目