我该如何使一个ListBoxItem的一个头？ [英] How do I make a header for a ListBoxItem?

问题描述

我在我的应用程序中使用列表框。列表框有两列。我想为列标题。它的布局

I use ListBox in my application. ListBox has two columns. I want to make a title for the columns. It is layout

  <Window.Resources>
    <Style x:Key="borderBase" TargetType="Border">
        <Setter Property="BorderBrush" Value="Black" />
        <Setter Property="BorderThickness" Value="1" />
    </Style>
</Window.Resources>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="1*" />
        <RowDefinition Height="7*" />
    </Grid.RowDefinitions>
    <!--  Title  -->
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Border Style="{StaticResource borderBase}">
            <TextBlock Text="FirstName" />
        </Border>

        <Border Grid.Column="1" Style="{StaticResource borderBase}">
            <TextBlock Text="SecondName" />
        </Border>

    </Grid>

    <!-- Data -->
    <ListBox Grid.Row="1">
        <ListBox.ItemTemplate>
            <DataTemplate>

                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>

                    <Border Style="{StaticResource borderBase}">
                        <TextBlock Style="{StaticResource textBlockBase}" Text="{Binding FirstName}" />
                    </Border>

                    <Border Grid.Column="1" Style="{StaticResource borderRigth}">
                        <TextBlock Style="{StaticResource textBlockBase}" Text="{Binding SecondName}" />
                    </Border>
                </Grid>

            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

</Grid>

当ListBox中的几个项目都显示正常。但是，当大量的列表中的元素 - 在列表框中垂直滚动条是可见的。然后将标题和移动跨各列的宽度。

When a few items in the ListBox are all displayed OK. But when a lot of elements in the list - a vertical scroll bar in ListBox is visible. Then the title and move across the width of the columns.

如何对齐列和标题的宽度？

How to align the width of the columns and headers?

推荐答案

WPF提供一些属性的只是的用于这一目的。你需要使用 SharedSizeGroup 和 Grid.IsSharedSizeScope 属性：

WPF provides some properties just for this purpose. You need to use the SharedSizeGroup and Grid.IsSharedSizeScope properties:

<Grid Grid.IsSharedSizeScope="True"><!-- Look HERE -->
    <Grid.RowDefinitions>
        <RowDefinition Height="1*" />
        <RowDefinition Height="7*" />
    </Grid.RowDefinitions>
    <!--  Title  -->
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition SharedSizeGroup="FirstNameColumn" /><!-- Look HERE -->
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Border Style="{StaticResource borderBase}">
            <TextBlock Text="FirstName" />
        </Border>
        <Border Grid.Column="1" Style="{StaticResource borderBase}">
            <TextBlock Text="SecondName" />
        </Border>
    </Grid>
    <!-- Data -->
    <ListBox Grid.Row="1">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition SharedSizeGroup="FirstNameColumn" />
                        <ColumnDefinition /><!--  Look Above HERE  -->
                    </Grid.ColumnDefinitions>
                    <Border Style="{StaticResource borderBase}">
                        <TextBlock Style="{StaticResource textBlockBase}" Text="{Binding FirstName}" />
                    </Border>
                    <Border Grid.Column="1" Style="{StaticResource borderRigth}">
                        <TextBlock Style="{StaticResource textBlockBase}" Text="{Binding SecondName}" />
                    </Border>
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

</Grid>

请瑟的 Grid.IsSharedSizeScope附加属性在MSDN 页面了解更多信息。

Please se the Grid.IsSharedSizeScope Attached Property page at MSDN for more information.

这篇关于我该如何使一个ListBoxItem的一个头？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！