WPF效果之Expander+ListBox

先来看最终实现的效果:

1、关于简单的布局设计:

 总结：①③是Expander②④⑤⑥是ListBox

2、把上一篇的②这一块用ListBox替换:

<Expander Grid.Column="1" ExpandDirection="Left" Header="控制卡" 
                  VerticalAlignment="Bottom" HorizontalAlignment="Right"
                  Style="{DynamicResource LeftExpanderStyle}" Background="Transparent">
    <ListBox Style="{StaticResource SignalCardListBox}"  ItemsSource="{Binding VideoCard.SignalDistributionCards}"/>
</Expander>

3、然后就是最爱的ItemContainerStyle：

<Style x:Key="SignalCardListBoxItemStyle" TargetType="{x:Type ListBoxItem}">
    <Setter Property="SnapsToDevicePixels" Value="True"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="#282BFF"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Margin" Value="4,4,4,0"/>
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                <Expander Header="信号分配卡" Style="{DynamicResource ExpanderStyle}" VerticalAlignment="Bottom" Padding="0">
                    <ListBox Style="{StaticResource BoxBodyListListBox}" ItemsSource="{Binding BoxBodys}"/>
                </Expander>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

4、ListBox的ItemsPanel：​​​​​​​

<ItemsPanelTemplate x:Key="SignalCardItemsPanelTemplate">
    <VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>

5、至于⑤⑥的ListBox就没什么可说的了：

最终简单的效果先这样吧

 以后有时间的话,可以再去摸索一下更复杂的效果;编程不息、Bug不止、无Bug、无生活;改bug的冷静、编码的激情、完成后的喜悦、挖坑的激动 、填坑的兴奋;这也许就是程序员的乐趣吧;今天就到这里吧;希望自己有动力一步一步坚持下去;生命不息,代码不止;大家抽空可以看看今天分享的效果,有好的意见和想法,可以在留言板随意留言;我看到后会第一时间回复大家,多谢大家的一直默默的关注和支持!如果觉得不错,那就伸出您的小手点个赞并关注一下,多谢您的支持！