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

Question

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

请问您能告诉我如何仅修改ListView的第一个元素？我试图使用标题模板,但我无法弄清楚如何将它绑定到我的步骤列表中的第一个元素.

第一个元素和其他元素之间的唯一区别是第一个边缘的形状是直的.第一个元素没有这种样式: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它不包含First Path,使其看起来像一个起始箭头.

以下是代码 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 DataTemplateelse 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,其他人将获得OtherItemTemplate.

以下是临时数据的输出.

希望这可以帮助

祝好运.