如何为 ListBoxItem 创建标题?

问题描述

我在我的应用程序中使用 ListBox.ListBox 有两列.我想为列命名.是布局

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 中的几个项目全部显示时 OK.但是当列表中有很多元素时——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 创建标题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！