Question

我在我的应用程序中使用ListBox。 ListBox有两列。我想为专栏制作一个标题。这是布局

  <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中的垂直滚动条可见时。然后标题并移动到列的宽度。

a busy cat http://s61.radikal.ru/i173/1309/2b/5d5d6fc32f8c.png

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

Answer 1

WPF为此提供了一些属性。您需要使用SharedSizeGroup和Grid.IsSharedSizeScope属性：

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

请访问MSDN上的Grid.IsSharedSizeScope Attached Property页面以获取更多信息。

Answer 2

为什么这么复杂？只需使用GridViewColumn的“标题”属性......

 <ListView >
            <ListView.View>
                <GridView>
                    <GridViewColumn  Header="Id"/>
                    <GridViewColumn  Header="Name"/>
                </GridView>
            </ListView.View>
        </ListView>

Answer 3

我建议使用ListView，您可以为每个列定义和设置标题样式，而不必关心定位：

    <ListView>
        <ListView.View>
            <GridView>
                <GridViewColumn>
                    <GridViewColumn.CellTemplate>
                         <Border Style="{StaticResource borderBase}">
                             <TextBlock Style="{StaticResource textBlockBase}" Text="{Binding FirstName}" />
                         </Border>
                    </GridViewColumn.CellTemplate>
                    <GridViewColumn.HeaderTemplate>
                        <!--your header template-->
                    </GridViewColumn.HeaderTemplate>
                </GridViewColumn>
                <GridViewColumn>
                    <GridViewColumn.CellTemplate>
                         <Border Style="{StaticResource borderBase}">
                             <TextBlock Style="{StaticResource textBlockBase}" Text="{Binding SecondName}" />
                         </Border>
                    </GridViewColumn.CellTemplate>
                    <GridViewColumn.HeaderTemplate>
                        <!--your header template-->
                    </GridViewColumn.HeaderTemplate>
                </GridViewColumn>
            </GridView>
        </ListView.View>
    </ListView>

Answer 4

   <ListView ItemsSource="{Binding Source={StaticResource  Locator},Path=EtudiantVM.ListEtudiants}">
       <ListView.View>
      <GridView>
          <GridViewColumn  Header="Nom" Width="100">
              <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Nom}"></TextBlock>
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
          </GridViewColumn>
            <GridViewColumn  Header="Prénom" Width="100">
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Prenom}"></TextBlock>
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
                </GridViewColumn>
                <GridViewColumn  Header="Note" Width="100">
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Note}"></TextBlock>
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
                </GridViewColumn>
            </GridView>
        </ListView.View>

Answer 5

    <Grid Style="{StaticResource TableHeader}">
        <Grid.Resources>
            <Style TargetType="{x:Type Border}" BasedOn="{StaticResource TableBorder}"/>
            <Style TargetType="{x:Type TextBlock}" BasedOn="{StaticResource TextTableHeader}">
                <Setter Property="TextWrapping" Value="Wrap"/>
            </Style>
        </Grid.Resources>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Border BorderThickness="1">
            <TextBlock Text="Card"/>
        </Border>

        <Border Grid.Column="1" BorderThickness="0 1 1 1">
            <TextBlock Text="Type"/>
        </Border>

        <Border Grid.Column="2" BorderThickness="0 1 1 1">
            <TextBlock Text="Limit"/>
        </Border>

        <Border Grid.Column="3" BorderThickness="0 1 1 1">
            <TextBlock Text="Amount"/>
        </Border>

        <Border Grid.Column="4" BorderThickness="0 1 1 1">
            <TextBlock Text="Payment Due"/>
        </Border>

    </Grid>

    <ListBox Style="{StaticResource ListBoxStyle}"
             ItemsSource="{Binding Source}"
             SelectedItem="{Binding SelectedItem}"
             IsHitTestVisible="{Binding IsSelectionActive}"
             ItemTemplate="{Binding ItemTemplate}" />
</Grid>

如何为ListBoxItem创建标头？

5 个答案: