xaml - 如何使 xaml ListView 中的第一项不同？

Question

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

请你能告诉我如何只修改 ListView 的第一个元素吗？我尝试使用标题模板，但不知道如何将其绑定(bind)到步骤列表中的第一个元素。

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

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

这是我的 XAML:

<Page
    x:Class="CloserCrumbs.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CloserCrumbs"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.DataContext>
        <local:SuperVM />
    </Page.DataContext>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <ListView ItemsSource="{Binding Steps}" SelectedItem="{Binding Steps.SelectedItem, Mode=TwoWay}" Height="40" FocusVisualPrimaryThickness="0" FocusVisualSecondaryThickness="0">
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>

            <ListView.ItemTemplate>
                <DataTemplate>
                    <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 ShortDescription}" Margin="10,5" VerticalAlignment="Center" Foreground="White" MinWidth="60"/>
                                </Grid>
                                <Path Data="M0,0 10,15 0,30" Fill="#d0d0d0" />
                            </StackPanel>
                        </Grid>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</Page>

Answer 1

您在这里使用的最佳选择是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)
    {
        var itemsControl = ItemsControl.ItemsControlFromItemContainer(container);
        return (itemsControl.IndexFromContainer(container) == 0) ? FirstItem : OtherItem;
    }
}

在上面的代码中，我只想说索引是否为 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到列表中的第一项，其他人将获得 OtherItem模板。
以下是临时数据的输出。

希望这可以帮助
祝你好运。