如何使xaml ListView中的第一项不同?
问题描述:
这是通用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>
答
你最好在这里使用此选项DataTemplateSelector
。您可以获取要应用模板的项目索引,并将特定的DataTemplate
应用于该项目。
所以在这种情况下,你需要2 DataTemplates
。首先没有箭头(对于第一个项目)和第二个对于所有其他项目。您可以在Page
上的Page.Resources
中添加它们。所以在这种情况下,就像下面这样。
<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 Like下面。
<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>
在这里,我在选择分配的DataTemplates分配FirstItem
到第一个项目列表和其他人将得到OtherItem
模板。
以下是临时数据的输出。
希望这有助于
好运。