带头和datatemplate的{uwp xaml listview

时间:2016-02-06 00:17:52

标签: c# winrt-xaml uwp

如何在xaml中为listview添加标题?我有这个listview与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; 它是一个包含项目的列表。

2 个答案:

答案 0 :(得分:5)

我通过定义ListView.HeaderTemplate在ListViews上创建Header Rails。

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

答案 1 :(得分:0)

比你想象的容易。

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

祝你好运!