带有 header 和数据模板的 uwp xaml 列表视图

Question

如何将 header 添加到 xaml 中的列表视图？我有一个带有 DataTemplate 的列表视图，无法弄清楚如何为两个文本块获取 header。

<ListView Name="myListView"  Grid.Row="2"  IsItemClickEnabled="True" ItemClick="ListView_ItemClick" >

        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            </Style>
        </ListView.ItemContainerStyle>

            <ListView.ItemTemplate>
            <DataTemplate x:DataType="data:Thema">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="100"/>
                        <ColumnDefinition Width="50"/>
                    </Grid.ColumnDefinitions>

                    <TextBlock FontSize="16" Text="{x:Bind Name}" VerticalAlignment="Center" Grid.Column="0" />

                    <TextBlock FontSize="16" Text="{x:Bind FachId}" VerticalAlignment="Center" Grid.Column="1" />

                </Grid>

            </DataTemplate>
        </ListView.ItemTemplate>

    </ListView>

Listview在后台从c#代码获取数据： myListView.ItemsSource = tempThemen；它是一个包含项目的列表。

Answer 1

比你想象的要容易。

<TextBlock Grid.Column="0">
    <Run Text="Name" />
    <LineBreak />
    <Run Text="{x:Bind Name}" />
</TextBlock>

<TextBlock Grid.Column="1">
    <Run Text="FachId" FontWeight="Bold" />
    <LineBreak />
    <Run Text="{x:Bind FachId}" />
</TextBlock>

祝你好运！

Answer 2

我通过定义 ListView.HeaderTemplate 在我的 ListView 上创建 Header 行。

 <ListView.HeaderTemplate>
     <DataTemplate>
         <Grid>
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="8*" MinWidth="135"/>
                 <ColumnDefinition Width="15*" MinWidth="150"/>
                 <ColumnDefinition Width="3*" MinWidth="20"/>
                 <ColumnDefinition Width="2*" MinWidth="10"/>
             </Grid.ColumnDefinitions>

             <Border BorderBrush="AntiqueWhite" BorderThickness="0,0,0,0.5">
                 <TextBlock Text="Race Date" Margin="5,0,0,0" />
             </Border>
             <Border Grid.Column="1" BorderBrush="AntiqueWhite" BorderThickness="0,0,0,0.5">
                 <TextBlock Text="Circuit" Margin="5,0,0,0"/>
             </Border>
             <Border Grid.Column="2" BorderBrush="AntiqueWhite" BorderThickness="0,0,0,0.5">
                 <TextBlock Text="Laps" Grid.Column="2" Margin="0,0,5,0" HorizontalAlignment="Right"/>
             </Border>
             <Border Grid.Column="3" BorderBrush="AntiqueWhite" BorderThickness="0,0,0,0.5">
             </Border>

         </Grid>                   
     </DataTemplate>
 </ListView.HeaderTemplate>

然后我用相同的列定义定义 ListView.ItemTemplate。之后，您会注意到 ListViewItems 有一些填充和边距搞砸了 header 和项目的对齐方式。您可以像这样在 ListView.ItemContainerStyle 中修复此问题：

                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="ListViewItem">
                                    <ListViewItemPresenter ContentMargin="0" Padding="0" />
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </ListView.ItemContainerStyle>

带有 header 和数据模板的 uwp xaml 列表视图

uwp xaml listview with header and datatemplate

c#

winrt-xaml

uwp