WPF效果第一百八十九篇之又玩Expander+ListBox

Posted 2022-06-08 dotNET跨平台

上一篇文章已经提前预告了今天要分享的效果,今天接着上一篇的效果接着去实现,还是先来看最终实现的效果:

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