如何使xaml ListView中的第一项与众不同?

时间:2017-09-13 12:33:18

标签: xaml listview win-universal-app windows-10-universal uwp-xaml

What it looks like and what I need

这适用于通用Windows应用程序。

请告诉我如何仅修改ListView的第一个元素?我试图使用标题模板,但我无法解决如何将其绑定到我的步骤列表中的第一个元素。

第一个元素和其他元素之间的唯一区别是第一个边缘的形状是直的。第一个元素不具有这种样式:Data =" M0,0 10,0 10,30 0,30 10,15"

更新:我已经使用模板选择器(DataTemplateSelector)工作了。这意味着我必须给每个项目一个位置编号。任何更好的解决方案都非常赞赏!

这是我的XAML:

).*;

1 个答案:

答案 0 :(得分:7)

此处使用的最佳选择是DataTemplateSelector。您可以获取要应用模板的项目的索引,并将特定DataTemplate应用于该项目。

所以在这种情况下你需要2 DataTemplates。首先没有箭头(对于第一个项目),第二个没有所有其他项目。您可以在Page.Resources上的Page中添加它们。所以在这种情况下就像下面这样。

<Page.Resources>
    <DataTemplate x:Name="OtherItem">
        <StackPanel x:Name="t1" Orientation="Horizontal" Margin="-12" Height="30">
            <Grid Height="30">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <StackPanel Orientation="Horizontal" Margin="0,0,-7,0" Height="30" >
                    <Path Data="M0,0 10,0 10,30 0,30 10,15" Fill="#d0d0d0" />
                    <Grid>
                        <Rectangle Fill="#d0d0d0" />
                        <TextBlock Text="{Binding }" Margin="10,5" VerticalAlignment="Center" Foreground="White" MinWidth="60"/>
                    </Grid>
                    <Path Data="M0,0 10,15 0,30" Fill="#d0d0d0" />
                </StackPanel>
            </Grid>
        </StackPanel>
    </DataTemplate>
    <DataTemplate x:Name="FirstItem">
        <StackPanel x:Name="t1" Orientation="Horizontal" Margin="-12" Height="30">
            <Grid Height="30">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <StackPanel Orientation="Horizontal" Margin="0,0,-7,0" Height="30" >
                    <Grid>
                        <Rectangle Fill="#d0d0d0" />
                        <TextBlock Text="{Binding }" Margin="10,5" VerticalAlignment="Center" Foreground="White" MinWidth="60"/>
                    </Grid>
                    <Path Data="M0,0 10,15 0,30" Fill="#d0d0d0" />
                </StackPanel>
            </Grid>
        </StackPanel>
    </DataTemplate>
</Page.Resources>

如果您发现FirstItem DataTemplate不包含第一条路径,使其看起来像一个起始箭头。

以下是DataTemplateSelector

的代码
public class ItemsDataTemplateSelector : DataTemplateSelector
{
    public DataTemplate FirstItem { get; set; }
    public DataTemplate OtherItem { get; set; }

    protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
    {
        DataTemplate _returnTemplate = new DataTemplate();
        var itemsControl = ItemsControl.ItemsControlFromItemContainer(container);
        _returnTemplate = (itemsControl.IndexFromContainer(container) == 0) ? FirstItem : OtherItem;
        return _returnTemplate;
    }
}

在上面的代码中,我所说的只是索引是0然后应用FirstItem DataTemplate其他OtherItem

现在更改ListView,如下所示。

<ListView x:Name="listView" VerticalAlignment="Top">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListView.ItemTemplateSelector>
        <local:ItemsDataTemplateSelector FirstItem="{StaticResource FirstItem}" 
                                         OtherItem="{StaticResource OtherItem}" />
    </ListView.ItemTemplateSelector>
</ListView>

这里我在Selector中分配DataTemplates,将FirstItem分配给List中的First Item,其他人将获得OtherItem Template。

以下是临时数据的输出。

enter image description here

希望这有帮助

祝你好运。