带有标题和数据模板的 uwp xaml 列表视图答案

【问题标题】：uwp xaml listview with header and datatemplate带有标题和数据模板的 uwp xaml 列表视图
【发布时间】：2016-02-06 00:17:51
【问题描述】：

如何在 xaml 中向列表视图添加标题？我有这个带有 DataTemplate 的列表视图，无法弄清楚如何获取两个文本块的标题。

<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; 它是一个包含项目的列表。

【问题讨论】：

只需添加相关内容即可？
您想要每个项目或每组项目的标题吗？

标签： c# winrt-xaml uwp

【解决方案1】：

我通过定义 ListView.HeaderTemplate 在我的 ListViews 上创建标题行。

 <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 有一些填充和边距搞砸了标题和项目的对齐方式。您可以像这样在 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>

【讨论】：

【解决方案2】：

比你想象的要容易。

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

祝你好运！

【讨论】：

如您所见：我在 DataTemplate 中定义了一个包含 3 列的网格，我希望为 3 列中的每一列设置一个标题。我可以在 DataTemplate 之前和内部使用标记，但是标题的宽度与 DataTemplate 中的内容不同。我喜欢在金融应用中实现类似的东西：imgur.com/yCmdVxU
使用x:Bind时，需要设置Mode=OneWay，否则值改变时不会更新。编译绑定的默认模式是 OneTime