在前面分享的几篇中咱已经玩耍了Popup、ListBox多选、Grid动态分、RadioButton模板、控件的拖放效果、控件的置顶和置底、控件的锁定、自定义Window样式、动画效果、Expander控件;今天趁着空闲时间接着去摸索基于ListBox的折叠列表的效果,最终实现的效果如下图:
先来看看布局吧:
前台的布局代码:
外面ListBox的子项模板:
<ListBox.ItemTemplate><DataTemplate><!--这里绑定ListBoxItem的IsSelected可以控制只展开一项--><!--去掉绑定的话，可以展开多项--><!--IsExpanded="{Binding $parent[ListBoxItem].IsSelected}"--><Expander Header="{Binding Name}" Cores:AttachedDependencyHelper.ExpanderHeaderImg="{Binding HeaderImg}" Foreground="White" Width="{Binding $parent[ListBox].Width}"HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"><ListBox Items="{Binding ChildData}" Width="260"ItemTemplate="{StaticResource LisBoxItemTemplate}"><ListBox.Styles><Style Selector="ListBoxItem /template/ Border#OutBorder"><Setter Property="Background" Value="#1C3466"/></Style><!--鼠标pointerover的颜色--><Style Selector="ListBoxItem:pointerover /template/ Border#OutBorder"><Setter Property="Background" Value="#cc075c9f"/></Style><!--鼠标selected的颜色--><Style Selector="ListBoxItem:selected /template/ Border#OutBorder"><Setter Property="Background" Value="#075C9F"/></Style></ListBox.Styles></ListBox></Expander></DataTemplate>
</ListBox.ItemTemplate>里面的ListBox的子项模板:
<DataTemplate x:Key="LisBoxItemTemplate"><Grid Width="{Binding $parent[ListBox].Width}"><WrapPanel Orientation="Horizontal" Margin="30,0,0,0" VerticalAlignment="Center"><Image Source="{Binding ManagerType,Converter={StaticResource ManagerTypeEnumToImageConverter}}" Height="20" Stretch="Uniform"/><TextBlock Margin="10,0,0,0" HorizontalAlignment="Center" Text="{Binding Path=Name,StringFormat={}我是{0}}" Foreground="White"/></WrapPanel><Button Classes="RemoveItemButton" Tag="{Binding}" IsVisible="{Binding $parent[ListBoxItem].IsSelected}" CommandParameter="{Binding .}"Command="{Binding DataContext.RemoveItemCommand,RelativeSource={RelativeSource AncestorType={x:Type ListBox} AncestorLevel=2}}"/></Grid>
</DataTemplate>最终简单的效果先这样吧
;回头可以基于玩耍一下联系人的效果;以后有时间的话,可以再去摸索一下更复杂的效果
;编程不息、Bug不止、无Bug、无生活
;改bug的冷静、编码的激情、完成后的喜悦、挖坑的激动 、填坑的兴奋;这也许就是屌丝程序员的乐趣吧;今天就到这里吧;希望自己有动力一步一步坚持下去;生命不息,代码不止;大家抽空可以看看今天分享的效果,有好的意见和想法,可以在留言板随意留言;我看到后会第一时间回复大家,多谢大家的一直默默的关注和支持!如果觉得不错,那就伸出您的小手点个赞并关注一下,多谢您的支持！
