使用WinRT中的DataTemplate将表头添加到Listview

Question

在我的Xaml中,我绑定了一些来自wcf的数据.我不知道如何向列添加一些表头.列中的数据也没有很好地对齐,我认为这是因为ColumnDefinition Width ="auto".

我想要像示例中那样对齐列

例:

我的Xaml

<ListView Margin="120,30,0,120" ItemsSource="{Binding MainViewModel}"
          Grid.Row="1">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid Width="500" VerticalAlignment="Center">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="auto" />
                </Grid.ColumnDefinitions>
                <Grid.Resources>
                    <Style TargetType="TextBlock">
                        <Setter Property="Margin" Value="5,0" />
                    </Style>
                </Grid.Resources>                        
                <TextBlock Grid.Column="0" Text="{Binding Data, Mode=TwoWay}"/>
                <TextBlock Grid.Column="1" Text="{Binding Year, Mode=TwoWay}" />
                <TextBlock Grid.Column="2" Text="{Binding Month, Mode=TwoWay}" />
                <TextBlock Grid.Column="3" Text="{Binding Weekday, Mode=TwoWay}" />
                <TextBlock Grid.Column="4" Text="{Binding Day, Mode=TwoWay}" />
                <TextBlock Grid.Column="5" Text="{Binding Data2, Mode=TwoWay}"></TextBlock>
                <TextBlock Grid.Column="6" Text="{Binding Data3, Mode=TwoWay}"></TextBlock>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

由于我的试验和错误失败,所以任何帮助都非常感谢!谢谢

Answer 1

为了能够ListView完全设计你的样式,你应该修改ListView.ItemContainerStyle,ListView.ItemTemplate和ListView.Template.这是一个例子:

    <ListView Margin="120,30,0,120" ItemsSource="{Binding MainViewModel}"
      Grid.Row="1">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListViewItem">
                            <Grid>
                                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Width="500" VerticalAlignment="Center">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="1*" />
                    </Grid.ColumnDefinitions>
                    <Grid.Resources>
                        <Style TargetType="TextBlock">
                            <Setter Property="Margin" Value="5,0" />
                            <Setter Property="Foreground" Value="White" />
                        </Style>
                        <Style TargetType="Border">
                            <Setter Property="BorderThickness" Value="1" />
                            <Setter Property="BorderBrush" Value="LightGray" />
                            <Setter Property="Background" Value="DarkGray" />
                        </Style>
                    </Grid.Resources>
                    <Border Grid.Column="0" >
                        <TextBlock Text="{Binding Data, Mode=TwoWay}" />
                    </Border>
                    <Border Grid.Column="1" >
                        <TextBlock Text="{Binding Year, Mode=TwoWay}" />
                    </Border>
                    <Border Grid.Column="2" >
                        <TextBlock Text="{Binding Month, Mode=TwoWay}" />
                    </Border>
                    <Border Grid.Column="3" >
                        <TextBlock Text="{Binding Weekday, Mode=TwoWay}" />
                    </Border>
                    <Border Grid.Column="4" >
                        <TextBlock Text="{Binding Day, Mode=TwoWay}" />
                    </Border>
                    <Border Grid.Column="5" >
                        <TextBlock Text="{Binding Data2, Mode=TwoWay}" />
                    </Border>
                    <Border Grid.Column="6" >
                        <TextBlock Text="{Binding Data3, Mode=TwoWay}" />
                    </Border>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
        <ListView.Template>
            <ControlTemplate>
                <Grid HorizontalAlignment="Left">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Grid Grid.Row="0" Width="500" VerticalAlignment="Center">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="1*" />
                            <ColumnDefinition Width="1*" />
                            <ColumnDefinition Width="1*" />
                            <ColumnDefinition Width="1*" />
                            <ColumnDefinition Width="1*" />
                            <ColumnDefinition Width="1*" />
                            <ColumnDefinition Width="1*" />
                        </Grid.ColumnDefinitions>
                        <Grid.Resources>
                            <Style TargetType="TextBlock">
                                <Setter Property="Margin" Value="5,0" />
                                <Setter Property="Foreground" Value="White" />
                                <Setter Property="FontWeight" Value="Bold" />
                            </Style>
                            <Style TargetType="Border">
                                <Setter Property="BorderThickness" Value="1" />
                                <Setter Property="BorderBrush" Value="LightGray" />
                                <Setter Property="Background" Value="MidnightBlue" />
                            </Style>
                        </Grid.Resources>
                        <Border Grid.Column="0">
                            <TextBlock >Data</TextBlock>
                        </Border>
                        <Border Grid.Column="1">
                            <TextBlock >Year</TextBlock>
                        </Border>
                        <Border Grid.Column="2">
                            <TextBlock >Month</TextBlock>
                        </Border>
                        <Border Grid.Column="3">
                            <TextBlock >Weekday</TextBlock>
                        </Border>
                        <Border Grid.Column="4">
                            <TextBlock >Day</TextBlock>
                        </Border>
                        <Border Grid.Column="5">
                            <TextBlock >Data2</TextBlock>
                        </Border>
                        <Border Grid.Column="6">
                            <TextBlock >Data3</TextBlock>
                        </Border>
                    </Grid>
                    <ItemsPresenter Grid.Row="1"></ItemsPresenter>
                </Grid>
            </ControlTemplate>
        </ListView.Template>
    </ListView>

截屏: