需要实现的效果如下:
要想把 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