需要实现的效果如下:
要想把 ListBox 的内容纵向显示很简单,只需把 ListBox 的内容控件为 WrapPanel 就可以了:
<ListBox.ItemsPanel> <ItemsPanelTemplate> <sltoolkit:WrapPanel /> </ItemsPanelTemplate> </ListBox.ItemsPanel>
在 ListBox 的末项后添加按钮的思路是:添加按钮跟删除按钮都看作是跟普通的 ListItem 一样作为 Item 对象存在,只不过这是2个特殊的 Item:
public bool IsAddButton { get; set; } public bool IsRemoveButton { get; set; }
UI 中根据这2个属性区别于其他的项,并会根据这2个属性控制图片和按钮的显示隐藏:
<Image Source="{Binding ImageUri}" HorizontalAlignment="Left" Height="64" Width="64" Visibility="{Binding IsImage, Converter={StaticResource BoolToVisibilityConverter}}" d:IsHidden="True" /> <Grid Height="64" Width="64" Tap="Grid_Tap_Add" Visibility="{Binding IsAddButton, Converter={StaticResource BoolToVisibilityConverter}}"> <Image Source="/Resources/add.png" /> </Grid> <Grid Height="64" Width="64" Tap="Grid_Tap_Remove" Visibility="{Binding IsRemoveButton, Converter={StaticResource BoolToVisibilityConverter}}"> <Image Source="/Resources/minus.png" /> </Grid>
源代码:demo